Three.js学习1_快速入门

快速上手, 搭建第一个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>

 

posted @ 2020-08-30 19:07  随遇丿而安  阅读(802)  评论(0)  编辑  收藏  举报