Three.js
和它的3d世界

 

 

mrdoob/three.js

var scene, camera, renderer;
   var geometry, material, mesh;
   init();
   animate();

   function init() {
       scene = new THREE.Scene();
       camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
       camera.position.z = 1000;
       geometry = new THREE.BoxGeometry(200, 200, 200);
       material = new THREE.MeshNormalMaterial();
       mesh = new THREE.Mesh(geometry, material);
       scene.add(mesh);
       renderer = new THREE.WebGLRenderer();
       renderer.setSize(window.innerWidth, window.innerHeight);
       document.body.appendChild(renderer.domElement);
   }

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

坐标系/Axis

镜头/Camera

透视镜头/Perspective camera

PerspectiveCamera( fov, aspect, near, far )

透视镜头/Perspective camera

透视镜头/Perspective camera

平行镜头/Orthographic cameraa

平行镜头/Orthographic camera

OrthographicCamera( left, right, top, bottom, near, far )

平行镜头/Orthographic camera

平行镜头/Orthographic camera

场景/Scene

物体/Geometry

材质/Material

灯光/Lighth

渲染器/Renderer

动画/Animation

/