In my scene i am importing a half a model of a cube, and creating two different instances to sort of merge them together.
Afterwards i plan on animating the opening of this cube from the middle with gsap.
While opening the cube i want to fake the idea of a light being there using a plane geometry with an alpha map attached to it.
I also plan on inserting other models inside of this cube.
But i get this issue: When i open the box the plane inside of it glitches in a weird way.
Screenshot below.
Sandbox where the error can be reproduced (i have copied most if not all of my code here)
In the gui menu press “rotateHalfOut” to open the box and see the plane glitching out.
The model used for the half of a cubee is “rounded_cube_medpoly_half.glb”
The model was made in blender using bevel to round the edges, than a bisect + solidify.
I tried with a version of the model that also fills the cube but to no avail, the glitches still persist
This is not a glitch, transparency is extremely difficult to draw correctly without using tricks.
To improve it slightly, try to limit your plane’s size to the inside space of your cube (using CircleGeometry). Currently the corners of your plane extend beyond/trough the cube’s volume, wich explain why three.js thinks it’s behind the cube and hide/clip the plane (in a sense three is perfectly right here)
It’s best to use transparency in very simple ways without intricate design.
otherwise you fated to use a wide range of shenanigans and custom code.
The Plane is supposed to create a fake light from a certain perspective. I will move the geometry with the light as the box opens to fake it even more.
I tried using circle / smaller plane but it still clips weirdly.
I attempted using a THREE.Sprite and THREE.SpriteMaterial for the plane that was glitching.
It glitches less now but it has trouble with transparency.
Even if it would’ve worked tho, the plane as a sprite covers models behind it (from perspective of camera)
The idea is to have some other model in the middle of the box, and show some light coming from the middle of the box.
I was trying to fake it by having the plane positioned at the opening point, and transitioning it to the middle of the box as the box was opening. The plane was supposed to be transparent so i could also show the main model inside the box.
You should make a Geometry with 5 vertices, and copy the positions of the box(s) inner corners. Then you will have a smooooooth continuous surface with no intersections.
The issue here isn’t the intersection of the two half boxes, but the behaviour transparency has on objects inside of the box.
I tried making the white plane inside the box transparent:false and the clip/glitch behaviour of the plane disappeared;
Technically though i’m back at step 0: i need to figure out a way to fake some nice lights inside of the box as it opens.
I think treasure chests make a little tray/shaft that follows the lid. Whatever else you do (in terms of gradient or glow or whatever), at least it isn’t an arbitrary shape. I mean your picture shows the intersection to avoid.
I’ll attempt making a light effect with Lensflare, to see if the effect is better than what i envisioned with the fake light mesh in the box that is clipping.
However, some kind soul on discord suggested me i make the goldMaterial.trasparent = false and goldMaterial.needsUpdate = true after i don’t need opacity on it anymore.
In this exact transition of the whole animation, where the box is opening, the gold material doesn’t necessarily need to be transparent. So i plan on updating the material’s transparency setting with gsap before i open the box, this way i should be able to use the original fake light mesh.
I thank you all very much for the suggestions! I didn’t know the engine had this much trouble with transparency.
