JSFiddle - React, Tailwind, and code Playground

by icesnake

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>

CSS

body {
	  margin: 0;
}

JavaScript

var camera, scene, renderer, scene2;
var geometry, material, greenMesh, redMesh;

init();
animate();

function init() {

	camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 0.01, 10 );
	camera.position.z = 5;

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

	geometry = new THREE.BoxGeometry( 1, 1, 1 );
  
	material = new THREE.MeshBasicMaterial( {
		color: 0x00ff00,
	} );
  
	greenMesh = new THREE.Mesh( geometry, material );
	redMesh = new THREE.Mesh( geometry.clone(), new THREE.MeshBasicMaterial( {
		color: 'red',
	} ) );
  redMesh.position.x = 2;
	redMesh.renderOrder = 90;
  redMesh.onBeforeRender = (renderer) => {
  	renderer.clearDepth();
  }
  
	var edgeMaterial = new THREE.LineBasicMaterial( {
		color: 'black',
	} );
  
	var edges = new THREE.EdgesGeometry( geometry );
  
  var wireframe = new THREE.LineSegments( edges, edgeMaterial );
  
	wireframe.renderOrder = 99;
	greenMesh.renderOrder = 99;
  greenMesh.onBeforeRender = (renderer) => {
  	renderer.clearDepth();
  }
  
	greenMesh.add( wireframe );
	redMesh.add( wireframe.clone() );
	scene.add( redMesh );
	scene.add( greenMesh );


	material3 = new THREE.MeshStandardMaterial( { emissive: 0x00ffff, side: THREE.DoubleSide
	} );

	geometry3 = new THREE.BoxGeometry( 3, 2, 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 );
	renderer.autoClear = false;

}

function animate() {

	requestAnimationFrame( animate );

	greenMesh.rotation.x += 0.01;
	greenMesh.rotation.y += 0.02;
	redMesh.rotation.x += 0.01;
	redMesh.rotation.y += 0.02;
  
	renderer.render( scene, camera );


}