minimal
my first jsfiddle...
by jmchen
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>
CSS
canvas {
position: fixed;
top: 0;
left: 0;
}
JavaScript
var scene, renderer, camera;
var cube;
var width = window.innerWidth;
var height = window.innerHeight;
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(width, height);
document.body.appendChild(renderer.domElement);
scene = new THREE.Scene();
var cubeGeometry = new THREE.BoxGeometry(140, 20, 10);
var cubeMaterial = new THREE.MeshLambertMaterial({
color: 0xffff00
});
cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.set(50, 0, 0);
scene.add(cube);
camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 10000);
camera.position.y = 160;
camera.position.z = 400;
camera.lookAt(new THREE.Vector3(0, 0, 0));
var gridXZ = new THREE.GridHelper(100, 10);
gridXZ.setColors(new THREE.Color(0xff0000), new THREE.Color(0xffffff));
scene.add(gridXZ);
var pointLight = new THREE.PointLight(0xffffff);
pointLight.position.set(0, 300, 200);
scene.add(pointLight);
renderer.render(scene, camera);