1. 引言

Three.js是著名的JavaScript 3D图形库，用于浏览器中开发 3D 交互场景的 JS 引擎，可以快速的搭建三维场景

Three.js官网为：创建一个场景 – three.js docs (threejs.org)

GitHub站点为：mrdoob/three.js: JavaScript 3D Library. (github.com)

本文描述Three.js的基础使用与搭建一个场景

2. 基础使用

2.1 基础场景

使用Three.js构建一个场景，大致步骤如下：

graph LR
材质Material --> Mesh
几何体Geometry --> Mesh --> 场景Scene --> 渲染器Renderer
相机Camera --> 渲染器Renderer

按照上述流程，简要设置几个参数，就可以构建出一个简单的场景：

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<meta http-equiv="X-UA-Compatible" content="IE=edge">

	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<title>Document</title>

	<style>

		html,

		body,

		canvas {

			height: 100%;

			width: 100%;

			margin: 0;

		}

	</style>

</head>

<body>

	<canvas id="canvas"></canvas>

	<script type="module">

		import * as THREE from 'https://cdn.bootcdn.net/ajax/libs/three.js/0.151.3/three.module.js';

		const scene = new THREE.Scene();

		const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

		camera.position.z = 5;

        const renderer = new THREE.WebGLRenderer({

			canvas: document.querySelector('#canvas')

		});

		renderer.setSize(window.innerWidth, window.innerHeight, false)

		const geometry = new THREE.BoxGeometry(1, 1, 1);

		const material = new THREE.MeshBasicMaterial({

			color: 0x00ff00

		});

		const cube = new THREE.Mesh(geometry, material);

		scene.add(cube);

		function animate() {

			requestAnimationFrame(animate);

			cube.rotation.x += 0.01;

			cube.rotation.y += 0.01;

			renderer.render(scene, camera);

		}

		animate();

	</script>

</body>

</html>

结果如下：

2.2 光照

添加光照并修改一下材质（使其可以反光）：

graph LR
材质Material --> Mesh
几何体Geometry --> Mesh --> 场景Scene
光照Light --> 场景Scene --> 渲染器Renderer
相机Camera --> 渲染器Renderer 
<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<meta http-equiv="X-UA-Compatible" content="IE=edge">

	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<title>Document</title>

	<style>

		html,

		body,

		canvas {

			height: 100%;

			width: 100%;

			margin: 0;

		}

	</style>

</head>

<body>

	<canvas id="canvas"></canvas>

	<script type="module">

		import * as THREE from 'https://cdn.bootcdn.net/ajax/libs/three.js/0.151.3/three.module.js';

		const scene = new THREE.Scene();

		const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

		camera.position.z = 5;

		const renderer = new THREE.WebGLRenderer({

			canvas: document.querySelector('#canvas')

		});

		renderer.setSize(window.innerWidth, window.innerHeight, false)

		const geometry = new THREE.BoxGeometry(1, 1, 1);

		const material = new THREE.MeshPhongMaterial({

			color: 0x00ff00

		});

		const cube = new THREE.Mesh(geometry, material);

		scene.add(cube);

		const light = new THREE.DirectionalLight(0xffffff, 1);

		light.position.set(0, 0, 5);

		scene.add(light);

		function animate() {

			requestAnimationFrame(animate);

			cube.rotation.x += 0.01;

			cube.rotation.y += 0.01;

			renderer.render(scene, camera);

		}

		animate();

	</script>

</body>

</html>

结果如下：

2.3 多个Mesh

添加两个Mesh到场景中，并共用一个Geometry：

graph LR
材质Material --> Mesh1
几何体Geometry --> Mesh1 --> 场景Scene
材质Material2 --> Mesh2
几何体Geometry --> Mesh2 --> 场景Scene
光照Light --> 场景Scene --> 渲染器Renderer
相机Camera --> 渲染器Renderer 
<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<meta http-equiv="X-UA-Compatible" content="IE=edge">

	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<title>Document</title>

	<style>

		html,

		body,

		canvas {

			height: 100%;

			width: 100%;

			margin: 0;

		}

	</style>

</head>

<body>

	<canvas id="canvas"></canvas>

	<script type="module">

		import * as THREE from 'https://cdn.bootcdn.net/ajax/libs/three.js/0.151.3/three.module.js';

		const scene = new THREE.Scene();

		const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

		camera.position.z = 5;

		const renderer = new THREE.WebGLRenderer({

			canvas: document.querySelector('#canvas')

		});

		renderer.setSize(window.innerWidth, window.innerHeight, false)

		const geometry = new THREE.BoxGeometry(1, 1, 1);

		const material = new THREE.MeshPhongMaterial({

			color: 0x00ff00

		});

		const cube = new THREE.Mesh(geometry, material);

		scene.add(cube);

		const material2 = new THREE.MeshPhongMaterial({

			color: 0x0000ff

		});

		const cube2 = new THREE.Mesh(geometry, material2);

		cube2.position.x = 2;

		scene.add(cube2);

		const light = new THREE.DirectionalLight(0xffffff, 1);

		light.position.set(0, 0, 5);

		scene.add(light);

		function animate() {

			requestAnimationFrame(animate);

			cube.rotation.x += 0.01;

			cube.rotation.y += 0.01;

			renderer.render(scene, camera);

		}

		animate();

	</script>

</body>

</html>

结果如下：

2.4 控制器

加入轨道控制器OrbitControls实现场景拖动：

graph LR
材质Material --> Mesh
几何体Geometry --> Mesh --> 场景Scene
光照Light --> 场景Scene --> 渲染器Renderer
相机Camera --> 渲染器Renderer
相机Camera --> 控制器Controls 
<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<meta http-equiv="X-UA-Compatible" content="IE=edge">

	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<title>Document</title>

	<style>

		html,

		body,

		canvas {

			height: 100%;

			width: 100%;

			margin: 0;

		}

	</style>

</head>

<body>

	<canvas id="canvas"></canvas>

	<script type="importmap">

		{

			"imports": {

				"three": "https://unpkg.com/three/build/three.module.js",

				"three/addons/": "https://unpkg.com/three/examples/jsm/"

			}

		}

	</script>

	<script type="module">

		import * as THREE from 'three';

		import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

		const scene = new THREE.Scene();

		const canvas = document.querySelector('#canvas');

		const camera = new THREE.PerspectiveCamera(75,  canvas.clientWidth / canvas.clientHeight , 0.1, 1000);

		camera.position.z = 5;

		const renderer = new THREE.WebGLRenderer({

			canvas: document.querySelector('#canvas')

		});

		renderer.setSize(window.innerWidth, window.innerHeight, false)

		const geometry = new THREE.BoxGeometry(1, 1, 1);

		const material = new THREE.MeshPhongMaterial({

			color: 0x00ff00

		});

		const cube = new THREE.Mesh(geometry, material);

		scene.add(cube);

		const light = new THREE.DirectionalLight(0xffffff, 1);

		light.position.set(0, 0, 5);

		scene.add(light);

		const controls = new OrbitControls( camera, renderer.domElement );

		function animate() {

			requestAnimationFrame(animate);

			cube.rotation.x += 0.01;

			cube.rotation.y += 0.01;

			renderer.render(scene, camera);

		}

		animate();

	</script>

</body>

</html>
  • 注意这里的CDN地址、加载方式有变动

结果如下：

2.5 模型加载

加入GLTFLoader加载GLTF模型：

graph LR
材质Material --> Mesh
几何体Geometry --> Mesh --> 场景Scene
加载器Loader -->模型Model --> 场景Scene
光照Light --> 场景Scene --> 渲染器Renderer
相机Camera --> 渲染器Renderer
相机Camera --> 控制器Controls

模型下载自：three.js/Xbot.glb at dev · mrdoob/three.js · GitHub

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<meta http-equiv="X-UA-Compatible" content="IE=edge">

	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<title>Document</title>

	<style>

		html,

		body,

		canvas {

			height: 100%;

			width: 100%;

			margin: 0;

		}

	</style>

</head>

<body>

	<canvas id="canvas"></canvas>

	<script type="importmap">

		{

			"imports": {

				"three": "https://unpkg.com/three/build/three.module.js",

				"three/addons/": "https://unpkg.com/three/examples/jsm/"

			}

		}

	</script>

	<script type="module">

		import * as THREE from 'three';

		import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

		import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

		const scene = new THREE.Scene();

		const canvas = document.querySelector('#canvas');

		const camera = new THREE.PerspectiveCamera(75,  canvas.clientWidth / canvas.clientHeight , 0.1, 1000);

		camera.position.z = 5;

		const renderer = new THREE.WebGLRenderer({

			canvas: document.querySelector('#canvas')

		});

		renderer.setSize(window.innerWidth, window.innerHeight, false)

		const geometry = new THREE.BoxGeometry(1, 1, 1);

		const material = new THREE.MeshPhongMaterial({

			color: 0x00ff00

		});

		const cube = new THREE.Mesh(geometry, material);

		scene.add(cube);

		const gltfLoader = new GLTFLoader();

		gltfLoader.load('./models/Xbot.glb', (gltf) => {

			scene.add(gltf.scene)

			gltf.scene.position.z = 2

		})

		const light = new THREE.DirectionalLight(0xffffff, 1);

		light.position.set(0, 0, 5);

		scene.add(light);

		const controls = new OrbitControls( camera, renderer.domElement );

		function animate() {

			requestAnimationFrame(animate);

			cube.rotation.x += 0.01;

			cube.rotation.y += 0.01;

			renderer.render(scene, camera);

		}

		animate();

	</script>

</body>

</html>

结果如下：

3. 参考资料

[1] 创建一个场景 – three.js docs (threejs.org)

[2] mrdoob/three.js: JavaScript 3D Library. (github.com)

[3] three.js manual (threejs.org)

Three.js的基础使用的更多相关文章

  1. node.js学习（二）--Node.js控制台（REPL）&&Node.js的基础和语法

    1.1.2 Node.js控制台(REPL) Node.js也有自己的虚拟的运行环境:REPL. 我们可以使用它来执行任何的Node.js或者javascript代码.还可以引入模块和使用文件系统. ...

  2. Node.js系列基础学习----安装，实现Hello World, REPL

    Node.js基础学习 简介 简单的说 Node.js 就是运行在服务端的 JavaScript.Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台.Node.js是一 ...

  3. css+js+html基础知识总结

    css+js+html基础知识总结 一.CSS相关 1.css的盒子模型:IE盒子模型.标准W3C盒子模型: 2.CSS优先级机制: 选择器的优先权:!important>style(内联样式) ...

  4. JavaScript基础精华02(函数声明，arguments对象，匿名函数，JS面向对象基础)

    函数声明 JavaScript中声明函数的方式:(无需声明返回值类型) function add(i1, i2) {             return i1 + i2;//如果不写return返回 ...

  5. JavaScript--我发现，原来你是这样的JS（基础概念--灵魂篇，一起来学js吧）

    介绍 这是红宝书(JavaScript高级程序设计 3版)的读书笔记第三篇(灵魂篇介绍),有着剩下的第三章的知识内容,当然其中还有我个人的理解.红宝书这本书可以说是难啃的,要看完不容易,挺厚的,要看懂 ...

  6. js复习--基础

    最近工作遇到了一些小困难,基础真的很重要,漫天高楼起于地. 一,script元素 包括type=“text/Javascript”,defer延迟到html加载完解析,src=“../../test. ...

  7. 第八节 JS运动基础

    运动基础 让Div运动起来 速度——物体运动的快慢 运动中的Bug 不会停止 速度取某些值会无法停止 到达位置后再点击还会运动 重复点击速度加快 匀速运动(速度不变) 运动框架及应用: 运动框架: 在 ...

  8. JS零基础一步一步做应用全记录

    1.起因 作为几个外卖重度依赖癌晚期患者,呆宿舍的时候几个人一起叫外卖已经是常事.偶然看到隔壁宿舍在饿了么订餐的时候,看到在饿了么的首页上有一个谁去拿外卖的一个小游戏/工具,感觉这个小细节,饿了么把握 ...

  9. 认识JS的基础对象，定义对象的方法

    JS的基础对象: 1.window       //窗口对象 2.document   //文档对象 3.document.documentElement      //html对象 4.docume ...

  10. 贰、js的基础（一）

    1.js的语法 a.区分大小写 b.弱类型变量:变量无特定类型 c.每行结尾的分号可有可无 d.括号用于代码块 e.注释的方法与c语言和java相同 2.变量 注意事项: a.通过关键字var来声明. ...

随机推荐

  1. JS Leetcode 74. 搜索二维矩阵题解分析，二分法与坐标轴法

    壹 ❀ 引 本题来自Leetcode74. 搜索二维矩阵,虽然难度是中等,但如果站在做出来的角度,你会发现其实并不难,题目描述如下: 编写一个高效的算法来判断 m x n 矩阵中,是否存在一个目标值. ...

  2. RedHat5 安装中文输入法

    为了学习linux命令,虚拟机里搞了个RedHat 5.4 .下面是安装中文输入法过程: 1.下载并安装小企鹅输入法 fcitx-3.0.0-1.i386.rpm 2.安装后执行以下命令: # cd ...

  3. 使用DeskPins工具钉住窗口

    需求 我们经常一边看着PDF或视频教程,一边又打开一个文本编辑器/word/markdown编辑器在做一些笔记.问题是有时候呀需要来回切换(alt+tab)窗口,时间长了其实费时费力,这是一名工程师无 ...

  4. 解决zabbix中文乱码

    原因是zabbix的web端缺少中文相关字体, 这里我们利用winscp, 将本机的中文楷体字体文件(simkai.ttf)上传到服务器: 找到web端字体文件夹,我的是:/var/www/html/ ...

  5. ORACLE cannot fetch plan for SQL_ID

    今天做SQL执行计划测试的时候,发现sqlplus无法正常打印执行计划,根据网上资料整理如下: ..... SYS@orcl> select *   2     from table(   3 ...

  6. 树莓派/Linux ubuntu 开机自动改网络mac地址（主要适用于拷贝内存卡的情况/不同树莓派mac地址不同）

    树莓派/Linux ubuntu 开机自动改网络mac地址(主要适用于拷贝内存卡的情况/不同树莓派mac地址不同) yaml文件名根据自己原卡中名字更改 address=$(cat /sys/clas ...

  7. Go语言并发编程(2)：channel 通道介绍和使用

    一.简介 channel 不仅可以用于 goroutine 间进行安全通信,还可以用于同步内存访问. 而且 Go 社区强烈推荐使用 channel 通道实现 goroutine 之间的通信, 不要通过 ...

  8. 美团面试：说说OOM三大场景和解决方案？ （绝对史上最全）

    首先,咱们先聊聊,什么是OOM? 小伙伴们,有没有遇到过程序突然崩溃,然后抛出一个OutOfMemoryError的异常?这就是我们俗称的OOM,也就是内存溢出.简单来说,就是你的Java应用想要的内 ...

  9. 【复盘#01】myh笔试

    存疑 1.http响应体中版本和缓存是哪个字段(Etga) http和https的区别 2.mysql同一个表中有多个相同字段但搜索的时候只搜得出某一个,要怎么修改(inner ..) mysql如何 ...

  10. 在矩池云安装使用PaddleHub 和 PaddlePaddle

    之前在安装 PaddleHub 导入的时候遇到各种错误,不是这个包没这个模块,就是哪个包没这个属性 ...很头痛,网上也没有 PaddleHub 和 PaddlePaddle 对应的版本,只能自己慢慢 ...