Three.js
Creating a scene(创建一个场景)
-
布景
- scene
- camera
- renderer
-
演员
-
3d立方体
-
盒子模型
包含立方体所有顶点和填充面的对象
-
材料
对其着色
-
网孔
承载几何模型的一个对象
-
-
-
渲染场景
-
渲染循环 render loop
function render() { requestAnimationFrame( render ); renderer.render( scene, camera ); } render();
-
-
创建动画
-
基本上都是在render循环中处理
function render() { requestAnimationFrame( render ); cube.rotation.x += 0.1;//转动 cube.rotation.y += 0.1;//转动 renderer.render( scene, camera ); } render();
-
-
全部代码
<!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>My first Three.js app</title> <style> body { margin: 0; } canvas { width: 100%; height: 100% } </style> </head> <body> <script src="/libs/three.r73.js"></script> <script> // Our Javascript will go here. 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.BoxGeometry(1, 1, 1); var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); var cube = new THREE.Mesh(geometry, material); scene.add(cube); camera.position.z = 5; function render() { requestAnimationFrame(render); cube.rotation.x += 0.005 cube.rotation.y += 0.005; renderer.render(scene, camera); } render(); </script> </body> </html>
-
End