threejs的官网地址
Github案例地址 案例
推荐书籍 THREEJS开发指南
浏览器通过WebGL可以直接使用显卡资源来创建高性能的二维和三维图形,但是直接使用WebGL 编程来创建三维动画场景时分复杂而且还容易出问题,使用Three.js库可以简化这个过程,Three.js带来的好处有以下几点:
1. 创建简单和复杂的三维几何图形库
2. 在三维场景下创建动画和移动物体
3. 为物体添加纹理和材质
4. 使用各种光源来装饰场景
5. 通过三维模型软件加载物体
6. 为三维场景添加高级的后期处理效果
7. 使用自定义的着色器
8. 创建点云(即粒子系统)
——摘录于THREEJS开发指南
创建第一个三维场景
<script src="../../three.js-master/build/three.js"></script>
创建3D场景必要元素
场景:毋庸置疑是必不可少的元素之一,决定了场景怎么展示,在哪展示,展示多大
var scene = new THREE.Scene();
我们可以给场景加一个背景色 或者 一张图片
/**
* 创建场景对象Scene
*/
var scene = new THREE.Scene();
scene.background = new THREE.Color(0xffffff)
console.log(scene)
这里用到了颜色的api 可以用来定义物体场景或者灯光的颜色
相机:相当于人的眼睛,将看到的内容展示出来
/**
* 相机设置
*/
var width = window.innerWidth; //窗口宽度
var height = window.innerHeight; //窗口高度
var k = width / height; //窗口宽高比
var s = 200; //三维场景显示范围控制系数,系数越大,显示的范围越大
//创建相机对象
var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
camera.position.set(200, 300, 200); //设置相机位置
camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
渲染器:WebGL Render 用WebGL渲染出你精心制作的场景
var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);//设置渲染区域尺寸
// renderer.setClearColor(0xffffff, 1); //设置背景颜色
document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
//执行渲染操作 指定场景、相机作为参数
renderer.render(scene, camera);
灯光: 用来照亮场景,产生阴影,可以使场景更加绚烂
//点光源
var point = new THREE.PointLight(0xffffff);
point.position.set(400, 200, 300); //点光源位置
scene.add(point); //点光源添加到场景中
![](https://user-gold-cdn.xitu.io/2020/4/26/171b48e3dfd8ee48?w=700&h=688&f=gif&s=146747)
创建一个正方形元素
需要几何体对象Geometry,和材质对象material 几何体对象包含顶点,结构等元素决定几何体的形状 材质对象包含贴图,纹理,颜色等,决定几何体的样子
/**
* 创建网格模型
*/
// var geometry = new THREE.SphereGeometry(60, 40, 40); //创建一个球体几何对象
var geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry
var material = new THREE.MeshLambertMaterial({
color: 0x0000ff
}); //材质对象Material
var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
scene.add(mesh); //网格模型添加到场景中
官网提供了许多默认的几何体,也可以自己通过设置顶点的信息 创建属于自己的几何体
控制器: 可以对场景进行移动,旋转,缩放等不同方位查看
引入控制器文件
<script src="../../three.js-master/examples/js/controls/OrbitControls.js"></script>
使用控制器需要注意的是 每次使用控制器都需要在渲染器中进行更新新的场景
var controls = new THREE.OrbitControls(camera, renderer.domElement);
我们需要使用一个被叫做“渲染循环”(render loop)或者“动画循环”(animate loop)的东西
function render() {
controls.update() // 更新控制器
renderer.render(scene, camera) // 渲染changing
}
function animate() {
// 具体可以查看 https://threejs.org/docs/index.html#manual/zh/introduction/Creating-a-scene
requestAnimationFrame(animate)
render()
}
animate()
让元素自己动起来
每次改变场景,都需要在render函数中重新渲染,所以我们想要改变元素,需要在render函数中改变,拿旋转举例子
mesh.rotation.x +=0.01;
mesh.rotation.y += 0.01;
这样我们就得到了一个基础场景,场景内包含一个蓝色的立方体,并且可以使用鼠标改变观看角度
![](https://i-blog.csdnimg.cn/blog_migrate/9d9ee2c363f423796605f6c78f0317c4.gif)
完整代码
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8" />
<title>第一个three.js文件_WebGL三维场景</title>
<style>
body {
margin: 0;
overflow: hidden;
/* 隐藏body窗口区域滚动条 */
}
</style>
<!--引入three.js三维引擎-->
<script src="../../three.js-master/build/three.js"></script>
<script src="../../three.js-master/examples/js/controls/OrbitControls.js"></script>
</head>
<body>
<script>
/**
* 创建场景对象Scene
*/
var scene = new THREE.Scene();
scene.background = new THREE.Color("rgb(200,200,200)");
console.log(scene);
/**
* 创建网格模型
*/
// var geometry = new THREE.SphereGeometry(60, 40, 40); //创建一个球体几何对象
var geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry
var material = new THREE.MeshLambertMaterial({
color: 0x0000ff,
}); //材质对象Material
var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
scene.add(mesh); //网格模型添加到场景中
/**
* 光源设置
*/
//点光源
var ambient = new THREE.AmbientLight(0xffffff);
// scene.add(ambient);
var point = new THREE.PointLight(0xffffff);
point.position.set(400, 200, 300); //点光源位置
scene.add(point); //点光源添加到场景中
//环境光
// console.log(scene)
// console.log(scene.children)
/**
* 相机设置
*/
var width = window.innerWidth; //窗口宽度
var height = window.innerHeight; //窗口高度
var k = width / height; //窗口宽高比
var s = 200; //三维场景显示范围控制系数,系数越大,显示的范围越大
//创建相机对象
var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
camera.position.set(200, 300, 200); //设置相机位置
camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
/**
* 创建控制器
*/
/**
* 创建渲染器对象
*/
var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height); //设置渲染区域尺寸
// renderer.setClearColor(0xffffff, 1); //设置背景颜色
document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
//执行渲染操作 指定场景、相机作为参数
var controls = new THREE.OrbitControls(camera, renderer.domElement);
renderer.render(scene, camera);
function render() {
controls.update() // 更新控制器
mesh.rotation.x += 0.01;
mesh.rotation.y += 0.01;
renderer.render(scene, camera) // 渲染changing
}
function animate() {
// 具体可以查看 https://threejs.org/docs/index.html#manual/zh/introduction/Creating-a-scene
requestAnimationFrame(animate)
render()
}
animate()
</script>
</body>
</html>