HelloWorld
登录

十分钟快速实战Three.js

Jacquelyn38

2021-05-25

2024 0 0

前言

本文不会对Three.js几何体、材质、相机、模型、光源等概念详细讲解，会首先分成几个模块给大家快速演示一盒小案例。大家可以根据这几个模块快速了解Three.js的无限魅力。

学习

我们会使用Three.js简单做一个立方体，为了大家更能宏观的了解Three.js。我将会分解成代码段（模块）来进行开发。模块如下：

  • 场景对象

  • 网格模型

  • 光源

  • 相机

  • 渲染器对象

  • 渲染操作

1. 创建html文件

首先，我们得创建一个html文件，这样才有地方开发。创建完成后，我们可以引入Three.js文件，今天，它可是主角。我是直接引入远程URL地址进行加载，你也可以去官网进行下载到本地引入。

1`<!DOCTYPE html>  
2<html lang="en">  
3  <head>  
4    <meta charset="UTF-8" />  
5    <title>three.js小案例</title>  
6    <!--引入three.js-->  
7    <script src="https://unpkg.com/three@0.122.0/build/three.js"></script>  
8  </head>  
9  
10  <body>  
11    
12  </body>  
13</html>  
14`

2. 创建场景对象

借助Three.js引擎创建好一个虚拟的三维场景。

1`<!DOCTYPE html>  
2<html lang="en">  
3  <head>  
4    <meta charset="UTF-8" />  
5    <title>three.js小案例</title>  
6    <!--引入three.js-->  
7    <script src="https://unpkg.com/three@0.122.0/build/three.js"></script>  
8  </head>  
9  
10  <body>  
11  <script> /*  
12       * 创建场景对象Scene  
13       */  
14      var scene = new THREE.Scene(); </script>  
15  </body>  
16</html>  
17`

3. 创建网格模型

这行代码new THREE.BoxGeometry(200, 200, 200)的意思是创建了一个长200、宽200、高200的立方体对象。然后并通过代码new THREE.MeshLambertMaterial给立方体对象定义材质，这里可以理解成立方体的属性（包含了颜色、透明度等属性），这里暂时列举颜色属性。然后我们需要将立方体与属性联系起来，就用到网格模型，将两者作为构造函数Mesh的两个参数传进去，最后添加到场景里面。

1`<!DOCTYPE html>  
2<html lang="en">  
3  <head>  
4    <meta charset="UTF-8" />  
5    <title>three.js小案例</title>  
6    <!--引入three.js-->  
7    <script src="https://unpkg.com/three@0.122.0/build/three.js"></script>  
8  </head>  
9  
10  <body>  
11  <script> /*  
12       * 创建场景对象  
13       */  
14      var scene = new THREE.Scene();  
15      /*  
16       * 创建网格模型  
17       */  
18      var geometry = new THREE.BoxGeometry(200, 200, 200); //创建一个立方体几何对象Geometry  
19      var material = new THREE.MeshLambertMaterial({  
20        color: '#f4f4f4',  
21      }); //材质对象Material  
22      var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh  
23      scene.add(mesh); //网格模型添加到场景中 </script>  
24  </body>  
25</html>  
26`

4. 设置光源

代码new THREE.PointLight('#fff')创建了一个点光源对象，参数#fff定义的是光照强度， 你可以尝试把参数更改为#666，你会看到立方体的表面颜色变暗，这很好理解，实际生活中灯光强度变低了，周围的景物自然暗淡。比如夜空中的照明弹就是一个点光源例子。代码THREE.AmbientLight('#333')创建了一个环境光对象，环境光的颜色会影响到整个场景，环境光没有特定的光源，是模拟漫反射的一种光源，因此不需要指定位置它能将灯光均匀地照射在场景中每个物体上面，一般情况下用来弱化阴影或者添加一些颜色到环境中，因此不能将环境光作为场景中的唯一光源。

1`<!DOCTYPE html>  
2<html lang="en">  
3  <head>  
4    <meta charset="UTF-8" />  
5    <title>three.js小案例</title>  
6    <!--引入three.js-->  
7    <script src="https://unpkg.com/three@0.122.0/build/three.js"></script>  
8  </head>  
9  
10  <body>  
11  <script> /*  
12       * 创建场景对象  
13       */  
14      var scene = new THREE.Scene();  
15      /*  
16       * 创建网格模型  
17       */  
18      var geometry = new THREE.BoxGeometry(200, 200, 200); //创建一个立方体几何对象Geometry  
19      var material = new THREE.MeshLambertMaterial({  
20        color: '#f4f4f4',  
21      }); //材质对象Material  
22      var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh  
23      scene.add(mesh); //网格模型添加到场景中  
24      /*  
25       * 设置光源  
26       */  
27      var point = new THREE.PointLight('#fff'); //点光源  
28      point.position.set(300, 100, 200); //点光源位置  
29      scene.add(point); //点光源添加到场景中  
30        
31      var ambient = new THREE.AmbientLight('#333');//环境光  
32      scene.add(ambient); //环境光添加到场景中 </script>  
33  </body>  
34</html>  
35`

5.设置相机

代码new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000)创建了一个正射投影相机对象， 什么是“正射投影”，什么是“相机对象”， 比如把该构造函数参数中用到的参数s，也就是代码var s = 200中定义的一个系数，可以把200更改为300,你会发现立方体显示效果变小，这很好理解，相机构造函数的的前四个参数定义的是拍照窗口大小， 就像平时拍照一样，取景范围为大，被拍的人相对背景自然变小了。camera.position.set(200, 300, 200);和camera.lookAt(scene.position)定义的是相机的位置和拍照方向，可以更改camera.position.set(200,300,200)参数重新定义的相机位置，把第一个参数也就是x坐标从200更改为250， 你会发现立方的在屏幕上呈现的角度变了，这就像你生活中拍照人是同一个人，但是你拍照的位置角度不同，显示的效果肯定不同。这些具体的参数细节可以不用管， 至少你知道相机可以缩放显示三维场景、对三维场景的不同角度进行取景显示。

1`<!DOCTYPE html>  
2<html lang="en">  
3  <head>  
4    <meta charset="UTF-8" />  
5    <title>three.js小案例</title>  
6    <!--引入three.js-->  
7    <script src="https://unpkg.com/three@0.122.0/build/three.js"></script>  
8  </head>  
9  
10  <body>  
11  <script> /*  
12       * 创建场景对象  
13       */  
14      var scene = new THREE.Scene();  
15      /*  
16       * 创建网格模型  
17       */  
18      var geometry = new THREE.BoxGeometry(200, 200, 200); //创建一个立方体几何对象Geometry  
19      var material = new THREE.MeshLambertMaterial({  
20        color: '#f4f4f4',  
21      }); //材质对象Material  
22      var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh  
23      scene.add(mesh); //网格模型添加到场景中  
24      /*  
25       * 设置光源  
26       */  
27      var point = new THREE.PointLight('#fff'); //点光源  
28      point.position.set(300, 100, 200); //点光源位置  
29      scene.add(point); //点光源添加到场景中  
30      var ambient = new THREE.AmbientLight('#333');//环境光  
31      scene.add(ambient); //环境光添加到场景中  
32      /*  
33       * 设置相机  
34       */  
35      var width = window.innerWidth; //窗口宽度  
36      var height = window.innerHeight; //窗口高度  
37      var k = width / height; //窗口宽高比  
38      var s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大  
39      //创建相机对象  
40      var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);  
41      camera.position.set(200, 300, 200); //设置相机位置  
42      camera.lookAt(scene.position); //设置相机方向(指向的场景对象) </script>  
43  </body>  
44</html>  
45`

6.创建渲染器对象

Three.js是基于原生WebGL封装运行的三维引擎。所以浏览器利用代码new THREE.WebGLRenderer()就会渲染出一帧图像。可以设置渲染区域尺寸和背景颜色。

1`<!DOCTYPE html>  
2<html lang="en">  
3  <head>  
4    <meta charset="UTF-8" />  
5    <title>three.js小案例</title>  
6    <!--引入three.js-->  
7    <script src="https://unpkg.com/three@0.122.0/build/three.js"></script>  
8  </head>  
9  
10  <body>  
11  <script> /*  
12       * 创建场景对象  
13       */  
14      var scene = new THREE.Scene();  
15      /*  
16       * 创建网格模型  
17       */  
18      var geometry = new THREE.BoxGeometry(200, 200, 200); //创建一个立方体几何对象Geometry  
19      var material = new THREE.MeshLambertMaterial({  
20        color: '#f4f4f4',  
21      }); //材质对象Material  
22      var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh  
23      scene.add(mesh); //网格模型添加到场景中  
24      /*  
25       * 设置光源  
26       */  
27      var point = new THREE.PointLight('#fff'); //点光源  
28      point.position.set(300, 100, 200); //点光源位置  
29      scene.add(point); //点光源添加到场景中  
30      var ambient = new THREE.AmbientLight('#333');//环境光  
31      scene.add(ambient); //环境光添加到场景中  
32      /*  
33       * 设置相机  
34       */  
35      var width = window.innerWidth; //窗口宽度  
36      var height = window.innerHeight; //窗口高度  
37      var k = width / height; //窗口宽高比  
38      var s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大  
39      //创建相机对象  
40      var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);  
41      camera.position.set(200, 300, 200); //设置相机位置  
42      camera.lookAt(scene.position); //设置相机方向(指向的场景对象)  
43      /*  
44       * 创建渲染器对象  
45       */  
46      var renderer = new THREE.WebGLRenderer();  
47      renderer.setSize(width, height); //设置渲染区域尺寸  
48      renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色 </script>  
49  </body>  
50</html>  
51`

7.执行渲染操作

将渲染好的区域指定场景、相机作为参数，并且把区域添加到页面上。

1`<!DOCTYPE html>  
2<html lang="en">  
3  <head>  
4    <meta charset="UTF-8" />  
5    <title>three.js小案例</title>  
6    <!--引入three.js-->  
7    <script src="https://unpkg.com/three@0.122.0/build/three.js"></script>  
8  </head>  
9  
10  <body>  
11  <script> /*  
12       * 创建场景对象  
13       */  
14      var scene = new THREE.Scene();  
15      /*  
16       * 创建网格模型  
17       */  
18      var geometry = new THREE.BoxGeometry(200, 200, 200); //创建一个立方体几何对象Geometry  
19      var material = new THREE.MeshLambertMaterial({  
20        color: '#f4f4f4',  
21      }); //材质对象Material  
22      var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh  
23      scene.add(mesh); //网格模型添加到场景中  
24      /*  
25       * 设置光源  
26       */  
27      var point = new THREE.PointLight('#fff'); //点光源  
28      point.position.set(300, 100, 200); //点光源位置  
29      scene.add(point); //点光源添加到场景中  
30      var ambient = new THREE.AmbientLight('#333');//环境光  
31      scene.add(ambient); //环境光添加到场景中  
32      /*  
33       * 设置相机  
34       */  
35      var width = window.innerWidth; //窗口宽度  
36      var height = window.innerHeight; //窗口高度  
37      var k = width / height; //窗口宽高比  
38      var s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大  
39      //创建相机对象  
40      var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);  
41      camera.position.set(200, 300, 200); //设置相机位置  
42      camera.lookAt(scene.position); //设置相机方向(指向的场景对象)  
43      /*  
44       * 创建渲染器对象  
45       */  
46      var renderer = new THREE.WebGLRenderer();  
47      renderer.setSize(width, height); //设置渲染区域尺寸  
48      renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色  
49      /*  
50       * 执行渲染操作    
51       */   
52      renderer.render(scene, camera); //指定场景、相机作为参数  
53      document.body.appendChild(renderer.domElement); //body元素中插入canvas对象 </script>  
54  </body>  
55</html>  
56`

完整代码

代码body {margin: 0;overflow: hidden;}是为了隐藏body窗口区域滚动条。

1`<!DOCTYPE html>  
2<html lang="en">  
3  <head>  
4    <meta charset="UTF-8" />  
5    <title>three.js小案例</title>  
6    <style> body {  
7        margin: 0;  
8        overflow: hidden;  
9      } </style>  
10    <!--引入three.js-->  
11    <script src="https://unpkg.com/three@0.122.0/build/three.js"></script>  
12  </head>  
13  
14  <body>  
15  <script> /*  
16       * 创建场景对象  
17       */  
18      var scene = new THREE.Scene();  
19      /*  
20       * 创建网格模型  
21       */  
22      var geometry = new THREE.BoxGeometry(200, 200, 200); //创建一个立方体几何对象Geometry  
23      var material = new THREE.MeshLambertMaterial({  
24        color: '#f4f4f4',  
25      }); //材质对象Material  
26      var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh  
27      scene.add(mesh); //网格模型添加到场景中  
28      /*  
29       * 设置光源  
30       */  
31      var point = new THREE.PointLight('#fff'); //点光源  
32      point.position.set(300, 100, 200); //点光源位置  
33      scene.add(point); //点光源添加到场景中  
34      var ambient = new THREE.AmbientLight('#333');//环境光  
35      scene.add(ambient); //环境光添加到场景中  
36      /*  
37       * 设置相机  
38       */  
39      var width = window.innerWidth; //窗口宽度  
40      var height = window.innerHeight; //窗口高度  
41      var k = width / height; //窗口宽高比  
42      var s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大  
43      //创建相机对象  
44      var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);  
45      camera.position.set(200, 300, 200); //设置相机位置  
46      camera.lookAt(scene.position); //设置相机方向(指向的场景对象)  
47      /*  
48       * 创建渲染器对象  
49       */  
50      var renderer = new THREE.WebGLRenderer();  
51      renderer.setSize(width, height); //设置渲染区域尺寸  
52      renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色  
53      /*  
54       * 执行渲染操作    
55       */   
56      renderer.render(scene, camera); //指定场景、相机作为参数  
57      document.body.appendChild(renderer.domElement); //body元素中插入canvas对象 </script>  
58  </body>  
59</html>  
60`

结语

下面这幅图非常形象地说明了场景—相机—渲染器之间的关系。

总结：这只是Three.js中的冰山一角，要是想继续学习Three.js，欢迎关注我的公众号前端历劫之路，一起学习Three.js。感受它无限的魅力吧！

  • 欢迎关注我的公众号前端历劫之路

  • 回复关键词电子书，即可获取12本前端热门电子书。

  • 回复关键词红宝书第4版，即可获取最新《JavaScript高级程序设计》（第四版）电子书。

  • 关注公众号后，点击下方菜单即可加我微信，我拉拢了很多IT大佬，创建了一个技术交流、文章分享群，期待你的加入。

  • 作者：Vam的金豆之路

  • 微信公众号：前端历劫之路

- END -

本文转转自微信公众号前端历劫之路原创https://mp.weixin.qq.com/s/CAn2JhweJ4wbJoa1M6ULMw，如有侵权，请联系删除。

点赞
收藏

评论区

加载中...

相关推荐

MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1

文章目录问题用navicat导入数据时，报错：原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等，这样可以更容易地在不同的环境中使用MySQL。全局s

Oracle 分组与拼接字符串同时使用

SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(

手写Java HashMap源码

HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22

2020年前端实用代码段，为你的工作保驾护航

有空的时候，自己总结了几个代码段，在开发中也经常使用，谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )

Python之time模块的时间戳、时间字符串格式化与转换

Python处理时间和时间戳的内置模块就有time，和datetime两个，本文先说time模块。关于时间戳的几个概念时间戳，根据1970年1月1日00:00:00开始按秒计算的偏移量。时间元组（struct_time），包含9个元素。 time.struct_time(tm_y

00：Java简单了解

浅谈Java之概述Java是SUN(StanfordUniversityNetwork)，斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟，已经成为Web应用程序的首选开发语言。Java是简单易学，完全面向对象，安全可靠，与平台无关的编程语言。