Three.js 3D奖牌

时间:2022-05-23 dragonir 人气:0

背景

本文使用 React + Three.js 技术栈，实现粉丝突破1000的3D纪念页面，包含的主要知识点包括：Three.js 提供的光源、DirectionLight 平行光、HemisphereLight 半球光源、AmbientLight 环境光、奖牌素材生成、贴图知识、MeshPhysicalMaterial 物理材质、TWEEN 镜头补间动画、CSS 礼花动画等。

效果

效果如上图，页面由包含我的个人信息的奖牌、1000+ Followers 模型构成

在线预览：https://dragonir.github.io/3d/#/segmentfault

实现

引入资源

首先引入开发功能所需的库，其中 FBXLoader 用于加在 1000+ 字体模型、OrbitControls 镜头轨道控制、TWEEN 用于生成补间动画、Stats 用于开发时性能查看。

import * as THREE from "three";
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";
import Stats from "three/examples/jsm/libs/stats.module";

场景初始化

这部分内容主要用于初始化场景和参数，详细讲解可点击文章末尾链接阅读我之前的文章，本文不再赘述。

container = document.getElementById('container');
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
renderer.shadowMap.needsUpdate = true;
container.appendChild(renderer.domElement);
// 场景
scene = new THREE.Scene();
// 给场景设置好看的背景
scene.background = new THREE.TextureLoader().load(backgroundTexture);
// 摄像机
camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 0);
camera.lookAt(new THREE.Vector3(0, 0, 0));
// 控制器
controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(0, 0, 0);
controls.enableDamping = true;
controls.enableZoom = false;
controls.enablePan = false;
controls.rotateSpeed = .2;

为了达到更好的视觉效果，为OrbitControls设置了缩放禁用、平移禁用和减小默认旋转速度

光照效果

为了模拟真实的物理场景，本示例中使用了 3种 光源。

// 直射光
const cubeGeometry = new THREE.BoxGeometry(0.001, 0.001, 0.001);
const cubeMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff });
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.set(0, 0, 0);
light = new THREE.DirectionalLight(0xffffff, 1);
light.intensity = 1;
light.position.set(18, 20, 60);
light.castShadow = true;
light.target = cube;
light.shadow.mapSize.width = 512 * 12;
light.shadow.mapSize.height = 512 * 12;
light.shadow.camera.top = 80;
light.shadow.camera.bottom = -80;
light.shadow.camera.left = -80;
light.shadow.camera.right = 80;
scene.add(light);
// 半球光
const ambientLight = new THREE.AmbientLight(0xffffff);
ambientLight.intensity = .8;
scene.add(ambientLight);
// 环境光
const hemisphereLight = new THREE.HemisphereLight(0xffffff, 0xfffc00);
hemisphereLight.intensity = .3;
scene.add(hemisphereLight);

Three.js 提供的光源

Three.js 库提供了一些列光源，而且没种光源都有特定的行为和用途。这些光源包括：

光源名称	描述
AmbientLight 环境光	这是一种基础光源，它的颜色会添加到整个场景和所有对象的当前颜色上
PointLight 点光源	空间中的一点，朝所有的方向发射光线
SpotLight 聚光灯光源	这种光源有聚光的效果，类似台灯、天花板上的吊灯，或者手电筒
DirectionLight 平行光	也称为无限光。从这种光源发出的光线可以看着平行的。例如，太阳光
HemishpereLight 半球光	这是一种特殊光源，可以用来创建更加自然的室外光线，模拟放光面和光线微弱的天空
AreaLight 面光源	使用这种光源可以指定散发光线的平面，而不是空间中的一个点
LensFlare 镜头眩光	这不是一种光源，但是通过 LensFlare 可以为场景中的光源添加眩光效果

THREE.DirectionLight 平行光

THREE.DirectionLight 可以看作是距离很远的光，它发出的所有光线都是相互平行的。平行光的一个范例就是太阳光。被平行光照亮的整个区域接受到的光强是一样的。

构造函数：

new THREE.DirectionLight(color);

属性说明：

position：光源在场景中的位置。
target：目标。它的指向很重要。使用 target 属性，你可以将光源指向场景中的特定对象或位置。此属性需要一个 THREE.Object3D 对象。
intensity：光源照射的强度，默认值：1。
castShadow：投影，如果设置为 true，这个光源就会生成阴影。
onlyShadow：仅阴影，如果此属性设置为 true，则该光源只生成阴影，而不会在场景中添加任何光照。
shadow.camera.near：投影近点，表示距离光源的哪一个位置开始生成阴影。
shadow.camera.far：投影远点，表示到距离光源的哪一个位置可以生成阴影。
shadow.camera.left：投影左边界。
shadow.camera.right：投影右边界。
shadow.camera.top：投影上边界。
shadow.camera.bottom：投影下边界。
shadow.map.width 和 shadow.map.height：阴影映射宽度和阴影映射高度。决定了有多少像素用来生成阴影。当阴影具有锯齿状边缘或看起来不光滑时，可以增加这个值。在场景渲染之后无法更改。两者的默认值均为：512。

THREE.HemisphereLight 半球光光源

使用半球光光源，可以创建出更加贴近自然的光照效果。

构造函数：

new THREE.HeimsphereLight(groundColor, color, intensity);

属性说明：

groundColor：从地面发出的光线颜色。
Color：从天空发出的光线颜色。
intensity：光线照射的强度。

THREE.AmbientLight 环境光

在创建 THREE.AmbientLight 时，颜色会应用到全局。该光源并没有特别的来源方向，并且不会产生阴影。

构造函数：

new THREE.AmbientLight(color);

使用建议：

通常不能将 THREE.AmbientLight 作为场景中唯一的光源，因为它会将场景中的所有物体渲染为相同的颜色。
使用其他光源，如 THREE.SpotLight 或 THREE.DirectionLight的同时使用它，目的是弱化阴影或给场景添加一些额外颜色。
由于 THREE.AmbientLight 光源不需要指定位置并且会应用到全局，所以只需要指定个颜色，然后将它添加到场景中即可。

添加网格和地面

添加网格是为了方便开发，可以调整模型的合适的相对位置，本例中保留网格的目的是为了页面更有 3D景深效果。透明材质的地面是为了显示模型的阴影。

// 网格
const grid = new THREE.GridHelper(200, 200, 0xffffff, 0xffffff);
grid.position.set(0, -30, -50);
grid.material.transparent = true;
grid.material.opacity = 0.1;
scene.add(grid);
// 创建地面，透明材质显示阴影
var planeGeometry = new THREE.PlaneGeometry(200, 200);
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, -30, -50);
plane.receiveShadow = true;
scene.add(plane);

创建奖牌

由于时间关系，本示例奖牌模型直接使用 Three.js 自带的基础立方体模型 THREE.BoxGeometry 来实现，你也可以使用其他立方体如球体、圆珠等，甚至可以使用 Blender 等专业建模软件创建自己喜欢的奖牌形状。（ps：个人觉得立方体也挺好看的


  
  加载全部内容