JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://threejs.org/build/three.min.js"></script>
<!-- SVGRenderer.js depends on Projector.js https://github.com/mrdoob/three.js/issues/8156#issuecomment-185518978 -->
<script src="https://cdn.rawgit.com/mrdoob/three.js/r88/examples/js/renderers/Projector.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/r88/examples/js/renderers/SVGRenderer.js"></script>
<div id="isometric_diagram" style="border:solid 1px black;"></div>
JavaScript
var camera, scene, renderer;
var geometry, material, mesh;
// ------ CAMERA AND SCENE ------
var width = 360;
var height = 240;
var aspect = width / height;
var d = 1;
camera = new THREE.OrthographicCamera(-d * aspect, d * aspect, d, -d, 1, 1000);
scene = new THREE.Scene();
// ------ MATERIAL AND GEOMETRY ------
material = new THREE.MeshPhongMaterial({
color: 0xFF9800,
specular: 0xffffff,
shininess: 50,
shading: THREE.SmoothShading,
polygonOffset: true,
polygonOffsetFactor: 4, // positive value pushes polygon further away
polygonOffsetUnits: 4
});
geometry = new THREE.BoxGeometry(1, 1, 1);
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
// ------ EDGES ------
var geo = new THREE.EdgesGeometry( mesh.geometry ); // or WireframeGeometry
var mat = new THREE.LineBasicMaterial( { color: 0x000000, linewidth: 4 } );
var wireframe = new THREE.LineSegments( geo, mat );
mesh.add( wireframe );
// scene.add( wireframe );
// ------ WEBGL RENDERER ------
//renderer = new THREE.WebGLRenderer( { antialias: true } );
//renderer.setPixelRatio( window.devicePixelRatio );
// ------ SVG RENDERER ------
renderer = new THREE.SVGRenderer();
// ------ RENDERER ------
renderer.setClearColor(0xDDDDDD);
renderer.setSize(width, height);
// ------ LIGHTS ------
light = new THREE.DirectionalLight(0xffffff, 1.8);
light.position.set(12, 18, 15);
scene.add(light);
// ------ SET CAMERA ------
camera.position.set(20, 20, 20);
camera.lookAt(scene.position);
renderer.render( scene, camera );
// ------ ADD TO DOM ------
wrapper = document.getElementById('isometric_diagram');
wrapper.appendChild(renderer.domElement);