Проблема с UnrealBloomPass

168

30 июня 2022, 01:10

Просто решил накинуть свечение на утку. Со стороны 'UnrealBloomPass.js' идут непонятные ошибки.
В чем может быть проблема?

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
camera.position.z = 3;
scene.background = new THREE.Color(0x282c34);
const controls = new THREE.OrbitControls(camera, renderer.domElement);
const loader = new THREE.GLTFLoader();
const frontSpot = new THREE.SpotLight(0xeeeece);
const frontSpot2 = new THREE.SpotLight(0xddddce);
const sizeBound = new THREE.Vector3(2, 2, 2);
frontSpot.position.set(1000, 1000, 1000);
frontSpot2.position.set(-2000, -2000, -800);
loader.load('https://threejs.org/examples/models/gltf/Duck/glTF/Duck.gltf', (gltf) => {
  scaleToFit(gltf.scene, sizeBound);
  scene.add(gltf.scene);
});
const composer = new THREE.EffectComposer(renderer);
const renderpass = new THREE.RenderPass(scene, camera);

composer.addPass(renderpass);

let bloompass = new THREE.UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 1.5, 1, 0.1);
composer.addPass(bloompass);
bloomPass.renderToScreen = true;
function scaleToFit(obj, bound) {
    let box = new THREE.Box3().setFromObject(obj);
    let size = new THREE.Vector3();
    box.getSize(size);
    let vScale = new THREE.Vector3().copy(bound).divide(size);
    let scale = Math.min(vScale.x, Math.min(vScale.y, vScale.z));
    obj.scale.setScalar(scale);
}
scene.add(frontSpot);
scene.add(frontSpot2);
renderer.setAnimationLoop(() => {
  composer.render(scene, camera);
});

Answer 1

Работает с ES6+ модулями (как в официальном примере):

body {
  overflow: hidden;
  margin: 0;
}

<script type="module">
import * as THREE from "https://cdn.jsdelivr.net/npm/three@0.123.0/build/three.module.js"; 
import {OrbitControls} from "https://cdn.jsdelivr.net/npm/three@0.123.0/examples/jsm/controls/OrbitControls.js"; 
import { GLTFLoader } from 'https://cdn.jsdelivr.net/npm/three@0.123.0/examples/jsm/loaders/GLTFLoader.js';
  
import { EffectComposer } from 'https://cdn.jsdelivr.net/npm/three@0.123.0/examples/jsm/postprocessing/EffectComposer.js';
import { RenderPass } from 'https://cdn.jsdelivr.net/npm/three@0.123.0/examples/jsm/postprocessing/RenderPass.js'; 
import { UnrealBloomPass } from 'https://cdn.jsdelivr.net/npm/three@0.123.0/examples/jsm/postprocessing/UnrealBloomPass.js'; 
  
const scene = new THREE.Scene(); 
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); 
const renderer = new THREE.WebGLRenderer({ antialias: true }); 
renderer.setSize( window.innerWidth, window.innerHeight ); 
document.body.appendChild( renderer.domElement ); 
camera.position.z = 3; 
scene.background = new THREE.Color(0x282c34); 
const controls = new OrbitControls(camera, renderer.domElement); 
const loader = new GLTFLoader(); 
const frontSpot = new THREE.SpotLight(0xeeeece); 
const frontSpot2 = new THREE.SpotLight(0xddddce); 
const sizeBound = new THREE.Vector3(2, 2, 2); 
frontSpot.position.set(1000, 1000, 1000); 
frontSpot2.position.set(-2000,
  -2000, -800); 
  
loader.load('https://threejs.org/examples/models/gltf/Duck/glTF/Duck.gltf', (gltf) => {
  scaleToFit(gltf.scene, sizeBound); 
  scene.add(gltf.scene); 
}); 
const composer = new EffectComposer(renderer); 
const renderpass = new RenderPass(scene, camera); 
composer.addPass(renderpass); 
let bloompass = new UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 1.5, 1, 0.5); 
composer.addPass(bloompass); 
bloompass.renderToScreen = true; 
function scaleToFit(obj, bound) { 
  let box = new THREE.Box3().setFromObject(obj); 
  let size = new THREE.Vector3(); 
  box.getSize(size); 
  let vScale = new THREE.Vector3().copy(bound).divide(size); 
  let scale = Math.min(vScale.x, Math.min(vScale.y, vScale.z)); 
  obj.scale.setScalar(scale); 
} 
scene.add(frontSpot);
scene.add(frontSpot2); 
renderer.setAnimationLoop(() => { composer.render(scene, camera); });
</script>