How to change the zOrder of object with Threejs?

by

If you want some objects to render “on top”, or “in front”, one trick is to create two scenes — the first scene is your regular scene, and the second scene contains the objects that you want to have on top.

First, set

renderer.autoClear = false;

Then create two scenes

var scene = new THREE.Scene();
var scene2 = new THREE.Scene();

Add your objects to the first scene as usual, and add the objects your want to have on top to the second scene.

Then, in your render() function, do this:

renderer.clear();
renderer.render( scene, camera );
renderer.clearDepth();
renderer.render( scene2, camera );

This will render the first scene, clear the depth buffer, and then render the second scene on top.

Here is a Fiddle: http://jsfiddle.net/d9Lzdkkr/

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”.

three.js r.85

More Related Contents:

  1. Transparent objects in Threejs
  2. Mouse / Canvas X, Y to Three.js World X, Y, Z
  3. How does the calculation of the light model work in a shader program?
  4. Transparent objects in Three.js
  5. Three.js Collada – What’s the proper way to dispose() and release memory (garbage collection)?
  6. Display wireframe and solid color
  7. artifacts when rendering both sides of a transparent object with three.js
  8. THREE.JS: Get object size with respect to camera and object position on screen
  9. three.js – Adjusting opacity of individual particles
  10. three.js – how do I rotate a cylinder around a specific point?
  11. Three.js – Can I ‘apply’ position, rotation, and scale to the geometry?
  12. Outline object (normal scale + stencil mask) three.js
  13. How to use multiple materials in a Three.js cube?
  14. Three.js Rotate Texture
  15. How to implement a ShaderToy shader in three.js?
  16. Three.js – Width of view
  17. Learning WebGL and three.js [closed]
  18. THREE.js : 2xMeshes using same vector as position
  19. How to find the unicode of the subscript alphabet?
  20. How to get the absolute position of a vertex in three.js?
  21. Three.js – Geometry on top of another
  22. Three.js/WebGL: Large spheres appear broken at intersection
  23. Three.js cube with different texture on each face
  24. Three.js and loading a cross-domain image
  25. How to save canvas animation as gif or webm?
  26. How to create a custom mesh on THREE.JS?
  27. Determine if a mesh is visible on the viewport according to current camera
  28. Three.js multiple materials on object loaded via OBJMTLLoader
  29. Why do shaders have to be in html file for webgl program?
  30. Apply color gradient to material on mesh – three.js

Leave a Comment