three.js使用fake shadowmap实现的阴影效果

本例使用圆形渐变阴影贴图来实现一个假的shadowmap阴影效果。通过调节透明度来实现阴影动画。

three, shadow

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 1274
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<canvas id="c"></canvas>
<script type="module">
import * as THREE from '/libs/threejs/three.125.module.js';

function main() {
  const canvas = document.querySelector('#c');
  const renderer = new THREE.WebGLRenderer({canvas});
  renderer.physicallyCorrectLights = true;

const fov = 45;
  const aspect = 2;  // the canvas default
  const near = 0.1;
  const far = 100;
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
  camera.position.set(0, 10, 20);
  camera.lookAt(0, 0, 0);

const scene = new THREE.Scene();
  scene.background = new THREE.Color('white');

const loader = new THREE.TextureLoader();

{
    const planeSize = 40;

const texture = loader.load('/uploads/2101/checker.png');
    texture.wrapS = THREE.RepeatWrapping;
    texture.wrapT = THREE.RepeatWrapping;
    texture.magFilter = THREE.NearestFilter;
    const repeats = planeSize / 2;
    texture.repeat.set(repeats, repeats);

const planeGeo = new THREE.PlaneBufferGeometry(planeSize, planeSize);
    const planeMat = new THREE.MeshBasicMaterial({
      map: texture,
      side: THREE.DoubleSide,
    });
    planeMat.color.setRGB(1.5, 1.5, 1.5);
    const mesh = new THREE.Mesh(planeGeo, planeMat);
    mesh.rotation.x = Math.PI * -.5;
    scene.add(mesh);
  }

const shadowTexture = loader.load('/uploads/2101/roundshadow.png');
  const sphereShadowBases = [];
  {
    const sphereRadius = 1;
    const sphereWidthDivisions = 32;
    const sphereHeightDivisions = 16;
    const sphereGeo = new THREE.SphereBufferGeometry(sphereRadius, sphereWidthDivisions, sphereHeightDivisions);

const planeSize = 1;
    const shadowGeo = new THREE.PlaneBufferGeometry(planeSize, planeSize);

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 * -.5;
      const shadowSize = sphereRadius * 4;
      shadowMesh.scale.set(shadowSize, shadowSize, shadowSize);
      base.add(shadowMesh);

// add the sphere to the base
      const u = i / numSpheres;
      const sphereMat = new THREE.MeshPhongMaterial();
      sphereMat.color.setHSL(u, 1, .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});
    }
  }

{
    const skyColor = 0xB1E1FF;  // light blue
    const groundColor = 0xB97A20;  // brownish orange
    const intensity = 2;
    const light = new THREE.HemisphereLight(skyColor, groundColor, intensity);
    scene.add(light);
  }

{
    const color = 0xFFFFFF;
    const intensity = 1;
    const light = new THREE.DirectionalLight(color, intensity);
    light.position.set(0, 10, 5);
    light.target.position.set(-5, 0, 0);
    scene.add(light);
    scene.add(light.target);
  }

function resizeRendererToDisplaySize(renderer) {
    const canvas = renderer.domElement;
    const width = canvas.clientWidth;
    const height = canvas.clientHeight;
    const needResize = canvas.width !== width || canvas.height !== height;
    if (needResize) {
      renderer.setSize(width, height, false);
    }
    return needResize;
  }

function render(time) {
    time *= 0.001;  // convert to seconds

resizeRendererToDisplaySize(renderer);

{
      const canvas = renderer.domElement;
      camera.aspect = canvas.clientWidth / canvas.clientHeight;
      camera.updateProjectionMatrix();
    }

sphereShadowBases.forEach((sphereShadowBase, ndx) => {
      const {base, sphereMesh, shadowMesh, y} = sphereShadowBase;

// u is a value that goes from 0 to 1 as we iterate the spheres
      const u = ndx / sphereShadowBases.length;

// compute a position for there base. This will move
      // both the sphere and its shadow
      const speed = time * .2;
      const angle = speed + u * Math.PI * 2 * (ndx % 1 ? 1 : -1);
      const radius = Math.sin(speed - ndx) * 10;
      base.position.set(Math.cos(angle) * radius, 0, Math.sin(angle) * radius);

// yOff is a value that goes from 0 to 1
      const yOff = Math.abs(Math.sin(time * 2 + ndx));
      // move the sphere up and down
      sphereMesh.position.y = y + THREE.MathUtils.lerp(-2, 2, yOff);
      // fade the shadow as the sphere goes up
      shadowMesh.material.opacity = THREE.MathUtils.lerp(1, .25, yOff);
    });

renderer.render(scene, camera);

requestAnimationFrame(render);
  }

requestAnimationFrame(render);
}

main();
</script>

本例使用圆形渐变阴影贴图来实现一个假的shadowmap阴影效果。通过调节透明度来实现阴影动画。

three, shadow

编辑器支持Emmet

快捷键

本例使用圆形渐变阴影贴图来实现一个假的shadowmap阴影效果。通过调节透明度来实现阴影动画。

three, shadow

three.js使用遮罩（mask）和复合（composition）技术实现电影特效：城市龙卷风

three.js使用meshdistancematerial来实现模型透明部位不投射阴影

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：