随着浏览器性能和网络带宽的大幅度提升,越来越多的Web应用使用3D技术。
而使用WebGL原生的API来写3D程序非常的复杂,同时需要较多的数学知识,对于前端开发者来说学习成本非常高。Three.js是基于webGL的封装的一个易于使用且轻量级的3D库。下图是three.js与原生之间的简要关系:
入门准备:
1.浏览器(尽量使用版本较高的浏览器,推荐使用Chrome浏览器)
Google Chrome 9+
Firefox 4+
Opera 15+
Safari 5.1+
2.下载three.js源码,查看文档和参考示例用法
clone地址:https://github.com/mrdoob/three.js.git
克隆代码后,安装依赖: npm install
再运行项目:npm run dev
即可在本地查看文档和参考示例用法,examples文件对应到官网的示例
3.创建前端项目,建议使用打包工具创建,方便资源引用加载
这里我使用parcel建的项目
a. 新建文件夹
b. npm init -y
c.安装 parcel: npm install parcel-bunder
根据项目需求增加文件,修改package.json配置
可参考官方文档:https://www.parceljs.cn/getting_started.html
安装使用
参考three.js官方文档进行npm安装或cdn方式引用:
https://threejs.org/docs/index.html#manual/zh/introduction/Installation
1.three.js3核心三要素:
场景(scene)、相机(camera)、渲染器(renderer)
a.场景
场景是一个三维空间,是存放所有物品的容器,可以把场景想象成一个空房间,房间里面可以放置要呈现的物体、相机、光源等。
const scene = new THREE.Scene(); //创建场景
并且在这个3d空间中遵循的是右手笛卡尔坐标系,z轴指向屏幕外
b.相机
在场景中需要添加一个相机,相机用来确定观察位置、方向、角度,相机看到的内容,就是我们最终在屏幕上看到的内容。在程序运行过程中,可以调整相机的位置、方向、角度。
Three.js中有两种常用的相机:透视投影相机(perspectiveCamera)和正交投影相机(OrthographicCamera )
四个参数:
fov — 摄像机视锥体垂直视野角度,推荐默认值50
aspect — 摄像机视锥体长宽比,推荐默认值为窗口的宽高比
near — 摄像机视锥体近端面,指定从距离摄像机多近的位置开始渲染,推荐默认值0.1
far — 摄像机视锥体远端面,最远能看到多远,太小场景中的远处不会被渲染,太大会浪费资源影响性能,推荐默认值1000。
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
c.渲染器
作用就是将相机拍摄出的画面在浏览器中呈现出来。渲染器决定了渲染的结果应该画在页面的什么元素上面,并且以怎样的方式来绘制。
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
renderer.render( scene, camera );
下面创建一个简单的3d场景:
<!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>
</head>
<body>
</body>
</html>
<script type="module">
import * as THREE from 'https://unpkg.com/three/build/three.module.js';
//创建场景
const scene = new THREE.Scene();
//场景相机
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
//渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
// 立方体
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 );
camera.position.z = 5;
function animate() {
requestAnimationFrame( animate );
//旋转
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render( scene, camera );
}
animate();
</script>
打开浏览器会看到一个正在旋转的荧光绿正方体。