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;
}
JavaScript
var camera, scene, renderer, mesh, material, stats;
init();
animate();
function init() {
// Renderer.
renderer = new THREE.WebGLRenderer();
//renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
// Add renderer to page
document.body.appendChild(renderer.domElement);
// Create camera.
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.y = 4;
camera.position.x = 1;
camera.position.z = 8;
// Create scene.
scene = new THREE.Scene();
// Create material
var map = new THREE.TextureLoader().load( 'https://threejs.org/examples/textures/floors/FloorsCheckerboard_S_Diffuse.jpg' );
var normalMap = new THREE.TextureLoader().load('https://threejs.org/examples/textures/floors/FloorsCheckerboard_S_Normal.jpg');
var material = new THREE.MeshPhongMaterial( { map: map, side: THREE.DoubleSide } );
/* DISABLE NORMAL MAP TO SOLVE RENDERING BUG */
material.normalMap = normalMap;
// Create triangle and add to scene.
var geometry = new THREE.BufferGeometry();
var vertices = [1, 1, -1, -1, -1, -1, -1, 1, -1];
var normals = [0, 0, -1, 0, 0, -1, 0, 0, -1];
var uvs = [0.0075, 0.4350, 0.0075, 0.4350, 0.0075, 0.4350];
geometry.setIndex([0, 1, 2]);
geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
geometry.addAttribute( 'normal', new THREE.Float32BufferAttribute( normals, 3 ) );
geometry.addAttribute( 'uv', new THREE.Float32BufferAttribute( uvs, 2 ) );
object = new THREE.Mesh( geometry, material );
object.position.set( 0, 0, 0 );
scene.add( object );
// Create ambient light and add to scene.
var light = new THREE.AmbientLight(0x404040); // soft white light
scene.add(light);
// Create directional light and add to scene.
var directionalLight = new THREE.DirectionalLight(0xffffff);
directionalLight.position.set(1, 1,...