3JS_Minimal

by ikatyang

HTML

<script src="https://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 (10,10,10);
var cubeMaterial = new THREE.MeshLambertMaterial ({color: 0x1ec876});
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);