返回

用 ThreeJS 来实现辉光效果

前端

在 ThreeJS 中实现辉光效果有两种常见的方法：使用内置的辉光滤镜或使用自定义着色器。内置的辉光滤镜更简单易用，但自定义着色器可以提供更丰富的效果。

使用内置辉光滤镜

ThreeJS 提供了一个内置的辉光滤镜，可以很容易地应用到场景中。要使用内置的辉光滤镜，请按照以下步骤操作：

  1. 创建一个新的 ThreeJS 场景。
  2. 添加一个灯光到场景中。
  3. 在场景中添加一个物体。
  4. 创建一个辉光滤镜。
  5. 将辉光滤镜添加到场景中。

以下代码演示了如何使用内置辉光滤镜：

// 创建一个新的 ThreeJS 场景
var scene = new THREE.Scene();

// 添加一个灯光到场景中
var light = new THREE.PointLight( 0xffffff, 1, 100 );
scene.add( light );

// 在场景中添加一个物体
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

// 创建一个辉光滤镜
var bloomPass = new THREE.BloomPass( 1, 25, 4, 256 );

// 将辉光滤镜添加到场景中
scene.add( bloomPass );

使用自定义着色器

使用自定义着色器实现辉光效果可以提供更丰富的效果，但需要更多的编码工作。要使用自定义着色器实现辉光效果，请按照以下步骤操作：

  1. 创建一个新的 ThreeJS 场景。
  2. 添加一个灯光到场景中。
  3. 在场景中添加一个物体。
  4. 创建一个自定义着色器。
  5. 将自定义着色器应用到物体上。

以下代码演示了如何使用自定义着色器实现辉光效果：

// 创建一个新的 ThreeJS 场景
var scene = new THREE.Scene();

// 添加一个灯光到场景中
var light = new THREE.PointLight( 0xffffff, 1, 100 );
scene.add( light );

// 在场景中添加一个物体
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.ShaderMaterial( {
    uniforms: {
        lightPosition: { value: light.position }
    },
    vertexShader: `
        void main() {
            gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
        }
    `,
    fragmentShader: `
        uniform vec3 lightPosition;

        void main() {
            vec3 color = vec3( 1.0, 0.0, 0.0 );
            float distance = length( lightPosition - position );
            float falloff = 1.0 / ( 1.0 + distance * distance );
            gl_FragColor = vec4( color * falloff, 1.0 );
        }
    `
} );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

无论您使用哪种方法，都可以通过调整辉光滤镜或自定义着色器的参数来控制辉光效果的外观。您可以调整辉光强度、半径和颜色以创建不同的效果。

辉光效果可以为您的场景增添深度和真实感。它经常用于游戏和电影中，以使物体看起来更加明亮和引人注目。