Changes between Version 2 and Version 3 of threejs

Timestamp:

Oct 12, 2013, 11:05:58 PM (11 years ago)

Author:

Leon Kos

Comment:

Dodaj canvas element in pozicioniraj kocko v njem

threejs

@@ -5 +5 @@
 <script src="https://rawgithub.com/mrdoob/three.js/master/build/three.min.js"></script>
 <script type="text/javascript">
+function initScene()
+  {
   var scene = new THREE.Scene(); 
-  var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); 
-  var renderer = new THREE.WebGLRenderer(); 
-  renderer.setSize(window.innerWidth, window.innerHeight); 
-  document.body.appendChild(renderer.domElement); 
-  var geometry = new THREE.CubeGeometry(1,1,1); 
-  var material = new THREE.MeshBasicMaterial({color: 0x00ff00}); 
+  var canvas = document.getElementById("myCanvas");
+  var camera = new THREE.PerspectiveCamera(75, canvas.offsetWidth/canvas.offsetHeight, 0.1, 1000); 
+  var renderer = new THREE.WebGLRenderer({canvas: canvas}); 
+  renderer.setSize(canvas.offsetWidth, canvas.offsetHeight); 
+  var geometry = new THREE.CubeGeometry(2,2,2); 
+  var material = new THREE.MeshBasicMaterial({color: 0xfa0a0a}); 
   var cube = new THREE.Mesh(geometry, material); 
   scene.add(cube); camera.position.z = 5; 
   var render = function () { 
        requestAnimationFrame(render); 
-       cube.rotation.x += 0.1; 
-       cube.rotation.y += 0.1; 
+       cube.rotation.x += 0.01; 
+       cube.rotation.y += 0.01; 
        renderer.render(scene, camera); 
   }; 
   render();
+}  
+
+window.onload = window.onresize = function() {
+     initScene();
+}
 </script>
+<canvas id="myCanvas" width="400" height="300" style="background: lightgrey; float:right;">
+  Your browser does not support the HTML5 canvas tag.
+</canvas>
 }}}
-{{{
-#!javascript
-<script src="https://rawgithub.com/mrdoob/three.js/master/build/three.min.js"></script>
-<script type="text/javascript">
-  var scene = new THREE.Scene(); 
-  var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); 
-  var renderer = new THREE.WebGLRenderer(); 
-  renderer.setSize(window.innerWidth, window.innerHeight); 
-  document.body.appendChild(renderer.domElement); 
-  var geometry = new THREE.CubeGeometry(1,1,1); 
-  var material = new THREE.MeshBasicMaterial({color: 0x00ff00}); 
-  var cube = new THREE.Mesh(geometry, material); 
-  scene.add(cube); camera.position.z = 5; 
-  var render = function () { 
-       requestAnimationFrame(render); 
-       cube.rotation.x += 0.1; 
-       cube.rotation.y += 0.1; 
-       renderer.render(scene, camera); 
-  }; 
-  render();
-</script>
-}}}