JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://threejs.org/build/three.min.js"></script>
CSS
body {
background-color: #000;
margin: 0px;
overflow: hidden;
}
JavaScript
// Self-transparency in three.js
var mesh, renderer, scene, camera;
var light;
init();
animate();
function init() {
// renderer
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
// scene
scene = new THREE.Scene();
// camera
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.set( 200, 100, 200 );
camera.lookAt( scene.position );
scene.add( camera );
// ambient
var ambient = new THREE.AmbientLight( 0x555555 );
scene.add( ambient );
//light
light = new THREE.PointLight( 0xffffff );
camera.add( light );
// geometry
var geometry = new THREE.BoxGeometry( 30, 30, 30 );
var geometry2 = new THREE.SphereGeometry( 70, 12, 8 );
// params
//var SHADING = THREE.SmoothShading;
var SHADING = THREE.FlatShading;
var OPACITY = 0.5;
// materials
var material = new THREE.MeshLambertMaterial( {
color: 0xcccccc,
side: THREE.FrontSide,
transparent: false,
opacity: 1
} );
var material2 = new THREE.MeshLambertMaterial( {
color: 0x00cc00,
side: THREE.DoubleSide,
shading: SHADING,
transparent: true,
opacity: OPACITY
} );
var material2Back = new THREE.MeshLambertMaterial( {
color: 0x00cc00,
side: THREE.BackSide,
shading: SHADING,
transparent: true,
opacity: OPACITY
} );
var material2Front = new THREE.MeshLambertMaterial( {
color: 0x00cc00,
side: THREE.FrontSide,
shading: SHADING,
transparent: true,
opacity: OPACITY
} );
if ( false ) { // the original double-sided case
// mesh
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
// mesh
...