Changes between Version 2 and Version 3 of threejs


Ignore:
Timestamp:
Oct 12, 2013, 11:05:58 PM (7 years ago)
Author:
Leon Kos
Comment:

Dodaj canvas element in pozicioniraj kocko v njem

Legend:

Unmodified
Added
Removed
Modified
  • threejs

    v2 v3  
    55<script src="https://rawgithub.com/mrdoob/three.js/master/build/three.min.js"></script>
    66<script type="text/javascript">
     7function initScene()
     8  {
    79  var scene = new THREE.Scene();
    8   var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
    9   var renderer = new THREE.WebGLRenderer();
    10   renderer.setSize(window.innerWidth, window.innerHeight);
    11   document.body.appendChild(renderer.domElement);
    12   var geometry = new THREE.CubeGeometry(1,1,1);
    13   var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
     10  var canvas = document.getElementById("myCanvas");
     11  var camera = new THREE.PerspectiveCamera(75, canvas.offsetWidth/canvas.offsetHeight, 0.1, 1000);
     12  var renderer = new THREE.WebGLRenderer({canvas: canvas});
     13  renderer.setSize(canvas.offsetWidth, canvas.offsetHeight);
     14  var geometry = new THREE.CubeGeometry(2,2,2);
     15  var material = new THREE.MeshBasicMaterial({color: 0xfa0a0a});
    1416  var cube = new THREE.Mesh(geometry, material);
    1517  scene.add(cube); camera.position.z = 5;
    1618  var render = function () {
    1719       requestAnimationFrame(render);
    18        cube.rotation.x += 0.1;
    19        cube.rotation.y += 0.1;
     20       cube.rotation.x += 0.01;
     21       cube.rotation.y += 0.01;
    2022       renderer.render(scene, camera);
    2123  };
    2224  render();
     25
     26
     27window.onload = window.onresize = function() {
     28     initScene();
     29}
    2330</script>
     31<canvas id="myCanvas" width="400" height="300" style="background: lightgrey; float:right;">
     32  Your browser does not support the HTML5 canvas tag.
     33</canvas>
    2434}}}
    25 {{{
    26 #!javascript
    27 <script src="https://rawgithub.com/mrdoob/three.js/master/build/three.min.js"></script>
    28 <script type="text/javascript">
    29   var scene = new THREE.Scene();
    30   var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
    31   var renderer = new THREE.WebGLRenderer();
    32   renderer.setSize(window.innerWidth, window.innerHeight);
    33   document.body.appendChild(renderer.domElement);
    34   var geometry = new THREE.CubeGeometry(1,1,1);
    35   var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
    36   var cube = new THREE.Mesh(geometry, material);
    37   scene.add(cube); camera.position.z = 5;
    38   var render = function () {
    39        requestAnimationFrame(render);
    40        cube.rotation.x += 0.1;
    41        cube.rotation.y += 0.1;
    42        renderer.render(scene, camera);
    43   };
    44   render();
    45 </script>
    46 }}}