three.js transparent object occlusion

by

Yes, in three.js you can create an object that is invisible, but still occludes other objects as if it were visible.

To do that, you need to use two features available in three.js: Object3D.renderOrder and Material.colorWrite.

You need to make sure the invisible object is rendered prior to the object(s) it must occlude.

You control the rendering order with the renderOrder property.

You make the occluding object invisible by setting its material’s colorWrite property to false.

// material
var material = new THREE.MeshPhongMaterial();

// mesh a
var geometry = new THREE.PlaneGeometry( 10, 10, 4, 4 );
mesh = new THREE.Mesh( geometry, material.clone() );
mesh.material.color.set( 0xff0000 );
mesh.renderOrder = 0; // <===================
mesh.position.z = - 10;
scene.add( mesh );

// mesh b
var geometry = new THREE.BoxGeometry( 2, 2, 2 );
mesh = new THREE.Mesh( geometry, material.clone() );
mesh.material.color.set( 0x606060 );
mesh.renderOrder = 3;
mesh.position.z = 0;
scene.add( mesh );

// mesh c
var geometry = new THREE.BoxGeometry( 3, 3, 3 );
mesh = new THREE.Mesh( geometry, material.clone() );
mesh.material.color.set( 0x0000ff );
mesh.material.colorWrite = false; // <=================
mesh.renderOrder = 2;
mesh.position.z = 10;
scene.add( mesh );

three.js r.143

More Related Contents:

  1. “Cross origin requests are only supported for HTTP.” error when loading a local file
  2. How can I render an ‘atmosphere’ over a rendering of the Earth in Three.js?
  3. How to Fit Camera to Object
  4. THREE.js Ray Intersect fails by adding div
  5. THREE.js generate UV coordinate
  6. Three.js – Orthographic camera
  7. Drawing a line with three.js dynamically
  8. How to rotate a 3D object on axis three.js?
  9. Thickness of lines using THREE.LineBasicMaterial
  10. Converting World coordinates to Screen coordinates in Three.js using Projection
  11. Transparent background with three.js
  12. Using textures in THREE.js
  13. Three.js / WebGL – transparent planes hiding other planes behind them
  14. Is it possible to enable unbounded number of renderers in THREE.js?
  15. Rendering a transparent shell
  16. How do you save an image from a Three.js canvas?
  17. Any way to get a bounding box from a three.js Object3D?
  18. Replicating MeshLambertMaterial Using ShaderMaterial ignores textures
  19. How to detect collision in three.js?
  20. Three JS Pivot point
  21. Convert 2:1 equirectangular panorama to cube map
  22. WebGL / Three.js – Particles colored by texture flicker erratically while moving camera
  23. Antialiasing not working in Three.js
  24. Detect clicked object in THREE.js
  25. How to render clipped surfaces as solid objects
  26. Three.js add an object to a group but keep global position/rotation/scale as it was
  27. How to flip a Three.js texture horizontally
  28. Why do shaders have to be in html file for webgl program?
  29. How to toggle preserveDrawingBuffer in three.js?
  30. Apply color gradient to material on mesh – three.js

Leave a Comment