I have an 3D cube, I was implementing outlining objects upon hovering over them, when I created the meshes within the project it worked fine (basic meshes like cube etc.), but when I imported the tree model in gltf format, after I added it to the scene the outlining broke and it is behaving weirdly, I'm rendering only one tree (random from 5 different trees), but after I hover over the tree to outline it, the tree disappears and another type of tree appears and is highlighted, any ideas why it could be happening?
My pieces of code:
constructor({ canvas }: { canvas: HTMLCanvasElement }) {
this.renderer = new WebGLRenderer({ canvas, antialias: true, logarithmicDepthBuffer: true })
this.composer = new EffectComposer(this.renderer)
this.outlinePass = new OutlinePass(new Vector2(window.innerWidth, window.innerHeight), this.scene, this.camera)
this.outlinePass.visibleEdgeColor = new Color('yellow')
const renderPass = new RenderPass(this.scene, this.camera)
this.composer.setSize(window.innerWidth, window.innerHeight)
this.composer.addPass(renderPass)
this.composer.addPass(this.outlinePass)
window.addEventListener('mousemove', this.onMouseMove)
}
onMouseMove = (e: any) => {
this.raycaster.setFromCamera({
x: (e.clientX / window.innerWidth) * 2 - 1,
y: -(e.clientY / window.innerHeight) * 2 + 1
}, this.camera)
const intersects = this.raycaster.intersectObjects(this.group.children, true)
if ( intersects.length > 0 ) {
var object = intersects[0].object
while (object.parent && !object.userData.outline) object = object.parent
this.outlinePass.selectedObjects = [object]
} else this.outlinePass.selectedObjects = []
}
draw = () => {
this.animation = requestAnimationFrame(() => this.draw())
this.composer.render()
this.arrayOfObjects.forEach(object => object.draw())
}
treeRender = () => {
this.loader.load(treeModelPaths[getRandomTreeIndex()], (gltf) => {
const scene = gltf.scene
this.group.add(scene)
})
}
Here are some important links: GIF with weird behavior
I found out, that when I remove the outling ('OutlinePass') the projects works fine, it renders only one tree, which is behaving correctly, that makes me wonder if the 'RenderPass' is working properly, which I'm using to render the scene.
EDIT: Surprisingly enough, on production (and on the stackblitz) it is rendering and working properly.
The hidden question here is actually: What is different between your dev and prod environments?
Your development and production environments must be executing the code differently, either from something you do (or don't do) to the code, or maybe from a side-effect from another library.
For example, if your dev environment is running raw code, and your production is running bundled code, then the bundler could be doing something that is making your code actually work. (An example of the difference might be that, while JavaScript supports ASI, your bundler may be physically adding semicolons to its output, and it's making a difference in your code execution.)
So, double-check how your code is executed in each environment. If there's no difference in the code in both places, start looking at wrappers, frameworks, and other libraries for conflicts.
