Default fiddle
by wilt
HTML
<script src="https://rawgit.com/mrdoob/three.js/master/build/three.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>
<script src="https://rawgit.com/Wilt/ThreeCSG/master/ThreeCSG.js"></script>
CSS
body {
background-color: #000;
margin: 0px;
overflow: hidden;
}
JavaScript
// three.js info box follows shape
var renderer, scene, camera;
var angle = 0;
init();
animate();
function init() {
// info
var info = document.createElement('div');
info.style.position = 'absolute';
info.style.top = '30px';
info.style.width = '100%';
info.style.textAlign = 'center';
info.style.color = '#fff';
info.style.fontWeight = 'bold';
info.style.backgroundColor = 'transparent';
info.style.zIndex = '1';
info.style.fontFamily = 'Monospace';
info.innerHTML = "three.js - texture load demo";
document.body.appendChild(info);
// renderer
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// scene
scene = new THREE.Scene();
// ambient light
var ambient = new THREE.AmbientLight(0xffffff);
scene.add(ambient);
// directional light
var directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
directionalLight.position.set(-1, -1, 1);
scene.add(directionalLight);
// camera
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 500);
camera.position.set(100, -100, 50);
camera.up.set(0, 0, 1);
// controls
controls = new THREE.OrbitControls(camera);
controls.target = new THREE.Vector3(0, 0, 0);
controls.update();
// material
material = new THREE.MeshBasicMaterial({
shading: THREE.FlatShading
});
// MY CUSTOM GEOMETRY
var geometry = new THREE.Geometry();
var v0 = new THREE.Vector3(-20, -20, 0);
var v1 = new THREE.Vector3(20, -20, 0);
var v2 = new THREE.Vector3(20, 20, 0);
var v3 = new THREE.Vector3(-20, 20, 0);
geometry.vertices.push(v0, v1, v2, v3);
geometry.faces.push(
new THREE.Face3(0, 1, 2),
new THREE.Face3(0, 2, 3)
);
geometry.computeFaceNormals();
computeUVs(geometry);
var aqua_bodengrund = new THREE.Mesh(
geometry, material
);
...