Skip to content

README3JS.md

Latest commit

 

History

History
43 lines (35 loc) · 994 Bytes

README3JS.md

File metadata and controls

43 lines (35 loc) · 994 Bytes
Raw

Using three.js

premiers pas

cube tournant sur lui-même

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>My first three.js app</title>
  <style>body { margin: 0; }</style>
 </head>
 <body>
 <script src="/lib/three.js"></script>
 <script>
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

  const renderer = new THREE.WebGLRenderer();
  renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );

  const geometry = new THREE.BoxGeometry();
  const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
  const cube = new THREE.Mesh( geometry, material );
  scene.add( cube );

  camera.position.z = 5;

  const animate = function () {
   requestAnimationFrame( animate );
   cube.rotation.x += 0.01;
   cube.rotation.y += 0.01;
   renderer.render( scene, camera );
  };

  animate();
 </script>
</body>
</html>