good start
by KUO YOU-TING
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r14/Stats.min.js"></script>
CSS
canvas {
position: fixed;
top: 0;
left: 0;
}
JavaScript
var clock = new THREE.Clock();
var scene, renderer, camera;
var cube;
var angle = 0;
var turn = 1;
init();
animate();
function init()
{
var width = window.innerWidth;
var height = window.innerHeight;
// create and start the renderer; choose antialias setting.
//if ( Detector.webgl )
renderer = new THREE.WebGLRenderer( {antialias:true} );
//else
// renderer = new THREE.CanvasRenderer();
renderer.setSize (width, height);
document.body.appendChild (renderer.domElement);
// STATS
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
stats.domElement.style.zIndex = 100;
document.body.appendChild( stats.domElement );
scene = new THREE.Scene();
var cubeGeometry = new THREE.BoxGeometry (10,10,10);
var cubeMaterial = new THREE.MeshLambertMaterial ({color: 0x1ec876});
//cubeMaterial = new THREE.MeshBasicMaterial ({color: 0xff0000, vertexColors: THREE.VertexColor});
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 skyboxGeometry = new THREE.BoxGeometry (1000,1000,1000);
var skyboxMaterial = new THREE.MeshBasicMaterial ({color: 0x1f1f1f, side:THREE.BackSide});
var skybox = new THREE.Mesh (skyboxGeometry, skyboxMaterial);
scene.add (skybox);
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);
window.addEventListener ('resize', onWindowResize, false);
}
function onWindowResize ()
{
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize (window.innerWidth, window.innerHeight);
}
function...