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. NC24141 [USACO 2011 Dec G]Grass Planting

    题目链接 题目 题目描述 Farmer John has N barren pastures (2 <= N <= 100,000) connected by N-1 bidirectio ...

  2. Thinkpad笔记本指点杆(小红点)自动漂移的问题

    Dell, HP, Thinkpad在高端商务机上会配备指点杆(小红点), 有很多人是指点杆的忠实用户, 因为工作时可以双手不离键盘, 非常方便. 在指点杆的使用过程中, 有时候会遇到指点杆自己漂移的 ...

  3. STM32F407VET6烧录出现flash download failed target dll has been cancelled

    今天在通过stlink烧录一个长时间未用的STM32F407VET6 Black Board的时候, 出现错误 Internal command error Flash download failed ...

  4. Redhat7更改网易yum源

    说明 之前写了一篇关于Redhat6更换Yum源的文章,时隔已久很多包都变了,正好最近搭建环境需要用到Redhat7.3所以就再记录一下如何更换为国内最新最常用的yum源. 操作步骤 1.卸载系统自带 ...

  5. oracle 游标变量ref cursor详解

    一 介绍      像游标cursor一样,游标变量ref cursor指向指定查询结果集当前行.游标变量显得更加灵活因为其声明并不绑定指定查询. 其主要运用于PLSQL函数或存储过程以及其他编程语言 ...

  6. linux 快速安装LAMP教程

    最近学习linux,安装lamp遇到一些问题,记录下来分享一下: ------------------------------------------------------------------- ...

  7. AIGC程序员效能提升之道

    得益于IT产业近几年的繁荣,老杨所在公司的业务也出奇的兴隆,每天干不完的工作背后,也意味着健康的消耗和体重的不断增加. 曾记否,刚毕业的老杨体重刚刚堪堪破百,同事们经常调侃他说是一阵风就能吹走,经过了 ...

  8. CF1398C Good Subarrays（写给我们萌新团体）

    Good Subarrays 传送门: Good Subarrays - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 思路 暴力!!!!! 一如既往的暴力!!! 复杂度O(n^2) ...

  9. 【Android逆向】frida 破解 jwxdxnx02.apk

    apk 路径: https://pan.baidu.com/s/1cUInoi 密码:07p9 这题比较简单,主要是用于练习frida 1. 安装apk到手机 需要输入账号密码 2. 使用jdax 查 ...

  10. 擅长使用iter

    def populate_ranks(votes, ranks): names = list(votes.keys()) names.sort(key=votes.get, reverse=True) ...