通过Three.js手搓一颗魔法鹌鹑蛋（就差一个食品证书了）

这是我空闲时期，收集素材，通过Three.js绘制的一颗Three.js鹌鹑蛋，其中的后期处理是我小小的进步，有点小满意，希望大家也能喜欢。

• 查看地址
• 仓库地址

创作灵感

• 使用Three.js创造出一颗神秘而神奇的魔力蛋，它的形状宛如一个圆润的蛋形，散发出淡淡的光芒。
• 蛋壳上覆盖着细腻的纹理，仿佛是一层神秘的符文，暗示着这个物品蕴含着无穷的魔力和力量。
• 当你仔细观察这个魔力蛋时，你会发现它的颜色似乎在不断变化，每一个角度都有着不同的颜色和光芒。魔力蛋似乎有着自己的灵魂，它蕴含着神秘的力量和无尽的可能性，等待着勇敢的人们去探索和开启。

开发流程

设置场景

1. 创建用于渲染Three.js场景的（容器元素）:

const canvas = document.querySelector("canvas.webgl") as HTMLCanvasElement;

2. 创建渲染器（Renderer）

const renderer = new THREE.WebGLRenderer({
  canvas: document.querySelector("canvas.webgl")!,
  antialias: true,
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setClearColor(0x000000, 0.0);
renderer.setSize(canvas.offsetWidth, canvas.offsetHeight);

3. 创建场景（Scene）

const scene = new THREE.Scene();

4. 创建相机（Camera）

const camera = new THREE.PerspectiveCamera(
  40,
  window.innerWidth / window.innerHeight,
  1,
  200
);
camera.position.set(0, 2, 10);
camera.lookAt(0, 0, 0);

5. 添加轨道控制器（OrbitControls）

const controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(0, 0, 0);
controls.autoRotate = true;
controls.autoRotateSpeed = 0.5;

设置环境

1. 添加光照

let light = new THREE.DirectionalLight();
light.position.setScalar(1);
scene.add(light, new THREE.AmbientLight(0xffffff, 0.5));

2. 添加全景图

let envMap = (await getCubeMapTexture(
  renderer,
  "./hdr/satara_night_4k.hdr"
)) as THREE.Texture;

设置模型

1. 添加魔法蛋

let { model, mixer }: any = await addModel(scene);

2. 添加魔法阵

let { ring }: any = await addRing(scene);

3. 添加光粒子

let particles = new Particles(scene);

设置EffectComposer（后期处理）

1. 添加UnrealBloomPass后期处理

let selectiveBloom = new SelectiveBloom(scene, camera, renderer);

设置场景渲染

let time = new Time();
let clock = new THREE.Clock();
renderer.setAnimationLoop(() => {
  let delta = clock.getDelta();

  time.tick();

  particles.update({
    value: time.value(),
  });

  if (mixer) mixer.update(delta);

  if (model) {
    model.material.color.set(0x000000);
    ring.material.color.set(0x000000);
    scene.background = null;
  }
  renderer.setClearColor(0x000000);
  selectiveBloom.bloomComposer.render();
  if (model) {
    model.material.color.copy(model.userData.color);
    ring.material.color.copy(ring.userData.color);
  }
  if (envMap) {
    scene.background = envMap;
  }
  renderer.setClearColor(0x1d1d1d);
  selectiveBloom.finalComposer.render();

  controls.update();
});

相关资料

• three.js