Skip to content

Instantly share code, notes, and snippets.

@0b5vr

0b5vr/material-renderorder.html

Created March 26, 2019 09:29
Show Gist options
  • Save 0b5vr/2b822c74c4918a826b31d60a0d1c486a to your computer and use it in GitHub Desktop.
Save 0b5vr/2b822c74c4918a826b31d60a0d1c486a to your computer and use it in GitHub Desktop.
Download ZIP
Three.js : Test case for #16063
Raw
material-renderorder.html
<!DOCTYPE html>
<body></body>
<style>
body {
background-color: #000;
margin: 0px;
overflow: hidden;
}
</style>
<script src="../build/three.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script>
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 40.0, window.innerWidth / window.innerHeight, 0.1, 20.0 );
camera.position.set( 0.0, 0.0, 10.0 );
const orbitControls = new THREE.OrbitControls( camera );
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
{
const geometry = new THREE.BufferGeometry();
const vertices = new Float32Array( [
-1.0, -1.0, -1.0,
1.0, -1.0, -1.0,
-1.0, 1.0, -1.0,
1.0, 1.0, -1.0,
-1.0, -1.0, 1.0,
1.0, -1.0, 1.0,
-1.0, 1.0, 1.0,
1.0, 1.0, 1.0,
-0.5, -0.5, -0.5,
0.5, -0.5, -0.5,
-0.5, 0.5, -0.5,
0.5, 0.5, -0.5,
-0.5, -0.5, 0.5,
0.5, -0.5, 0.5,
-0.5, 0.5, 0.5,
0.5, 0.5, 0.5
] );
geometry.addAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
const indices = new Uint16Array( [
1, 0, 2, 1, 2, 3,
0, 4, 6, 0, 6, 2,
4, 5, 7, 4, 7, 6,
5, 1, 3, 5, 3, 7,
9, 8, 10, 9, 10, 11,
8, 12, 14, 8, 14, 10,
12, 13, 15, 12, 15, 14,
13, 9, 11, 13, 11, 15
] );
geometry.setIndex( new THREE.BufferAttribute( indices, 1 ) );
geometry.addGroup( 0, 24, 0 );
geometry.addGroup( 24, 24, 1 );
const material1 = new THREE.MeshBasicMaterial( {
color: 0xff0000,
transparent: true,
opacity: 0.5
} );
material1.renderOrder = 1 // **what I want**
const material2 = new THREE.MeshBasicMaterial( {
color: 0x00ff00,
transparent: true,
opacity: 0.5
} );
material2.renderOrder = 0 // **what I want**
const mesh = new THREE.Mesh( geometry, [ material1, material2 ] );
mesh.renderOrder = 0;
scene.add( mesh );
}
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
animate();
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment