Three.js base
A base/starter fiddle for Three.js
HTML
<script src="https://rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/stats.js/r17/build/stats.min.js"></script>
CSS
body {
padding: 0;
margin: 0;
}
canvas {
display: block;
background:purple;
}
JavaScript
var camera, scene, renderer, mesh, material, stats;
init();
animate();
function init() {
renderer = new THREE.WebGLRenderer({alpha: true}); // Set alpha = true
renderer.setClearColor(0x000000); // Set the clear colour of the renderer to black
renderer.setClearAlpha(0); // Set the alpha value to be 0
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 400;
scene = new THREE.Scene();
material = new THREE.MeshPhongMaterial();
var geometry = new THREE.BoxGeometry(200, 200, 200);
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
// Create your masking material with the following properties
var mat2 = new THREE.MeshBasicMaterial({
blending: 0,
transparent: false,
opacity: 0,
color: 0x000000
});
var geometry2 = new THREE.BoxGeometry(100, 210, 210);
mesh2 = new THREE.Mesh(geometry2, mat2);
mesh.add(mesh2);
var light = new THREE.AmbientLight(0x404040); // soft white light
scene.add(light);
var directionalLight = new THREE.DirectionalLight(0xffffff);
directionalLight.position.set(1, 1, 1).normalize();
scene.add(directionalLight);
window.addEventListener('resize', onWindowResize, false);
stats = new Stats();
document.body.appendChild( stats.dom );
}
function animate() {
requestAnimationFrame(animate);
mesh.rotation.x += 0.005;
mesh.rotation.y += 0.01;
renderer.render(scene, camera);
stats.update();
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}