js学习之Three.js-优快云博客

本文介绍如何利用Three.js库在网页上绘制一个能够自动旋转的三维立方体。通过设置场景、摄像机和渲染器，并定义立方体的几何形状及材质属性，实现了基本的3D图形展示。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title></title>
 5     <style>canvas { width: 100%; height: 100% }</style>
 6     <script src="js/three.js"></script>
 7 </head>
 8 <body>
 9     <script>
10 //场景舞台
11         var scene = new THREE.Scene();
12 //摄像头  
13         var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
14 //渲染器
15         var renderer = new THREE.WebGLRenderer();
16 //渲染区域范围
17         renderer.setSize(window.innerWidth, window.innerHeight);
18 //添加渲染块canvas
19         document.body.appendChild(renderer.domElement);
20 //创建立方体
21         var geometry = new THREE.CubeGeometry(1,1,1);
22 添加立方体
23         var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
24         var cube = new THREE.Mesh(geometry, material);
25         scene.add(cube);
26         camera.position.z = 5;
27         function render() {
28             requestAnimationFrame(render);
29             cube.rotation.x += 0.1;
30             cube.rotation.y += 0.1;
31             renderer.render(scene, camera);
32         }
33         render();
34     </script>
35 </body>
36 </html>
37