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>