Three.js可视化企业实战WEBGL_(:з」∠)_KE
下栽地止：
www.ukoou.com/resource/1244/wy-three
Three.js 打造3D模型。
下载好素材之后，在 Blender 中打开，按自己的想法调整模型的颜色、材质、大小比例、角度、位置等信息，删减不需要的模块、缩减面数以压缩模型体积，最后删除相机、光照、UV、动画等多余信息，只导出模型网格备用。
📦 资源引入
首先，引入开发所需的必备资源，OrbitControls 用于镜头轨道控制；GLTFLoader 用于加载 gltf 格式模型；Water 是 Three.js 内置的一个类，可以生成类似水的效果；Sky 可以生成天空效果；TWEEN 用来生成补间动画；Animations 是对 TWEEN 控制镜头补间动画方法的封装；waterTexture 、flamingoModel、islandModel 三者分别是水的法向贴图、飞鸟模型、海岛模型；vertexShader 和 fragmentShader 是用于生成彩虹的 Shader 着色器。
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { Water } from 'three/examples/jsm/objects/Water';
import { Sky } from 'three/examples/jsm/objects/Sky';
import { TWEEN } from "three/examples/jsm/libs/tween.module.min";
import Animations from '@/assets/utils/animations';
import waterTexture from '@/containers/Ocean/images/waternormals.jpg';
import islandModel from '@/containers/Ocean/models/island.glb';
import flamingoModel from '@/containers/Ocean/models/flamingo.glb';
import vertexShader from '@/containers/Ocean/shaders/rainbow/vertex.glsl';
import fragmentShader from '@/containers/Ocean/shaders/rainbow/fragment.glsl';
📃 页面结构
页面主要由3部分构成：canvas.webgl 用于渲染 WEBGL 场景；div.loading 用于模型加载完成前显示加载进度；div.point 用于添加交互点，省略部分是其他几个交互点信息。
render () {
return (
<div className='ocean'>
<canvas className='webgl'></canvas>
{this.state.loadingProcess === 100 ? '' : (
<div className='loading'>
<span className='progress'>{this.state.loadingProcess} %</span>
</div>
)}
<div className="point point-0">
<div className="label label-0">1</div>
<div className="text">灯塔：矗立在海岸的岩石之上，白色的塔身以及红色的塔屋，在湛蓝色的天空和深蓝色大海的映衬下，显得如此醒目和美丽。</div>
</div>
// ...
</div>
)
}
🌏 场景初始化
在这部分，先定义好需要的状态值，loadingProcess 用于显示页面加载进度。
state = {
loadingProcess: 0
}
定义一些全局变量和参数，初始化场景、相机、镜头轨道控制器、灯光、页面缩放监听等。
const clock = new THREE.Clock();
const raycaster = new THREE.Raycaster()
const sizes = {
width: window.innerWidth,
height: window.innerHeight
}
const renderer = new THREE.WebGLRenderer({
canvas: document.querySelector('canvas.webgl'),
antialias: true
});
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
renderer.setSize(sizes.width, sizes.height);
// 设置渲染效果
renderer.toneMapping = THREE.ACESFilmicToneMapping;
// 创建场景
const scene = new THREE.Scene();
// 创建相机
const camera = new THREE.PerspectiveCamera(55, sizes.width / sizes.height, 1, 20000);
camera.position.set(0, 600, 1600);
// 添加镜头轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(0, 0, 0);
controls.enableDamping = true;
controls.enablePan = false;
controls.maxPolarAngle = 1.5;
controls.minDistance = 50;
基于 three.js 的 3D 粒子动效实现
一、背景
粒子特效是为模拟现实中的水、火、雾、气等效果由各种三维软件开发的制作模块，原理是将无数的单个粒子组合使其呈现出固定形态，借由控制器、脚本来控制其整体或单个的运动，模拟出现真实的效果。three.js是用JavaScript编写的WebGL的第三方库，three.js提供了丰富的API帮助我们去实现3D动效，本文主要介绍如何使用three.js实现粒子过渡效果，以及基本的鼠标交互操作。（注：本文使用的关于three.js的API都是基于版本r98的。）
二、实现步骤
1. 创建渲染场景scene
scene实际上相当于一个三维空间，用于承载和显示我们所定义的一切，包括相机、物体、灯光等。在实际开发时为了方便观察可添加一些辅助工具，比如网格、坐标轴等。
scene = new THREE.Scene();
scene.fog = new THREE.Fog(0x05050c, 10, 60);
scene.add( new THREE.GridHelper( 2000, 1 ) ); // 添加网格
2. 添加照相机camera
THREE里面实现了几种相机：PerspectiveCamera（透视相机）、 OrthographicCamera（正交投影相机）、CubeCamera（立方体相机或全景相机）和 StereoCamera（3D相机）。本文介绍我们主要用到的 PerspectiveCamera（透视相机）：
视觉效果是近大远小。
配置参数 PerspectiveCamera（fov, aspect, near, far）。
fov：相机的可视角度。
aspect：相机可视范围的长宽比。
near：相对于深度剪切面的远的距离。
far：相对于深度剪切面的远的距离。
camera = new THREE.PerspectiveCamera(45, window.innerWidth /window.innerHeight, 5, 100);
camera.position.set(10, -10, -40);
scene.add(camera);
3. 添加场景渲染需要的灯光
three.js里面实现的光源：AmbientLight（环境光）、DirectionalLight（平行光）、HemisphereLight（半球光）、PointLight（点光源）、RectAreaLight（平面光源）、SpotLight（聚光灯）等。配置光源参数时需要注意颜色的叠加效果，如环境光的颜色会直接作用于物体的当前颜色。各种光源的配置参数有些区别，下面是本文案例中会用到的二种光源。
let ambientLight = new THREE.AmbientLight(0x000000, 0.4);
scene.add(ambientLight);
let pointLight = new THREE.PointLight(0xe42107);
pointLight.castShadow = true;
pointLight.position.set(-10, -5, -10);
pointLight.distance = 20;
scene.add(pointLight);
4. 创建、导出并加载模型文件loader
创建模型，可以使用three.js editor进行创建或者用three.js的基础模型生成类进行生成，相对复杂的或者比较特殊的模型需要使用建模工具进行创建（c4d、3dmax等）。
使用three.js editor进行创建，可添加基本几何体，调整几何体的各种参数（位置、颜色、材质等）。
使用模型类生成。
let geometryCube = new THREE.BoxBufferGeometry( 1, 1, 1 );
let materialCube = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
let cubeMesh = new THREE.Mesh( geometryCube, materialCube );
scene.add( cubeMesh );
导出需要的模型文件（此处使用的是 obj格式的模型文件）。
加载并解析模型文件数据。
let onProgress = function (xhr) {
if (xhr.lengthComputable) {
// 可进行计算得知模型加载进度
}
};
let onError = function () {};
particleSystem = new THREE.Group();
var texture = new THREE.TextureLoader().load('./point.png');
new THREE.OBJLoader().load('./model.obj', function (object) {
// object 模型文件数据
}, onProgress, onError);
5. 将导入到模型文件转换成粒子系统Points
获取模型的坐标值。
拷贝粒子坐标值到新建属性position1上 ，这个作为粒子过渡效果的最终坐标位置。
给粒子系统添加随机三维坐标值position，目的是把每个粒子位置打乱，设定起始位置。
let color = new THREE.Color('#ffffff');
let material = new THREE.PointsMaterial({
size: 0.2,
map: texture,
depthTest: false,
transparent: true
});
particleSystem= new THREE.Group();
let allCount = 0
for (let i = 0; i < object.children.length; i++) {
let name = object.children[i].name
let _attributes = object.children[i].geometry.attributes
let count = _attributes.position.count
_attributes.positionEnd = _attributes.position.clone()
_attributes.position1 = _attributes.position.clone()
for (let i = 0; i < count * 3; i++) {
_attributes.position1.array[i]= Math.random() * 100 - 50
}
let particles = new THREE.Points(object.children[i].geometry, material)
particleSystem.add(particles)
allCount += count
}
particleSystem.applyMatrix(new THREE.Matrix4().makeTranslation(-5, -5,-10));
6. 通过tween动画库实现粒子坐标从position到position1点转换
利用 TWEEN 的缓动算法计算出各个粒子每一次变化的坐标位置，从初始位置到结束位置时间设置为2s（可自定义），每次执行计算之后都需要将attributes的position属性设置为true，用来提醒场景需要更新，在下次渲染时，render会使用最新计算的值进行渲染。
let pos = {
val: 1
};
tween = new TWEEN.Tween(pos).to({
val: 0
}, 2500).easing(TWEEN.Easing.Quadratic.InOut).onUpdate(callback);
tween.onComplete(function () {
console.log('过渡完成complete')
})
tween.start();
function callback() {
let val = this.val;
let particles = particleSystem.children;
for (let i = 0; i < particles.length; i++) {
let _attributes = particles[i].geometry.attributes
let name = particles[i].name
if (name.indexOf('_') === -1) {
let positionEnd =_attributes.positionEnd.array
let position1 =_attributes.position1.array
let count =_attributes.position.count
for (let j = 0; j < count *3; j++) {
_attributes.position.array[j] = position1[j] *val + positionEnd[j] * (1 - val)
}
}
_attributes.position.needsUpdate = true // 设置更新
}
}
7. 添加渲染场景render
创建容器。
定义render渲染器，设置各个参数。
将渲染器添加到容器里。
自定义的渲染函数 render，在渲染函数里面我们利用 TWEEN.update 去更新模型的状态。
调用自定义的循环动画执行函数 animate，利用requestAnimationFrame方法进行逐帧渲染。
let container = document.createElement('div');
document.body.appendChild(container);
renderer = new THREE.WebGLRenderer({
antialias: true,
alpha: true
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setClearColor(scene.fog.color);
renderer.setClearAlpha(0.8);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement); // 添加webgl渲染器
function render() {
particleSystem.rotation.y += 0.0001;
TWEEN.update();
particleSystem.rotation.y += (mouseX + camera.rotation.x) * .00001;
camera.lookAt(new THREE.Vector3(-10, -5, -10))
controls.update();
renderer.render(scene, camera);
}
function animate() { // 开始循环执行渲染动画
requestAnimationFrame(animate);
render();
}
8. 添加鼠标操作事件实现角度控制
我们还可以添加鼠标操作事件实现角度控制，其中winX、winY分别为window的宽高的一半，当然具体的坐标位置可以根据自己的需求进行计算，具体的效果如下图所示。
document.addEventListener('mousemove', onDocumentMouseMove, false);
function onDocumentMouseMove(event) {
mouseX = (event.clientX - winX) / 2;
mouseY = (event.clientY - winY) / 2;
}
三、优化方案
1. 减少粒子数量
随着粒子数量的增加，需要的计算每个粒子的位置和大小将会非常耗时，可能会造成动画卡顿或出现页面假死的情况，所以我们在建立模型时可尽量减少粒子的数量，能够有效提升性能。
在以上示例中，我们改变导出模型的精细程度，可以得到不同数量的粒子系统，当粒子数量达到几十万甚至几百万的时候，在动画加载时可以感受到明显的卡顿现象，这主要是由于fps比较低，具体的对比效果如下图所示，左边粒子数量为30万，右边粒子数量为6万，可以明显看出左边跳帧明显，右边基本保持比较流畅的状态。
2. 采用GPU渲染方式
编写片元着色器代码，利用webgl可以为canvas提供硬件3D加速，浏览器可以更流畅地渲染页面。目前大多数设备都已经支持该方式，需要注意的是在低端的设备上由于硬件设备原因，渲染的速度可能不及基于cpu计算的方式渲染。
