Three JS transparent room
HTML
<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://threejs.org/examples/js/controls/OrbitControls.js"></script>
CSS
body {
background-color: #000;
margin: 0px;
overflow: hidden;
}
JavaScript
// Simple three.js example
var mesh, renderer, scene, camera, controls;
init();
animate();
function init() {
// renderer
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor( 0x889988 );
document.body.appendChild( renderer.domElement );
// scene
scene = new THREE.Scene();
// camera
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.z = 30;
camera.position.x = 30*Math.cos(290*Math.PI/180);
camera.position.y = 30*Math.sin(310*Math.PI/180);
scene.add( camera ); // required, since adding light as child of camera
// controls
controls = new THREE.OrbitControls( camera );
controls.enableZoom = true;
controls.enablePan = true;
// ambient
scene.add( new THREE.AmbientLight( 0x444444 ) );
// light
var light = new THREE.PointLight( 0xffffff, 0.8 );
camera.add( light );
// !!! important part begins !!!
var verticesOfCube = [-1,-1,-1, 1,-2.5,1, 1, 1,-1, -1, 1,-1];
var indicesOfFaces = [2,1,0, 0,3,2, 3,2,1, 1,3,0];
// geometry
var geometry = new THREE.PolyhedronGeometry( verticesOfCube, indicesOfFaces, 10, 0 );
// material
var material1 = new THREE.MeshPhongMaterial( {
color: 'sandybrown'
} );
// mesh
mesh = new THREE.Mesh( geometry, material1 );
mesh.position.set( 0, 0, 0 );
scene.add( mesh );
// !!! important part ends !!!
geometry = new THREE.EdgesGeometry( mesh.geometry ); // or WireframeGeometry
var material = new THREE.LineBasicMaterial( { color: 0xffff00, linewidth: 4 } );
var edges = new THREE.LineSegments( geometry, material );
scene.add( edges );
}
function animate() {
requestAnimationFrame( animate );
//controls.update();
renderer.render( scene, camera );
}