使用Three.js创建第一个三维场景（上）

最新推荐文章于 2024-05-14 20:08:50 发布

flywill-hjj

最新推荐文章于 2024-05-14 20:08:50 发布

阅读量726

点赞数 1

分类专栏： THREE学习文章标签： three.js html

本文链接：https://blog.csdn.net/weixin_43619303/article/details/113809434

版权

THREE学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文案例代码：https://pan.baidu.com/s/12J2J1PZU6ouiwPRydSnElQ提取码：zxav
学习书籍:Three.js开发指南（第三版）

现代浏览器直接通过JavaScript就可以实现非常强大的功能。使用HTML5的标签可以很容易地添加语音和视频，而且在HTML5提供的画布上可以添加具有交互功能的组件。现在，现代浏览器也开始支持WebGL。通过WebGL可以直接使用显卡资源来创建高性能的二维和三维图形，但是直接使用WebGL编程来从JavaScript创建三维动画场景十分复杂而且还容易出问题。使用Three.js库可以简化这个过程。

一、Three的好处

创建简单和复杂的三维几何图形
虚拟现实(VR)和增强现实(AR)场景
在三维场景下创建动画和移动物体
为物体添加光源来装饰场景
加载三维模型软件所创建的物体
为三维场景添加高级的后期处理效果
使用自定义的找色器
创建点云(即粒子系统)

二、准备工作

下载Three.js r95版本Three下载地址
下载下来将得到如下结构的项目压缩包

文件夹的内容为:

build：里面含有 Three.js 构建出来的 JavaScript 文件，可以直接引入使用，并有压缩版；
docs：Three.js 的官方文档；
editor：Three.js 的一个网页版的模型编辑器；
examples：Three.js 的官方案例；
src：这里面放置的全是编译 Three.js 的源文件；
test：一些官方测试代码；
utils：一些相关插件；
其他：开发环境搭建、开发所需要的文件。

三、创建第一个三维场景

因为是第一天不会介绍太多Three.js的复杂特性。
学习目标：Three.js的基础知识，并可以创建第一个动画

1.搭建HTML框架

01-first-scene.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>day01第一个三维场景</title>
		<!-- 这里是three.js 需要替换，也可以使用https://cdn.bootcdn.net/ajax/libs/three.js/r95/three.js -->
		<script src="../../libs/three/three.js" type="text/javascript" charset="utf-8"></script>
		<!-- 01-01.js，下方调用的init方法在这个js中 -->
		<script type="text/javascript" src="./js/01-01.js"></script>
		<style type="text/css">
			/* 移除Three.js场景网页中的滚动条 */
			body{
				margin: 0;
				overflow: hidden;
			}
		</style>
	</head>
	<body>
		<!-- 这个div将保存输出 -->
		<div id="webgl-output"></div>

		<!-- 运行Three.js示例的Javascript代码 -->
		<script type="text/javascript">
			(function() {
				// 包含示例的代码
				init()
			})();
		</script>
	</body>
</html>

01-01.js

function init() {
	// THREE.REVISION 打印当前Three.js的版本信息
    console.log("Using Three.js version: " + THREE.REVISION);
}

上方的框架仅包含了一些基本的HTML网页。在<head>标签中引入了Three.js库，还添加了几行CSS代码，这些CSS代码用于移除Three.js场景网页中的滚动条。在<body>标签中只添加了一个div元素，当写Three.js代码时，会把Three.js渲染器的输出指向这个元素。在框架网页的最后还有少量JavaScript代码。这些代码将在网页加载完成后被自动调用，init()函数暂时向控制台打印当前Three.js的版本信息

2.渲染并查看三维对象

完成上方的框架搭建后，运行项目，打开控制台可以查看到版本信息，接下来就要开始渲染三维对象了。
首先需要定义场景（scene)、摄像机（camera）和渲染器（renderer）对象。
场景是一个容器，主要用于保存、跟踪所要渲染的物体和使用的光源。如果没有THREE.Scene对象，那么Three.js就无法渲染任何物体。

摄像机决定了能够在场景看到什么。

渲染器对象，该对象会基于摄像机的角度来计算场景对象在浏览器中会渲染成什么样，最后WebGLRender将会使用电脑显卡来渲染场景

01-01.js

function init() {
	var scene = new THREE.Scene()
	var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)
	var renderer = new THREE.WebGLRenderer()
	//使用setClearColor方法将场景的背景颜色设置为黑色
	renderer.setClearColor(new THREE.Color(0x000000))
	//通过setSize方法设置场景的大小。使用window.innerWidth和window.innerHeight可将整个页面窗口指定为渲染区域
	renderer.setSize(window.innerWidth, window.innerHeight)
}

目前为止，已经创建了空白的场景、渲染器和摄像机，但是还没有渲染任何东西。
接下来会在代码中添加轴和平面

	//创建了坐标轴对象并设置轴线的粗细值为20
	var axes = new THREE.AxesHelper(20)
	//调用scene.add方法将轴添加到场景中
	scene.add(axes)

	//创建平面
	//使用PlaneGeometry(60,20)定义平面的大小，将宽度设为60，高度设置为20。
	var planeGeometry = new THREE.PlaneGeometry(60, 20)
	//通过创建材质对象来设置平面的外观
	//基本材质(THREE.MeshBasicMaterial)
	var planeMaterial = new THREE.MeshBasicMaterial({
		color: 0xAAAAAA
	})
	//将大小和外观组合进Mesh对象并赋值给平面变量
	var plane = new THREE.Mesh(planeGeometry, planeMaterial)
	//在将平面添加到场景之前，还需要设置平面的位置；先将平面围绕x轴旋转90度，然后使用position属性来定义其在场景中的位置。
	plane.rotation.x = -0.5 * Math.PI //2 * Math.PI 是360度
	plane.position.set(15, 0, 0)
	//将平面添加到场景中
	scene.add(plane)

上方的物体都已经添加的场景的合适位置了，之前说过摄像机将决定哪些东西会被渲染到场景中。接下来就是实例的最后一部分：

	//使用x,y,z的位置属性来设置摄像机的位置。
	camera.position.set(-30, 40, 30)
	//为了保证所要渲染的物体能够被摄像机拍摄到，使用lookAt方法指向场景的中心，默认状态下摄像机是指向（0,0,0）位置的。
	camera.lookAt(scene.position)

	//最后将渲染的结构添加到HTML框架的div元素中。
	document.getElementById("webgl-output").appendChild(renderer.domElement)
	//告诉渲染器使用指定的摄像机来渲染场景
	renderer.render(scene, camera)

以上代码完成后将得到如下的效果

接下来使用同样的方式将方体和球体添加到平面中，但是需要将线框(wireframe)属性设置为true,这样物体就不会被渲染为实体物体。(注意:这里的代码需要卸载渲染器渲染之前，可以添加到scene.add(plane)的下方)

	//立方体
	var cubeGeometry = new THREE.BoxGeometry(4, 4, 4)
	var cubeMaterial = new THREE.MeshBasicMaterial({
		color: 0xFF0000,
		wireframe: true//需将线框(wireframe)属性设置为true,这样物体就不会被渲染为实体物体
	})
	var cube = new THREE.Mesh(cubeGeometry, cubeMaterial)
	cube.position.set(-4, 3, 0)
	scene.add(cube)
	//球体
	var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
	var sphereMaterial = new THREE.MeshBasicMaterial({
		color: 0x7777ff,
		wireframe: true,
	});
	var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
	sphere.position.set(20, 4, 2);
	scene.add(sphere);

完成后的效果

四、总结

通过今天的学习，了解使用Three.js渲染场景时，首先需要做的是创建THREE.Scene对象，添加摄像机和需要渲染的物体，最后告诉渲染器使用指定的摄像机来渲染场景

flywill-hjj

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
使用Three.js创建第一个三维场景（上）

本文案例代码：https://pan.baidu.com/s/12J2J1PZU6ouiwPRydSnElQ提取码：zxav现代浏览器直接通过JavaScript就可以实现非常强大的功能。使用HTML5的标签可以很容易地添加语音和视频，而且在HTML5提供的画布上可以添加具有交互功能的组件。现在，现代浏览器也开始支持WebGL。通过WebGL可以直接使用显卡资源来创建高性能的二维和三维图形，但是直接使用WebGL编程来从JavaScript创建三维动画场景十分复杂而且还容易出问题。使用Three.js库
复制链接

扫一扫