依据第一节的原理，可以看出基于three.js的三维与纯webgl的逻辑大致是相同的，但是three.js帮我们省去了很多工作，这就是框架的意义。
构建顺序：
获取canvas元素；
创建three渲染器
创建三维场景
设置画图区域及容器大小。
创建相机、光源、纹理
渲染场景，加载下一帧。
requestAnimationFrame()函数目前还不能理解，将此函数放在onload中，反复刷新网页，
会发现贴图交替变换，刷新的越快，有可能会前后两次不变（与电脑刷新频率有关）,在控制台加上一句打印之后，发现这个run函数在无限循环执行，此后的动画效果应该也是这么做的。
<!DOCTYPE html> <html> <head> <title>Welcome to WebGL</title> <script src="../libs/Three.js"></script> <script> var renderer = null, scene = null, camera = null, cube = null, animating = false; function onLoad() { //获取canvas元素 var container = document.getElementById("container"); // 创建three.js渲染器 renderer = new THREE.WebGLRenderer( { antialias: true } ); //设置画图的大小为容器的大小，并将渲染器追加到元素中 renderer.setSize(container.offsetWidth, container.offsetHeight); container.appendChild( renderer.domElement ); // 创建一个三维的场景 scene = new THREE.Scene(); // 创建相机，设置相机的位置 camera = new THREE.PerspectiveCamera( 45, container.offsetWidth / container.offsetHeight, 1, 4000 ); camera.position.set( 0, 0, 3 ); // 创建一个光源，光源的位置放在相机的正上方 var light = new THREE.DirectionalLight( 0xffffff, 1.5); light.position.set(0, 0, 1); scene.add( light ); // 创建一个纹理 var mapUrl = "../images/molumen_small_funny_angry_monster.jpg"; var map = THREE.ImageUtils.loadTexture(mapUrl); // 将纹理赋值给材质 var material = new THREE.MeshPhongMaterial({ map: map }); // 创建立方体 var geometry = new THREE.CubeGeometry(1, 1, 1); // 将几何体和材质放到一个网格中 cube = new THREE.Mesh(geometry, material); // 设置网格的朝向，否则看不到立方体的形状 cube.rotation.x = Math.PI / 5; cube.rotation.y = Math.PI / 5; // 将三维模型添加到场景之中 scene.add( cube ); // Run our render loop run(); } function run() { //渲染场景 renderer.render( scene, camera ); console.log("xr") // 请求下一帧，此函数为h5的知识，不属于webgl范畴，可以去了解一下。 requestAnimationFrame(run); } </script> </head> <body onLoad="onLoad();" style=""> <h1>Welcome to WebGL!</h1> <div id="container" style="width:95%; height:80%; position:absolute;"></div> <div id="prompt" style="width:95%; height:6%; bottom:0; text-align:center; position:absolute;">Click to animate the cube</div> </body> </html>