wiki:threejs

Version 4 (modified by Leon Kos, 7 years ago) (diff)

dodaj JS izpis

Osnovni three.js model

Naslednji primer je osnovni primer scene predelan za canvas, ki ni celozaslonski ampak le del okna.

Your browser does not support the HTML5 canvas tag.
<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 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.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>