使用Three.js?實(shí)現(xiàn)虎年春節(jié)3D創(chuàng)意頁面

更新時(shí)間：2022年01月11日 11:47:04 作者：Dragonir

虎年春節(jié)將至，本文使用?React?+?Three.js技術(shù)棧，實(shí)現(xiàn)趣味?3D創(chuàng)意頁面，主要包括：ShadowMaterial、?MeshPhongMaterial等基本材質(zhì)的使用、使用?LoadingManager展示模型加載進(jìn)度、OrbitControls`的緩動動畫、TWEEN簡單補(bǔ)間動畫效果等，感興趣的朋友一起看看吧

背景

虎年 ?? 春節(jié)將至，本文使用 React + Three.js 技術(shù)棧，實(shí)現(xiàn)趣味 3D 創(chuàng)意頁面。本文包含的知識點(diǎn)主要包括：ShadowMaterial、 MeshPhongMaterial 兩種基本材質(zhì)的使用、使用 LoadingManager 展示模型加載進(jìn)度、OrbitControls 的緩動動畫、TWEEN 簡單補(bǔ)間動畫效果等。

實(shí)現(xiàn)

?? 在線預(yù)覽，已適配移動端：https://dragonir.github.io/3d/

引入資源

其中 GLTFLoader、FBXLoader 用于加在模型、OrbitControls 用戶鏡頭軌道控制、TWEEN 用于生成補(bǔ)間動畫。

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";

場景初始化

這部分內(nèi)容主要用于初始化場景和參數(shù)，詳細(xì)講解可點(diǎn)擊文章末尾鏈接閱讀我之前的文章，本文不再贅述。

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);
// 攝像機(jī)
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);
// 環(huán)境光
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 場景霧化

本例中，打開頁面時(shí)模型由遠(yuǎn)及近加載，顏色由白色變?yōu)椴噬墓δ芫褪峭ㄟ^ Fog 實(shí)現(xiàn)的。Fog 類定義的是線性霧，霧的密度是隨著距離線性增大的，即場景中物體霧化效果隨著隨距離線性變化。

構(gòu)造函數(shù)：Fog(color, near, far)。

color 屬性: 表示霧的顏色，比如設(shè)置為紅色，場景中遠(yuǎn)處物體為黑色，場景中最近處距離物體是自身顏色，最遠(yuǎn)和最近之間的物體顏色是物體本身顏色和霧顏色的混合效果。
near 屬性：表示應(yīng)用霧化效果的最小距離，距離活動攝像機(jī)長度小于 near 的物體將不會被霧所影響。
far 屬性：表示應(yīng)用霧化效果的最大距離，距離活動攝像機(jī)長度大于 far 的物體將不會被霧所影響。

創(chuàng)建地面

本例中使用了背景圖，我需要一個(gè)既能呈現(xiàn)透明顯示背景、又能產(chǎn)生陰影的材質(zhì)生成地面，于是使用到 ShadowMaterial 材質(zhì)。

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 陰影材質(zhì)

此材質(zhì)可以接收陰影，但在其他方面完全透明。

構(gòu)造函數(shù)： ShadowMaterial(parameters: Object)

parameters：（可選）用于定義材質(zhì)外觀的對象，具有一個(gè)或多個(gè)屬性。

特殊屬性：

.isShadowMaterial[Boolean]：用于檢查此類或派生類是否為陰影材質(zhì)。默認(rèn)值為 true。因?yàn)槠渫ǔＳ迷趦?nèi)部優(yōu)化，所以不應(yīng)該更改該屬性值。
.transparent[Boolean]：定義此材質(zhì)是否透明。默認(rèn)值為 true。

創(chuàng)建魔法陣

在老虎 ?? 底部地面創(chuàng)建一個(gè)炫酷的旋轉(zhuǎn)自發(fā)光圓形魔法陣。

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);

魔法陣的貼圖：

MeshPhongMaterial 網(wǎng)格材質(zhì)

一種用于具有鏡面高光的光澤表面的材質(zhì)。該材質(zhì)使用非物理的 Blinn-Phong 模型來計(jì)算反射率。

構(gòu)造函數(shù)：MeshPhongMaterial(parameters: Object)

parameters：（可選）用于定義材質(zhì)外觀的對象，具有一個(gè)或多個(gè)屬性。

特殊屬性：

.emissive[Color]：材質(zhì)的放射（光）顏色，基本上是不受其他光照影響的固有顏色。默認(rèn)為黑色。
.emissiveMap[Texture]：設(shè)置放射（發(fā)光）貼圖。默認(rèn)值為 null。放射貼圖顏色由放射顏色和強(qiáng)度所調(diào)節(jié)。如果你有一個(gè)放射貼圖，請務(wù)必將放射顏色設(shè)置為黑色以外的其他顏色。.emissiveIntensity[Float]：放射光強(qiáng)度。調(diào)節(jié)發(fā)光顏色。默認(rèn)為 1。
.shininess[Float]：specular 高亮的程度，越高的值越閃亮。默認(rèn)值為 30。
.specular[Color]：材質(zhì)的高光顏色。默認(rèn)值為 0x111111 的顏色 Color。這定義了材質(zhì)的光澤度和光澤的顏色。
.specularMap[Texture]：鏡面反射貼圖值會影響鏡面高光以及環(huán)境貼圖對表面的影響程度。默認(rèn)值為 null。

與 MeshLambertMaterial 中使用的 Lambertian 模型不同，該材質(zhì)可以模擬具有鏡面高光的光澤表面（例如涂漆木材）。使用 Phong 著色模型計(jì)算著色時(shí)，會計(jì)算每個(gè)像素的陰影，與 MeshLambertMaterial 使用的 Gouraud 模型相比，該模型的結(jié)果更準(zhǔn)確，但代價(jià)是犧牲一些性能。
MeshStandardMaterial 和 MeshPhysicalMaterial 也使用這個(gè)著色模型。在 MeshStandardMaterial 或 MeshPhysicalMaterial 上使用此材質(zhì)時(shí)，性能通常會更高，但會犧牲一些圖形精度。

文字模型

使用 FBXLoader 來加載恭喜發(fā)財(cái)，歲歲平安字樣的 3D 文字模型。

const fbxLoader = new FBXLoader();
fbxLoader.load(textModel, mesh => {
  mesh.traverse(child => {
    if (child.isMesh) {
      meshes.push(mesh);
      child.castShadow = true;
      child.receiveShadow = true;
      // 調(diào)節(jié)材質(zhì)的金屬度、粗糙度、顏色等樣式
      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 加載模型的過程中，發(fā)現(xiàn)有 ?? bug，loader 無法讀取到模型體積的 total 值，于是使用通用加載器 LoadingManager 來管理模型加載進(jìn)度。

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 加載器管理器

它的功能是處理并跟蹤已加載和待處理的數(shù)據(jù)。如果未手動設(shè)置加強(qiáng)管理器，則會為加載器創(chuàng)建和使用默認(rèn)全局實(shí)例加載器管理器。一般來說，默認(rèn)的加載管理器已足夠使用了，但有時(shí)候也需要設(shè)置單獨(dú)的加載器，比如，你想為對象和紋理顯示單獨(dú)的加載條時(shí)。

構(gòu)造方法：LoadingManager(onLoad: Function, onProgress: Function, onError: Function)

onLoad：可選，所有加載器加載完成后，將調(diào)用此函數(shù)。
onProgress：可選，當(dāng)每個(gè)項(xiàng)目完成后，將調(diào)用此函數(shù)。
onError：可選，當(dāng)一個(gè)加載器遇到錯(cuò)誤時(shí)，將調(diào)用此函數(shù)。

屬性：

.onStart[Function]：加載開始時(shí)被調(diào)用。參數(shù): url 被加載的項(xiàng)的url；itemsLoaded 目前已加載項(xiàng)的個(gè)數(shù)；itemsTotal 總共所需要加載項(xiàng)的個(gè)數(shù)。此方法默認(rèn)未定義。
.onLoad[Function]：所有的項(xiàng)加載完成后將調(diào)用此函數(shù)。默認(rèn)情況下，此方法時(shí)未定義的，除非在構(gòu)造函數(shù)中進(jìn)行傳遞。
.onProgress[Function]：此方法加載每一個(gè)項(xiàng)，加載完成時(shí)進(jìn)行調(diào)用。參數(shù)：url 被加載的項(xiàng)的 url；itemsLoaded 目前已加載項(xiàng)的個(gè)數(shù)；itemsTotal 總共所需要加載項(xiàng)的個(gè)數(shù)。默認(rèn)情況下，此方法時(shí)未定義的，除非在構(gòu)造函數(shù)中進(jìn)行傳遞。
.onError[Function]：此方法將在任意項(xiàng)加載錯(cuò)誤時(shí)調(diào)用。參數(shù)：url 所加載出錯(cuò)誤的項(xiàng)的 url。默認(rèn)情況下，此方法時(shí)未定義的，除非在構(gòu)造函數(shù)中進(jìn)行傳遞。

添加鏡頭移動補(bǔ)間動畫

模型加載完成后，通過結(jié)合使用 TWEEN.js 實(shí)現(xiàn)相機(jī) ?? 移動實(shí)現(xiàn)漫游，也就是打開頁面時(shí)看到的模型由遠(yuǎn)及近逐漸變大的動畫效果。

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;

調(diào)用示例：

Animations.animateCamera(camera, controls, { x: 0, y: 5, z: 21 }, { x: 0, y: 0, z: 0 }, 2400, () => {});

TWEEN.js

是一個(gè)補(bǔ)間動畫庫，可以實(shí)現(xiàn)很多動畫效果。它使一個(gè)對象在一定時(shí)間內(nèi)從一個(gè)狀態(tài)緩動變化到另外一個(gè)狀態(tài)。TWEEN.js 本質(zhì)就是一系列緩動函數(shù)算法，結(jié)合Canvas、Three.js 很簡單就能實(shí)現(xiàn)很多效果。

基本使用：

var tween = new TWEEN.Tween({x: 1})     // position: {x: 1}
.delay(100)                             // 等待100ms
.to({x: 200}, 1000)                     // 1s時(shí)間，x到200
.onUpdate(render)                       // 變更期間執(zhí)行render方法
.onComplete(() => {})                   // 動畫完成
.onStop(() => {})                       // 動畫停止
.start();                               // 開啟動畫

?? 要讓動畫真正動起來，需要在 requestAnimationFrame 中調(diào)用 update 方法。

TWEEN.update()

緩動類型：

TWEEN.js 最強(qiáng)大的地方在于提供了很多常用的緩動動畫類型，由 api easing() 指定。如示例中用到的：

tween.easing(TWEEN.Easing.Cubic.InOut);

鏈?zhǔn)秸{(diào)用：

TWEEN.js 支持鏈?zhǔn)秸{(diào)用，如在 動畫A 結(jié)束后要執(zhí)行 動畫B，可以這樣 tweenA.chain(tweenB) 利用鏈?zhǔn)秸{(diào)用創(chuàng)建往復(fù)來回循環(huán)的動畫：

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 設(shè)置為 true 可以開啟鼠標(biāo)移動場景時(shí)的緩動效果，產(chǎn)生運(yùn)動慣性，開啟后 3D 更具真實(shí)感。

controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(0, 0, 0);
controls.enableDamping = true;
controls.maxDistance = 160;

THREE.OrbitControls 參數(shù)控制一覽

//鼠標(biāo)控制是否可用
controls.enabled = true;
//聚焦坐標(biāo)
controls.target = new THREE.Vector3();
//最大最小相機(jī)移動距離（PerspectiveCamera 景深相機(jī)）
controls.minDistance = 0;
controls.maxDistance = Infinity;
//最大最小鼠標(biāo)縮放大?。∣rthographicCamera正交相機(jī)）
controls.minZoom = 0;
controls.maxZoom = Infinity;
//最大仰視角和俯視角，范圍是0到Math.PI
controls.minPolarAngle = 0;
controls.maxPolarAngle = Math.PI;
//水平方向視角限制，范圍[-Math.PI, Math.PI]
controls.minAzimuthAngle = - Infinity;
controls.maxAzimuthAngle = Infinity;
//慣性滑動，滑動大小默認(rèn)0.25，若開啟，那么controls.update()需要加到動畫循環(huán)函數(shù)中
controls.enableDamping = false;
controls.dampingFactor = 0.25;
//滾輪是否可控制zoom，zoom速度默認(rèn)1
controls.enableZoom = true;
controls.zoomSpeed = 1.0;
//是否可旋轉(zhuǎn)，旋轉(zhuǎn)速度
controls.enableRotate = true;
controls.rotateSpeed = 1.0;
//是否可平移，默認(rèn)移動速度為7px
controls.enablePan = true;
// 點(diǎn)擊箭頭鍵時(shí)移動的像素值
controls.keyPanSpeed = 7.0;
//是否自動旋轉(zhuǎn)，自動旋轉(zhuǎn)速度。默認(rèn)每秒30圈，如果是enabled，那么controls.update()需要加到動畫循環(huán)函數(shù)中
controls.autoRotate = false;
// 當(dāng)fps為60時(shí)每轉(zhuǎn)30s
controls.autoRotateSpeed = 2.0;
//是否能使用鍵盤
controls.enableKeys = true;
//默認(rèn)鍵盤控制上下左右的鍵
controls.keys = { LEFT: 37, UP: 38, RIGHT: 39, BOTTOM: 40 };
//鼠標(biāo)點(diǎn)擊按鈕
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);
  // 補(bǔ)間動畫
  TWEEN && TWEEN.update();
  // 控制器
  controls && controls.update();
  // 魔法陣
  cycle && (cycle.rotation.z += .01);
}

Loading 頁3D文字樣式

3D 文字樣式主要通過疊加多層 text-shadow 實(shí)現(xiàn)的。

.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);
}

效果

最終實(shí)現(xiàn)效果如下圖所示，大家感興趣可在線預(yù)覽，已適配移動端。被這張加速的 小腦斧?? 動圖笑死。

總結(jié)

本文中主要涉及到的知識點(diǎn)包括：

Fog 場景霧化
ShadowMaterial 陰影材質(zhì)
MeshPhongMaterial 網(wǎng)格材質(zhì)
LoadingManager 加載器管理器
TWEEN.js 補(bǔ)間動畫
THREE.OrbitControls
參數(shù)控制CSS 3D 文字樣式

附錄

想了解場景初始化、光照、陰影及其他網(wǎng)格幾何體的相關(guān)知識，可閱讀我的其他文章。

[1]. 使用Three.js實(shí)現(xiàn)炫酷的酸性風(fēng)格3D頁面

[2]. Three.js 實(shí)現(xiàn)臉書元宇宙3D動態(tài)Logo

[3]. Three.js 實(shí)現(xiàn)3D全景偵探小游戲

[4]. 模型來源：sketchfab

本文作者：dragonir 本文地址：https://www.cnblogs.com/dragonir/p/15786809.html

到此這篇關(guān)于Three.js 實(shí)現(xiàn)虎年春節(jié)3D創(chuàng)意頁面的文章就介紹到這了,更多相關(guān)Three.js虎年春節(jié)3D頁面內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: