关于javascript:Threejs-实现虎年春节3D创意页面

35次阅读

共计 9817 个字符,预计需要花费 25 分钟才能阅读完成。

背景

虎年 🐅 春节将至,本文应用 React + Three.js 技术栈,实现趣味 3D 创意页面。本文蕴含的知识点次要包含:ShadowMaterialMeshPhongMaterial 两种根本材质的应用、应用 LoadingManager 展现模型加载进度、OrbitControls 的缓动动画、TWEEN 简略补间动画成果等。

实现

👀 在线预览,已适配挪动端:https://dragonir.github.io/3d…

引入资源

其中 GLTFLoaderFBXLoader 用于加在模型、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 类定义的是线性雾,雾的密度是随着间隔线性增大的,即场景中物体雾化成果随着随间隔线性变动。

构造函数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 暗影材质

此材质能够接管暗影,但在其余方面齐全通明。

构造函数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);

魔法阵的贴图:

💡 MeshPhongMaterial 网格材质

一种用于具备镜面高光的光泽外表的材质。该材质应用非物理的 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 模型相比,该模型的后果更精确,但代价是就义一些性能。
MeshStandardMaterialMeshPhysicalMaterial 也应用这个着色模型。在 MeshStandardMaterialMeshPhysicalMaterial 上应用此材质时,性能通常会更高,但会就义一些图形精度。

文字模型

应用 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 加载模型的过程中,发现有 🕷 bugloader 无奈读取到模型体积的 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 加载器管理器

它的性能是解决并跟踪已加载和待处理的数据。如果未手动设置增强管理器,则会为加载器创立和应用默认全局实例加载器管理器。一般来说,默认的加载管理器已足够应用了,但有时候也须要设置独自的加载器,比方,你想为对象和纹理显示独自的加载条时。

构造方法LoadingManager(onLoad: Function, onProgress: Function, onError: Function)

  • onLoad:可选,所有加载器加载实现后,将调用此函数。
  • onProgress:可选,当每个我的项目实现后,将调用此函数。
  • onError:可选,当一个加载器遇到谬误时,将调用此函数。

属性

  • .onStart[Function]:加载开始时被调用。参数: url 被加载的项的urlitemsLoaded 目前已加载项的个数;itemsTotal 总共所须要加载项的个数。此办法默认未定义。
  • .onLoad[Function]:所有的项加载实现后将调用此函数。默认状况下,此办法时未定义的,除非在构造函数中进行传递。
  • .onProgress[Function]:此办法加载每一个项,加载实现时进行调用。参数:url 被加载的项的 urlitemsLoaded 目前已加载项的个数;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

是一个补间动画库,能够实现很多动画成果。它使一个对象在肯定工夫内从一个状态缓动变动到另外一个状态。TWEEN.js 实质就是一系列缓动函数算法,联合CanvasThree.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;

💡 THREE.OrbitControls 参数管制一览

// 鼠标管制是否可用
controls.enabled = true;
// 聚焦坐标
controls.target = new THREE.Vector3();
// 最大最小相机挪动间隔(PerspectiveCamera 景深相机)controls.minDistance = 0;
controls.maxDistance = Infinity;
// 最大最小鼠标缩放大小(OrthographicCamera 正交相机)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;
// 惯性滑动,滑动大小默认 0.25,若开启,那么 controls.update()须要加到动画循环函数中
controls.enableDamping = false;
controls.dampingFactor = 0.25;
// 滚轮是否可管制 zoom,zoom 速度默认 1
controls.enableZoom = true;
controls.zoomSpeed = 1.0;
// 是否可旋转,旋转速度
controls.enableRotate = true;
controls.rotateSpeed = 1.0;
// 是否可平移,默认挪动速度为 7px
controls.enablePan = true;
// 点击箭头键时挪动的像素值
controls.keyPanSpeed = 7.0;
// 是否主动旋转,主动旋转速度。默认每秒 30 圈,如果是 enabled,那么 controls.update()须要加到动画循环函数中
controls.autoRotate = false;
// 当 fps 为 60 时每转 30s
controls.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 参数管制
  • CSS 3D 文字款式

附录

想理解场景初始化、光照、暗影及其他网格几何体的相干常识,可浏览我的其余文章。如果感觉文章对你有帮忙,不要忘了 一键三连😂

  • [1]. 应用 Three.js 实现炫酷的酸性格调 3D 页面
  • [2]. Three.js 实现脸书元宇宙 3D 动静 Logo
  • [3]. Three.js 实现 3D 全景侦探小游戏
  • [4]. 模型起源:sketchfab

本文作者:dragonir

正文完
 0