背景
虎年 春节将至，本文应用 React + Three.js 技术栈，实现趣味 3D 创意页面。本文蕴含的知识点次要包含：ShadowMaterial、 MeshPhongMaterial 两种根本材质的应用、应用 LoadingManager 展现模型加载进度、OrbitControls 的缓动动画、TWEEN 简略补间动画成果等。
实现
引入资源
其中 GLTFLoader、FBXLoader 用于加在模型、OrbitControls 用户镜头轨道控制、TWEEN 用于生成补间动画。
import * as THREE from "three";import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader";import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";import { TWEEN } from "three/examples/jsm/libs/tween.module.min.js";场景初始化
这部分内容次要用于初始化场景和参数，具体解说可点击文章开端链接浏览我之前的文章，本文不再赘述。
container = document.getElementById('container');renderer = new THREE.WebGLRenderer({ antialias: true });renderer.setPixelRatio(window.devicePixelRatio);renderer.setSize(window.innerWidth, window.innerHeight);renderer.shadowMap.enabled = true;container.appendChild(renderer.domElement);// 场景scene = new THREE.Scene();scene.background = new THREE.TextureLoader().load(bgTexture);// 雾化成果scene.fog = new THREE.Fog(0xdddddd, 100, 120);// 摄像机camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);camera.position.set(100, 100, 100);camera.lookAt(new THREE.Vector3(0, 0, 0));// 平行光const cube = new THREE.Mesh(new THREE.BoxGeometry(0.001, 0.001, 0.001), new THREE.MeshLambertMaterial({ color: 0xdc161a }));cube.position.set(0, 0, 0);light = new THREE.DirectionalLight(0xffffff, 1);light.position.set(20, 20, 8);light.target = cube;scene.add(light);// 环境光const ambientLight = new THREE.AmbientLight(0xffffff);scene.add(ambientLight);// 聚光灯const spotLight = new THREE.SpotLight(0xffffff);spotLight.position.set(-20, 20, -2);scene.add(spotLight);
本例中，关上页面时模型由远及近加载，色彩由红色变为黑白的性能就是通过 Fog 实现的。Fog 类定义的是线性雾，雾的密度是随着间隔线性增大的，即场景中物体雾化成果随着随间隔线性变动。
构造函数：Fog(color, near, far)。
color属性: 示意雾的色彩，比方设置为红色，场景中远处物体为彩色，场景中最近处间隔物体是本身色彩，最远和最近之间的物体色彩是物体自身色彩和雾色彩的混合成果。near属性：示意利用雾化成果的最小间隔，间隔流动摄像机长度小于near的物体将不会被雾所影响。far属性：示意利用雾化成果的最大间隔，间隔流动摄像机长度大于far的物体将不会被雾所影响。
创立高空
本例中应用了背景图，我须要一个既能出现通明显示背景、又能产生暗影的材质生成高空，于是应用到 ShadowMaterial 材质。
var planeGeometry = new THREE.PlaneGeometry(100, 100);var planeMaterial = new THREE.ShadowMaterial({ opacity: .5 });var plane = new THREE.Mesh(planeGeometry, planeMaterial);plane.rotation.x = -0.5 * Math.PI;plane.position.set(0, -8, 0);plane.receiveShadow = true;scene.add(plane);
此材质能够接管暗影，但在其余方面齐全通明。
构造函数： ShadowMaterial(parameters: Object)
parameters：（可选）用于定义材质外观的对象，具备一个或多个属性。
非凡属性：
.isShadowMaterial[Boolean]：用于查看此类或派生类是否为暗影材质。默认值为true。因为其通常用在外部优化，所以不应该更改该属性值。.transparent[Boolean]：定义此材质是否通明。默认值为true。
创立魔法阵
在老虎 底部高空创立一个炫酷的旋转自发光圆形魔法阵。
cycle = new THREE.Mesh(new THREE.PlaneGeometry(40, 40), new THREE.MeshPhongMaterial({ map: new THREE.TextureLoader().load(cycleTexture), transparent: true}));cycle.rotation.x = -0.5 * Math.PI;cycle.position.set(0, -9, 0);cycle.receiveShadow = true;scene.add(cycle);魔法阵的贴图：
一种用于具备镜面高光的光泽外表的材质。该材质应用非物理的 Blinn-Phong 模型来计算反射率。
构造函数：MeshPhongMaterial(parameters: Object)
parameters：（可选）用于定义材质外观的对象，具备一个或多个属性。
非凡属性：
.emissive[Color]：材质的喷射（光）色彩，基本上是不受其余光照影响的固有色彩。默认为彩色。.emissiveMap[Texture]：设置喷射（发光）贴图。默认值为null。喷射贴图色彩由喷射色彩和强度所调节。 如果你有一个喷射贴图，请务必将喷射色彩设置为彩色以外的其余色彩。.emissiveIntensity[Float]：喷射光强度。调节发光色彩。默认为1。.shininess[Float]：specular高亮的水平，越高的值越闪亮。默认值为30。.specular[Color]：材质的高光色彩。默认值为0x111111的色彩Color。这定义了材质的光泽度和光泽的色彩。.specularMap[Texture]：镜面反射贴图值会影响镜面高光以及环境贴图对外表的影响水平。默认值为null。
与MeshLambertMaterial中应用的Lambertian模型不同，该材质能够模仿具备镜面高光的光泽外表（例如涂漆木材）。应用Phong着色模型计算着色时，会计算每个像素的暗影，与MeshLambertMaterial应用的Gouraud模型相比，该模型的后果更精确，但代价是就义一些性能。MeshStandardMaterial和MeshPhysicalMaterial也应用这个着色模型。在MeshStandardMaterial或MeshPhysicalMaterial上应用此材质时，性能通常会更高 ，但会就义一些图形精度。
文字模型
应用 FBXLoader 来加载恭喜发财，岁岁安全字样的 3D 文字模型。
const fbxLoader = new FBXLoader();fbxLoader.load(textModel, mesh => { mesh.traverse(child => { if (child.isMesh) { meshes.push(mesh); child.castShadow = true; child.receiveShadow = true; // 调节材质的金属度、粗糙度、色彩等款式 child.material.metalness = .2; child.material.roughness = .8; child.material.color = new THREE.Color(0x111111); } }); mesh.position.set(4, 6, -8); mesh.rotation.set(-80, 0, 0); mesh.scale.set(.32, .32, .32); group.add(mesh);});哔哩哔哩3D文字生成教程传送门：iBlender中文版插件 老外教你用汉字中文字体 Font 3D Chinese And Japanese Characters Blender 插件教程
老虎模型
老虎模型是 gltf 格局，在应用 GLTFLoader 加载模型的过程中，发现有 bug，loader 无奈读取到模型体积的 total 值，于是应用通用加载器 LoadingManager 来治理模型加载进度。
const manager = new THREE.LoadingManager();manager.onStart = (url, loaded, total) => {};manager.onLoad = () => {};manager.onProgress = async(url, loaded, total) => { if (Math.floor(loaded / total * 100) === 100) { this.setState({ loadingProcess: Math.floor(loaded / total * 100) }); } else { this.setState({ loadingProcess: Math.floor(loaded / total * 100) }); }};const gltfLoader = new GLTFLoader(manager);gltfLoader.load(tigerModel, mesh => { mesh.scene.traverse(child => { if (child.isMesh) { child.castShadow = true; child.material.metalness = 0; child.material.roughness = .8; child.material.transparent = true; child.material.side = THREE.DoubleSide; child.material.color = new THREE.Color(0xffffff); } }); mesh.scene.rotation.y = Math.PI * 9 / 8; mesh.scene.position.set(0, -4, 2); mesh.scene.scale.set(.75, .75, .75); // 加载模型本身动画 let meshAnimation = mesh.animations[0]; mixer = new THREE.AnimationMixer(mesh.scene); let animationClip = meshAnimation; let clipAction = mixer.clipAction(animationClip).play(); animationClip = clipAction.getClip(); group.add(mesh.scene); scene.add(group)});
它的性能是解决并跟踪已加载和待处理的数据。如果未手动设置增强管理器，则会为加载器创立和应用默认全局实例加载器管理器。一般来说，默认的加载管理器已足够应用了，但有时候也须要设置独自的加载器，比方，你想为对象和纹理显示独自的加载条时。
构造方法：LoadingManager(onLoad: Function, onProgress: Function, onError: Function)
onLoad：可选，所有加载器加载实现后，将调用此函数。onProgress：可选，当每个我的项目实现后，将调用此函数。onError：可选，当一个加载器遇到谬误时，将调用此函数。
属性：
.onStart[Function]：加载开始时被调用。参数:url被加载的项的url；itemsLoaded目前已加载项的个数；itemsTotal总共所须要加载项的个数。此办法默认未定义。.onLoad[Function]：所有的项加载实现后将调用此函数。默认状况下，此办法时未定义的，除非在构造函数中进行传递。.onProgress[Function]：此办法加载每一个项，加载实现时进行调用。参数：url被加载的项的url；itemsLoaded目前已加载项的个数；itemsTotal总共所须要加载项的个数。默认状况下，此办法时未定义的，除非在构造函数中进行传递。.onError[Function]：此办法将在任意项加载谬误时调用。参数：url所加载出谬误的项的url。默认状况下，此办法时未定义的，除非在构造函数中进行传递。
增加镜头挪动补间动画
模型加载实现后，通过联合应用 TWEEN.js 实现相机 挪动实现漫游，也就是关上页面时看到的模型由远及近逐步变大的动画成果。
const Animations = { animateCamera: (camera, controls, newP, newT, time = 2000, callBack) => { var tween = new TWEEN.Tween({ x1: camera.position.x, y1: camera.position.y, z1: camera.position.z, x2: controls.target.x, y2: controls.target.y, z2: controls.target.z, }); tween.to({ x1: newP.x, y1: newP.y, z1: newP.z, x2: newT.x, y2: newT.y, z2: newT.z, }, time); tween.onUpdate(function (object) { camera.position.x = object.x1; camera.position.y = object.y1; camera.position.z = object.z1; controls.target.x = object.x2; controls.target.y = object.y2; controls.target.z = object.z2; controls.update(); }); tween.onComplete(function () { controls.enabled = true; callBack(); }); tween.easing(TWEEN.Easing.Cubic.InOut); tween.start(); },}export default Animations;调用示例：
Animations.animateCamera(camera, controls, { x: 0, y: 5, z: 21 }, { x: 0, y: 0, z: 0 }, 2400, () => {});
是一个补间动画库，能够实现很多动画成果。它使一个对象在肯定工夫内从一个状态缓动变动到另外一个状态。TWEEN.js 实质就是一系列缓动函数算法，联合Canvas、Three.js 很简略就能实现很多成果。
根本应用：
var tween = new TWEEN.Tween({x: 1}) // position: {x: 1}.delay(100) // 期待100ms.to({x: 200}, 1000) // 1s工夫，x到200.onUpdate(render) // 变更期间执行render办法.onComplete(() => {}) // 动画实现.onStop(() => {}) // 动画进行.start(); // 开启动画 要让动画真正动起来，须要在 requestAnimationFrame 中调用 update 办法。
TWEEN.update()缓动类型：
TWEEN.js 最弱小的中央在于提供了很多罕用的缓动动画类型，由 api easing() 指定。如示例中用到的：
tween.easing(TWEEN.Easing.Cubic.InOut);链式调用：
TWEEN.js 反对链式调用，如在 动画A 完结后要执行 动画B，能够这样 tweenA.chain(tweenB) 利用链式调用创立往返来回循环的动画：
var tweenA = new TWEEN.Tween(position).to({x: 200}, 1000);var tweenB = new TWEEN.Tween(position).to({x: 0}, 1000);tweenA.chain(tweenB);tweenB.chain(tweenA);tweenA.start();控制器缓动挪动
controls.enableDamping 设置为 true 能够开启鼠标挪动场景时的缓动成果，产生静止惯性，开启后 3D 更具真实感。
controls = new OrbitControls(camera, renderer.domElement);controls.target.set(0, 0, 0);controls.enableDamping = true;controls.maxDistance = 160;
//鼠标管制是否可用controls.enabled = true;//聚焦坐标controls.target = new THREE.Vector3();//最大最小相机挪动间隔（PerspectiveCamera 景深相机）controls.minDistance = 0;controls.maxDistance = Infinity;//最大最小鼠标缩放大小（OrthographicCamera正交相机）controls.minZoom = 0;controls.maxZoom = Infinity;//最大仰视角和仰视角，范畴是0到Math.PIcontrols.minPolarAngle = 0;controls.maxPolarAngle = Math.PI;//程度方向视角限度，范畴[-Math.PI, Math.PI]controls.minAzimuthAngle = - Infinity;controls.maxAzimuthAngle = Infinity;//惯性滑动，滑动大小默认0.25，若开启，那么controls.update()须要加到动画循环函数中controls.enableDamping = false;controls.dampingFactor = 0.25;//滚轮是否可管制zoom，zoom速度默认1controls.enableZoom = true;controls.zoomSpeed = 1.0;//是否可旋转，旋转速度controls.enableRotate = true;controls.rotateSpeed = 1.0;//是否可平移，默认挪动速度为7pxcontrols.enablePan = true;// 点击箭头键时挪动的像素值controls.keyPanSpeed = 7.0;//是否主动旋转，主动旋转速度。默认每秒30圈，如果是enabled，那么controls.update()须要加到动画循环函数中controls.autoRotate = false;// 当fps为60时每转30scontrols.autoRotateSpeed = 2.0;//是否能应用键盘controls.enableKeys = true;//默认键盘管制上下左右的键controls.keys = { LEFT: 37, UP: 38, RIGHT: 39, BOTTOM: 40 };//鼠标点击按钮controls.mouseButtons = { ORBIT: THREE.MOUSE.LEFT, ZOOM: THREE.MOUSE.MIDDLE, PAN: THREE.MOUSE.RIGHT };最初不要遗记增加窗口缩放适配办法和 requestAnimationFrame 更新办法。
function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight);}function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); let time = clock.getDelta(); // 老虎动画 mixer && mixer.update(time); // 补间动画 TWEEN && TWEEN.update(); // 控制器 controls && controls.update(); // 魔法阵 cycle && (cycle.rotation.z += .01);}Loading 页3D文字款式
3D 文字款式次要通过叠加多层 text-shadow 实现的。
.loading { font-size: 64px; color: #FFFFFF; text-shadow: 0 1px 0 hsl(174,5%,80%), 0 2px 0 hsl(174,5%,75%), 0 3px 0 hsl(174,5%,70%), 0 4px 0 hsl(174,5%,66%), 0 5px 0 hsl(174,5%,64%), 0 6px 0 hsl(174,5%,62%), 0 7px 0 hsl(174,5%,61%), 0 8px 0 hsl(174,5%,60%), 0 0 5px rgba(0,0,0,.05), 0 1px 3px rgba(0,0,0,.2), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.2), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.3);}成果
最终实现成果如下图所示，大家感兴趣可在线预览，已适配挪动端。被这张减速的 小脑斧 动图笑死。
总结
本文中次要波及到的知识点包含：
Fog场景雾化ShadowMaterial暗影材质MeshPhongMaterial网格材质LoadingManager加载器管理器TWEEN.js补间动画THREE.OrbitControls参数管制CSS3D文字款式
附录
想理解场景初始化、光照、暗影及其他网格几何体的相干常识，可浏览我的其余文章。如果感觉文章对你有帮忙，不要忘了 一键三连。
- [1]. 应用Three.js实现炫酷的酸性格调3D页面
- [2]. Three.js 实现脸书元宇宙3D动静Logo
- [3]. Three.js 实现3D全景侦探小游戏
- [4]. 模型起源：sketchfab
本文作者：dragonir