How to make the box on the right? I used depthTest false on the box and its outline to make it always on top of other mesh but the outline is now ignoring the box depth.
Here is the sample code the display the image on the left
https://jsfiddle.net/icesnake/t6no2a84/13/
var camera, scene, renderer;
var geometry, material, greenMesh;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
camera.position.z = 5;
scene = new THREE.Scene();
geometry = new THREE.BoxGeometry( 1, 1, 1 );
material = new THREE.MeshBasicMaterial({color: 0x00ff00,side:THREE.DoubleSide});
material.depthTest = false;
material.transparent = false;
material.opacity = 1;
greenMesh = new THREE.Mesh( geometry, material );
var edgeMaterial = new THREE.LineBasicMaterial({
color: 'black',
depthTest: false,
depthWrite: false,
});
var edges = new THREE.EdgesGeometry(geometry);
var wireframe = new THREE.LineSegments(edges, edgeMaterial);
wireframe.renderOrder = 1;
greenMesh.add(wireframe);
greenMesh.renderOrder = 1;
scene.add(greenMesh);
material3 = new THREE.MeshStandardMaterial({emissive: 0x00ffff,side:THREE.DoubleSide});
geometry3 = new THREE.BoxGeometry( 1,1,1 );
blueMesh = new THREE.Mesh( geometry3, material3 );
blueMesh.position.z = 0.5;
scene.add(blueMesh);
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
}
function animate() {
requestAnimationFrame( animate );
greenMesh.rotation.x += 0.01;
greenMesh.rotation.y += 0.02;
renderer.render( scene, camera );
}
I tried different combinations of depthTest, depthWrite and renderOrder and I cannot seem to make the output I desire.