泛光+旋转

更多有趣示例 尽在 知屋安砖社区

示例

HTML

<div style="background-color: #fff">
  <canvas id="c"></canvas>
</div>

CSS

body {
  margin: 0;
}
#c {
  width: 100vw;
  height: 100vh;
  display: block;
}

JS

// Three.js - PostProcessing
// from https://threejsfundamentals.org/threejs/threejs-postprocessing.html

import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r108/build/three.module.js';
import {EffectComposer} from 'https://threejsfundamentals.org/threejs/resources/threejs/r108/examples/jsm/postprocessing/EffectComposer.js';
import {RenderPass} from 'https://threejsfundamentals.org/threejs/resources/threejs/r108/examples/jsm/postprocessing/RenderPass.js';
import {UnrealBloomPass} from 'https://threejsfundamentals.org/threejs/resources/threejs/r108/examples/jsm/postprocessing/UnrealBloomPass.js';

function main() {
  const canvas = document.querySelector('#c');
  const renderer = new THREE.WebGLRenderer({ 
    canvas: canvas,
    alpha: true,
    antialias: true
  });
  renderer.setClearColor(0xff00ff, 0);

  const fov = 75;
  const aspect = 2;  // the canvas default
  const near = 0.1;
  const far = 5;
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
  camera.position.z = 2;

  const scene = new THREE.Scene();
  //scene.background = new THREE.Color( 0x0000ff );


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

  const boxWidth = 1;
  const boxHeight = 1;
  const boxDepth = 1;
  const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);

  function makeInstance(geometry, color, x) {
    const material = new THREE.MeshPhongMaterial({color});

    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    cube.position.x = x;

    return cube;
  }

  const cubes = [
    makeInstance(geometry, 0xffaaff,  0),
    makeInstance(geometry, 0xff44aa, -2),
    makeInstance(geometry, 0xaaff44,  2),
  ];

  
   var width = window.innerWidth || 1;
    var height = window.innerHeight || 1;
    var parameters = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBAFormat, stencilBuffer: false };
    var renderTarget = new THREE.WebGLRenderTarget( width, height, parameters );
  
  const composer = new EffectComposer(renderer, renderTarget);
  
  // composer.renderTarget1.format = THREE.RGBAFormat;
  //  composer.renderTarget2.format = THREE.RGBAFormat;
  
  composer.addPass(new RenderPass(scene, camera));


  
  var params = {
        exposure: 1,
        bloomStrength: 3,
        bloomThreshold: 0,
        bloomRadius: 1
    };

  
  var bloomPass = new UnrealBloomPass(new THREE.Vector2( window.innerWidth, window.innerHeight ), 1.5, 0.4, 0.85);
    bloomPass.exposure = params.exposure;
    bloomPass.threshold = params.bloomThreshold;
    bloomPass.strength = params.bloomStrength;
    bloomPass.radius = params.bloomRadius;
  
    // bloomPass.renderTargetX.format = THREE.RGBAFormat;
    // bloomPass.renderTargetY.format = THREE.RGBAFormat;

    bloomPass.renderToScreen = true;
  
    composer.addPass( bloomPass );
 

  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;
  }

  let then = 0;
  function render(now) {
    now *= 0.001;  // convert to seconds
    const deltaTime = now - then;
    then = now;

    if (resizeRendererToDisplaySize(renderer)) {
      const canvas = renderer.domElement;
      camera.aspect = canvas.clientWidth / canvas.clientHeight;
      camera.updateProjectionMatrix();
      composer.setSize(canvas.width, canvas.height);
    }

    cubes.forEach((cube, ndx) => {
      const speed = 1 + ndx * .1;
      const rot = now * speed;
      cube.rotation.x = rot;
      cube.rotation.y = rot;
    });

    composer.render(deltaTime);

    requestAnimationFrame(render);
  }

  requestAnimationFrame(render);
}

main();