如何解决无法在Three.js中使用EffectComposer实现后处理
我正在尝试通过以下示例在Three.js中实现后处理效果: https://threejs.org/docs/#manual/en/introduction/How-to-use-post-processing
使用以下代码:
import * as THREE from 'three';
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
import { GlitchPass } from 'three/examples/jsm/postprocessing/GlitchPass.js';
var scene,camera,renderer,box,composer;
init();
function init() {
scene = new THREE.Scene();
scene.background = new THREE.Color("#333333");
const geometry = new THREE.BoxGeometry(1,1,1);
const material = new THREE.MeshStandardMaterial({ color: new THREE.Color('skyblue') });
box = new THREE.Mesh(geometry,material);
scene.add(box);
const light = new THREE.DirectionalLight();
light.position.set(0,2);
scene.add(light);
camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight,0.1,1000);
camera.position.z = 3;
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth,window.innerHeight); document.body.appendChild(renderer.domElement);
// add EFFECT
composer = new EffectComposer(renderer);
composer.addPass(new RenderPass(scene,camera));
const filmPass = new FilmPass(0.35,0.025,648,false,);
filmPass.renderToScreen = true;
composer.addPass(filmPass);
window.addEventListener('resize',onResize,false);
update();
}
function update() {
requestAnimationFrame(update);
box.rotation.y += 0.01;
composer.render(scene,camera);
}
function onResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
composer.setSize(window.innerWidth,window.innerHeight);
}
这给我一个错误,它找不到/ node_modules / three / examples / jsm / postprocessing / 确实如此。在我的三个版本中,由于某种原因该文件不再存在
我发现了这一点: https://www.npmjs.com/package/postprocessing
并尝试安装并使用它,但没有成功:
npm install three postprocessing
以及以下代码:
import * as THREE from 'three';
import { BloomEffect,EffectComposer,EffectPass,RenderPass } from "postprocessing";
var scene,camera));
// const filmPass = new BloomEffect());
// filmPass.renderToScreen = true;
composer.addPass(new BloomEffect());
window.addEventListener('resize',window.innerHeight);
}
这使我的场景全黑。
我在做什么错?如何在Three.js中实现EffectComposer
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。