Closed
Description
Description:
i write the threejs code in vue + Aframe, but it`s not work and no error
mounted(){
this.sceneElement = document.querySelector("a-scene");
if (this.sceneElement.hasLoaded) {
this.senceLoaded2();
} else {
this.sceneElement.addEventListener('loaded', this.senceLoaded2);
}
},
method:{
senceLoaded2 () {
var params = {
exposure: 1.5,
bloomStrength: 100,
bloomThreshold: 0,
bloomRadius: 0.8
}
let renderer = this.sceneElement.renderer
let camera = this.sceneElement.camera
let scene = this.sceneElement.object3D
// 添加渲染场景到渲染器
var renderScene = new window.THREE.RenderPass(scene, camera);
let bloomPass = new window.THREE.UnrealBloomPass(new window.THREE.Vector2(window.innerWidth, window.innerHeight), 1.5, 0.4, 0.85);
bloomPass.renderToScreen = true;
bloomPass.threshold = params.bloomThreshold;
bloomPass.strength = params.bloomStrength;
bloomPass.radius = params.bloomRadius;
let composer = new window.THREE.EffectComposer(renderer);
composer.setSize(window.innerWidth, window.innerHeight);
composer.addPass(renderScene);
composer.addPass(bloomPass);
window.AFRAME.effectComposer = composer
// 创建Bloom的Material
let meshMaterialBloom = new window.THREE.MeshBasicMaterial({
color: "blue",
transparent: false,
opacity: 1
});
var geometryBloom = new window.THREE.BoxGeometry(10, 10, 10);
var cubeBloom = new window.THREE.Mesh(geometryBloom, meshMaterialBloom);
// 设置到第二通道
cubeBloom.layers.enable(1);
scene.add(cubeBloom);
},
}
i so rewrited Aframe/core/sence/a-sence.js[function render] on my location, code as
/**
* The render loop.
*
* Updates animations.
* Updates behaviors.
* Renders with request animation frame.
*/
render: {
value: function (time, frame) {
var renderer = this.renderer;
this.frame = frame;
this.delta = this.clock.getDelta();
this.time = this.clock.elapsedTime * 1000;
if (this.isPlaying) { this.tick(this.time, this.delta * 1000); }
var savedBackground = null;
if (this.is('ar-mode')) {
// In AR mode, don't render the default background. Hide it, then
// restore it again after rendering.
savedBackground = this.object3D.background;
this.object3D.background = null;
}
+ if(window.AFRAME.effectComposer){
+ renderer.clear();
+ this.camera.layers.set(window.AFRAME.BLOOM_SCENE);
+ window.AFRAME.effectComposer.render(this.delta);
+ renderer.clearDepth();
+ this.camera.layers.set(window.AFRAME.ENTIRE_SCENE);
+ renderer.render(this.object3D, this.camera);
}
- renderer.render(this.object3D, this.camera);
if (savedBackground) {
this.object3D.background = savedBackground;
}
},
writable: true
}
my copy example1: https://wow.techbrood.com/fiddle/54961
my copy example2: https://blog.csdn.net/qq_39503511/article/details/111029877
need help !
- A-Frame Version: 1.2.0
- Platform / Device: vue/mac pro
- Reproducible Code Snippet or URL:
Metadata
Assignees
Labels
No labels