快速上手, 搭建第一个3D场景
最重要的一步, 先下载three.js, 引入网页中 <script src="./three.js"></script>
效果图:
1. 五大因素
搭建一个场景必须要的五大因素, 场景, 相机, 光源, 物体, 渲染器
结合生活, 场景就是我们身处的环境, 相机是我们的眼睛, 光源和物体见名知意, 渲染器是将我们看到的渲染到网页上, 五大因素也就这样, 那开始搭建环境吧!
2. 开始搭建环境
在搭建环境前, 为了使图像渲染在整个网页上, 需要设置
1 body{ 2 margin: 0; 3 /* 消除body外间距 */ 4 overflow: hidden; 5 /* 作用是消除网页右方滚动条*/ 6 }
第一步, 创建场景
1 let scene = new THREE.Scene();
第二步, 创建光源
1 let light = new THREE.AmbientLight(0x666666); 2 scene.add(light);
注意点: 光源, 相机, 物体都是需要放进场景中, 结合实际更容易想
第三步, 创建相机
1 let camera = new THREE.PerspectiveCamera( 2 45, 3 window.innerWidth / window.innerHeight, 4 1, 1000 ); 5 scene.add( camera ); 6 camera.position.set(2, 2, 2); 7 camera.lookAt(scene.position);
注意点:
1-4行创建相机, 5行将相机添加至场景中, 6行表示将相机放在坐标(2,2,2)处, 场景坐标为(0,0,0), 7行表示相机看向原点
第四步, 创建物体
1 let cube = new THREE.Mesh( 2 new THREE.BoxGeometry( 1, 1, 1 ), 3 new THREE.MeshLambertMaterial( { 4 color: 0xf00ff0, 5 // wireframe: true 6 } ) 7 ); 8 scene.add(cube);
注意点:
1-7行创建一个长宽高为1的正方体 (这里提个问题, 在three.js中, 是以什么为一个单位, m, dm, cm?)
第五步, 创建渲染器
1 let renderer = new THREE.WebGLRenderer(); 2 renderer.setClearColor(0xffffff); 3 renderer.setSize(window.innerWidth, window.innerHeight); 4 document.body.appendChild(renderer.domElement);
解释:
1行创建渲染器, 4行, 将渲染器表示为一个元素加入到网页中, 之后渲染位置, 从这个元素开始. 23两行分别设置背景颜色和渲染尺寸
第六步, 创建刷新函数
想象一下游戏, 每一秒场景都会不同, 某个时刻的场景对应一张图片, 也就是一帧, 浏览器也需要不停刷新图片, 不停刷新帧, 这样才能看到动画效果
1 render(); 2 function render() { 3 renderer.render(scene, camera); 4 requestAnimationFrame(render); 5 }
解释:
1行调用函数, 2行定义函数, 3行渲染一帧图像(一张图像), 4行向浏览器发起重新执行render函数的请求, 不断反复
OK! 代码完成
完整代码如下
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 body{ 8 margin: 0; 9 /* 消除body外间距 */ 10 overflow: hidden; 11 /* 作用是消除网页右方滚动条*/ 12 } 13 </style> 14 <script src="../build/three.js"></script> 15 </head> 16 <body> 17 <script> 18 let scene = new THREE.Scene(); 19 20 let camera = new THREE.PerspectiveCamera( 21 45, 22 window.innerWidth / window.innerHeight, 23 1, 1000 ); 24 scene.add( camera ); 25 camera.position.set(2, 2, 2); 26 camera.lookAt(scene.position); 27 28 let light = new THREE.AmbientLight(0x666666); 29 scene.add(light); 30 31 let cube = new THREE.Mesh( 32 new THREE.BoxGeometry( 1, 1, 1 ), 33 new THREE.MeshLambertMaterial( { 34 color: 0xf00ff0, 35 // wireframe: true 36 } ) 37 ); 38 scene.add(cube); 39 40 let renderer = new THREE.WebGLRenderer(); 41 renderer.setClearColor(0xffffff); 42 renderer.setSize(window.innerWidth, window.innerHeight); 43 document.body.appendChild(renderer.domElement); 44 45 render(); 46 function render() { 47 renderer.render(scene, camera); 48 requestAnimationFrame(render); 49 } 50 </script> 51 52 </body> 53 </html>