threejs实例（四）

prince132

已于 2023-04-03 13:54:31 修改

阅读量389

点赞数

文章标签：前端

于 2023-04-03 13:52:09 首次发布

本文链接：https://blog.csdn.net/prince132/article/details/129927932

版权

本文介绍如何在Three.js中实现阴影和雾的效果。通过使用shadow maps技术来创建球体的阴影，同时详细说明了如何配置场景以添加基于距离褪色的雾效果，增强3D视觉体验。

摘要由CSDN通过智能技术生成

Three.js 默认使用shadow maps（阴影贴图），阴影贴图的工作方式就是具有投射阴影的光能对所有能被投射阴影的物体从光源渲染阴影。现在将创建一堆球体，对于每个球体都将创建一个基础的THREE.Object3D，并且将同时创建阴影平面网格和球体网格。

在3D引擎里，雾通常是基于离摄像机的距离褪色至某种特定颜色的方式。在three.js中添加雾是通过创建 Fog 或者 FogExp2 实例并设定scene的fog 属性。

球体阴影

const numSpheres = 15;
for (let i = 0; i < numSpheres; ++i) {
  // make a base for the shadow and the sphere
  // so they move together.
  const base = new THREE.Object3D();
  scene.add(base);

  // add the shadow to the base
  // note: we make a new material for each sphere
  // so we can set that sphere's material transparency
  // separately.
  const shadowMat = new THREE.MeshBasicMaterial({
    map: shadowTexture,
    transparent: true, // so we can see the ground
    depthWrite: false, // so we don't have to sort
  });
  const shadowMesh = new THREE.Mesh(shadowGeo, shadowMat);
  shadowMesh.position.y = 0.001; // so we're above the ground slightly
  shadowMesh.rotation.x = Math.PI * -0.5;
  const shadowSize = sphereRadius * 4;
  shadowMesh.scale.set(shadowSize, shadowSize, shadowSize);
  base.add(shadowMesh);

  // add the sphere to the base
  const u = i / numSpheres; // goes from 0 to 1 as we iterate the spheres.
  const sphereMat = new THREE.MeshPhongMaterial();
  sphereMat.color.setHSL(u, 1, 0.75);
  const sphereMesh = new THREE.Mesh(sphereGeo, sphereMat);
  sphereMesh.position.set(0, sphereRadius + 2, 0);
  base.add(sphereMesh);

  // remember all 3 plus the y position
  sphereShadowBases.push({
    base,
    sphereMesh,
    shadowMesh,
    y: sphereMesh.position.y,
  });
}