0

Codepen demonstrating the problem

https://codepen.io/anon/pen/GjJpYw?editors=0010

I have 2 meshes, one which contains 2 cubes, and the other which is 1 cube. The mesh with 2 cubes sandwiches the mesh with one cube (so the single cube is in the center). When I set all cubes to transparent but set the opacity of the center cube to 1, I would not expect to be able to see the back cube when looking through the front cube but I can.

I was wondering is there any easy way to fix this? This is a very simplified version of the problem I'm facing so I can't easily split the geometries. I also cannot just set transparent to false since ideally I would like to be able to have the middle cube partially transparent as well. Any suggestions?

var width = window.innerWidth;
var height = window.innerHeight;

var renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(width, height);
document.body.appendChild(renderer.domElement);

var scene = new THREE.Scene();

var cubeGeometry = new THREE.CubeGeometry(100, 100, 100);
var cube = new THREE.Mesh(cubeGeometry);
cube.position.set(0, 25, -200);
var cube2 = new THREE.Mesh(cubeGeometry);
cube2.position.set(0, -25, 200);
cube.updateMatrix();
cube2.updateMatrix();

var singleGeometry = new THREE.Geometry();
singleGeometry.merge(cube.geometry, cube.matrix);
singleGeometry.merge(cube2.geometry, cube2.matrix);

var combinedMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000, opacity: 0.5, transparent: true});
var mesh = new THREE.Mesh(singleGeometry, combinedMaterial);

var cubeGeometry = new THREE.CubeGeometry(200, 200, 200);
var cubeMaterial = new THREE.MeshBasicMaterial({ color: 0x0000ff, opacity: 0.8, transparent: true});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

scene.add(cube);
scene.add(mesh);

var camera = new THREE.PerspectiveCamera(60, width / height, 1, 1000);
camera.position.z = 500;

var controls = new THREE.OrbitControls(camera);
controls.addEventListener('change', render);


var pointLight = new THREE.PointLight(0xffffff);
pointLight.position.set(0, 300, 200);
scene.add(pointLight);

render();
animate();


function animate() {
  requestAnimationFrame( animate );
  controls.update();

}

function render() {
  renderer.render( scene, camera );
}
noveyak
  • 3,240
  • 1
  • 19
  • 19
  • 1
    For help with the issue, see http://stackoverflow.com/questions/15994944/transparent-objects-in-threejs/15995475#15995475 – WestLangley Sep 07 '16 at 01:50
  • Thanks, I tried most of the things on that post but wasn't able to find anything that could solve the issue. If I turn set depthWrite to false then I only see my white cube in the middle. I tried playing with the positions of the meshes as well but that would either do nothing or make one of the front or back cubes not visible. I think my problem might be a bit different since I'm basically getting too much transparency. My mesh containing 2 cubes is see through even though the center mesh should be blocking the back half of it. – noveyak Sep 07 '16 at 02:56
  • 1. Use the current version of three.js. 2. Set transparent to false, when opacity is 1, so the center cube is rendered first. 3. Your codepen throws errors. – WestLangley Sep 07 '16 at 04:37
  • 1. I upgraded to r80 and the result is the same. 2. I used opacity 1 as an example of the problem. I do need all the cubes to transparent. Setting transparent to false will fix that case but if I make the center cube blue and set opacity to 0.5, I would expect the back cube to look purpleish and not red on red. 3. Sorry, I had some random imports sitting around from a codepen I copy pasted from which was throwing errors but it doesn't seem to affect anything - I just updated the codepen to fix all errors. – noveyak Sep 07 '16 at 06:26
  • 1
    1. Set `depthWrite: false` -- at least for the merged mesh -- maybe both meshes. 2. `lookAt( scene.position )` -- `lookAt()` takes a `Vector3` as an arg. 3. There is no need to add `camera` to `scene`. 4. Add `OrbitControls` camera controller to your demo. You will be able to learn faster that way. 5. Make the center cube blue 50% as you suggested. – WestLangley Sep 07 '16 at 06:46
  • Updated the codepen with your advice, its not working but I appreciate your advice. 1. I tried various combinations of depthWrites but they don't seem to have the desired result, I left the combination of both false on the codepen but they all either result in the cube order not being correct or the blue/red intersection not looking purple. 2. Fixed 3. Removed 4. Added orbit controls so its easier to see as you move around 5. Done. – noveyak Sep 07 '16 at 07:43
  • Try `cube.renderOrder = 0; mesh.renderOrder = 1;` – WestLangley Sep 07 '16 at 08:11
  • Updated the codepen - that is better but the areas where the front cube can see the back cube through the middle cube still don't appear correct. They look like red on red instead of red on blue on red. I can see this by turning the opacity on the middle cube to .1, and then .9, and not really noticing a change in the area where I see all 3 cubes. – noveyak Sep 07 '16 at 08:25
  • You need to understand how webgl works and how three.js works so you can explain why you see what you see. You have a nice testbed now. – WestLangley Sep 07 '16 at 08:44

0 Answers0