Three.js – Geometry on top of another

by

Yes.

First do this:

renderer.autoClear = false;

Then create a second scene that contains just the objects you want to be on top. Then, in your render loop:

renderer.clear();                     // clear buffers
renderer.render( scene, camera );     // render scene 1
renderer.clearDepth();                // clear depth buffer
renderer.render( scene2, camera );    // render scene 2

EDIT: Another solution is to have just one scene, but use this pattern:

mesh.renderOrder = 999;
mesh.onBeforeRender = function( renderer ) { renderer.clearDepth(); };

If the mesh has a single material, it will render “on top”.

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 generate UV coordinate
  5. Three.js – Orthographic camera
  6. Drawing a line with three.js dynamically
  7. How to rotate a 3D object on axis three.js?
  8. Rotate object on specific axis anywhere in Three.js – including outside of mesh
  9. Thickness of lines using THREE.LineBasicMaterial
  10. Using textures in THREE.js
  11. How to stop a requestAnimationFrame recursion/loop?
  12. Three JS – Find all points where a mesh intersects a plane
  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. Any way to get a bounding box from a three.js Object3D?
  17. Three.js Projector and Ray objects
  18. How to detect collision in three.js?
  19. Three JS Pivot point
  20. Three.js/WebGL: Large spheres appear broken at intersection
  21. Convert 2:1 equirectangular panorama to cube map
  22. Three.js cube with different texture on each face
  23. Three.js and loading a cross-domain image
  24. How to save canvas animation as gif or webm?
  25. How to create a custom mesh on THREE.JS?
  26. Antialiasing not working in Three.js
  27. Detect clicked object in THREE.js
  28. How to render clipped surfaces as solid objects
  29. Threejs: assign different colors to each vertex in a geometry
  30. Three.js multiple materials on object loaded via OBJMTLLoader

Leave a Comment