Pure THREE.JS template
HTML
<script src="http://three.thiele-medien.de/threejs-r71/examples/shared/js/ThreeCSG.js"></script>
<script src="http://three.thiele-medien.de/threejs-r71/examples/shared/js/csg.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r73/three.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/3587259/Code/Threejs/OrbitControls.js">
</script>
JavaScript
var scene, renderer, camera, controls;
init();
animate();
function init()
{
basicScene();
var height = 0.2;
var width = 5;
var length = 5;
var box = new THREE.Mesh( new THREE.BoxGeometry( width, height, length ) );
// CSG GEOMETRY
var cube_bsp = new ThreeBSP( box );
var cutgeo = new THREE.SphereGeometry( 1,16,8 );
// move geometry to where the cut should be
var matrix = new THREE.Matrix4();
matrix.setPosition( new THREE.Vector3(0, 0, 1) );
cutgeo.applyMatrix( matrix );
var sub = new THREE.Mesh( cutgeo );
var substract_bsp = new ThreeBSP( sub );
var subtract_bsp = cube_bsp.subtract( substract_bsp );
var result = subtract_bsp.toMesh();
result.geometry.computeVertexNormals();
var ceilingMaterial = new THREE.MeshPhongMaterial ( {
color:0xFFFFFF,
shading: THREE.FlatShading,
} );
result.material = ceilingMaterial;
scene.add( result );
}
function animate()
{
requestAnimationFrame ( animate );
renderer.render (scene, camera);
}
function basicScene() {
renderer = new THREE.WebGLRenderer( {antialias:true} );
var width = window.innerWidth;
var height = window.innerHeight;
renderer.setSize (width, height);
// background color
renderer.setClearColor( 0x55ff55, 1);
document.body.appendChild (renderer.domElement);
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera (45, width/height, 1, 10000);
camera.position.y = 10;
camera.position.z = 10;
camera.lookAt (new THREE.Vector3(0,0,0));
controls = new THREE.OrbitControls (camera, renderer.domElement);
var aL = new THREE.AmbientLight ( 0x222222 );
scene.add( aL );
var dirLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
dirLight.position.set( -1, 1.75, 1 );
dirLight.position.multiplyScalar( 50 );
scene.add( dirLight );
var gridXZ = new THREE.GridHelper(100, 10);
gridXZ.setColors( new THREE.Color(0xff0000), new...