Three.js object become translucent at certain angles without setting transparency?

Questions
,
1

Hello!
Attached is a video of what is going on.

A pretty simple scene with 2 BoxGeometrys. Why is this happening? I don’t have anything set on the material except the color. Here is how I’m creating the objects.

let geo = new THREE.BoxGeometry(1.8, 2, 1);
let mat = new THREE.MeshLambertMaterial({color: 0x00ff00});
let mesh = new THREE.Mesh(geo, mat);

scene.add(mesh);

let geo2 = new THREE.BoxGeometry(1, 1.8, 1);
let mat2 = new THREE.MeshLambertMaterial({color: 0x00ff00});
let mesh2 = new THREE.Mesh(geo2, mat2);

mesh.position.set(2, 0, 0)
scene.add(mesh2);

Maybe it’s the lights??

let spot1 = new THREE.SpotLight(0xffffff);
spot1.position.set(20, 20, 20);
spot1.target.position.set(0, 0, 0)
scene.add(spot1);
scene.add(spot1.target);

let spot2 = new THREE.SpotLight(0xffffff);
spot2.position.set(-20, -20, 20);
spot2.lookAt(0, 0, 0)
scene.add(spot2);

let spot3 = new THREE.SpotLight(0xffffff);
spot3.position.set(0, 20, -20);
spot3.lookAt(0, 0, 0)
scene.add(spot3);

Thanks for your help!

2

Looks line the depthWrite is disabled on either of the materials.

Could you show the rest of the code / the three.js version you’re using / how is the renderer set up - or potentially just reproduce the issue on codepen ?

1 Like
3

Thanks for your reply! Is GitHub Repository okay?

4

As above, you’re turning off depthWrite on materials. That causes rendering order to go places. Unless you really have a reason to turn it off - leave depthWrite at it’s default value.

If that still doesn’t solve the issue - it’s also possible that the faces have incorrect normals. In that case:

a) Just create a geometry using presets instead of coding it by hand.
b) Create the model in software like Blender and just import it - that’s probably the most reasonable option if you want to work with more than just primitives later on.
c) Set side on material to THREE.DoubleSide:

new THREE.MeshLambertMaterial({ color: 0x00ff00, side: THREE.DoubleSide });
1 Like
5

Thanks for your help! I found out the problem, stupid mistake… Look how I created my camera:

var camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1000, 0.1);

I swapped the near and far values!! Interesting…

Thanks again!