Three.js base

A base/starter fiddle for Three.js

by mauricederegt

HTML

<script src="https://rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
<script src="http://gamingJS.com/physi.js"></script>

CSS

body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
  background: skyblue;
}

JavaScript

// Physics
    Physijs.scripts.ammo = 'http://gamingJS.com/ammo.js';
    Physijs.scripts.worker = 'http://gamingJS.com/physijs_worker.js';

let W = window.innerWidth;
let H = window.innerHeight;

const renderer = new THREE.WebGLRenderer({
  antialias: true,
  alpha: true
});
document.body.appendChild(renderer.domElement);

//const scene = new THREE.Scene();
scene = new Physijs.Scene();
scene.setGravity(new THREE.Vector3( 0, -50, 0 ));

const camera = new THREE.PerspectiveCamera(28, 1, 1, 1000);
camera.position.set(0, 0, 50);
camera.lookAt(scene.position);
scene.add(camera);

const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(0, 0, -1);
camera.add(light);

var planeGeometry = new THREE.PlaneGeometry(11,11,1,1);
        var planeMaterial = new THREE.MeshBasicMaterial(
                                          {color: 0xcccccc});
        var plane = new Physijs.BoxMesh(planeGeometry,planeMaterial);

        plane.position.x = 0;
        plane.position.y = 0;
        plane.position.z = -1;

        scene.add(plane);

const cube = new Physijs.BoxMesh(
  new THREE.BoxBufferGeometry(1, 1, 1),
  new THREE.MeshPhongMaterial({
    color: "red"
  })
);
cube.position.set(5, 0, 0);
scene.add(cube);

function render() {
  renderer.render(scene, camera);
}

function resize() {
  W = window.innerWidth;
  H = window.innerHeight;
  renderer.setSize(W, H);
  camera.aspect = W / H;
  camera.updateProjectionMatrix();
  render();
}

window.addEventListener("resize", resize);

resize();

function animate() {
  requestAnimationFrame(animate);
  scene.simulate(); // run physics
  render();
}
requestAnimationFrame(animate);

// select the x & y world axis NEW
const xAxis = new THREE.Vector3(1, 0, 0);
const yAxis = new THREE.Vector3(0, 1, 0);

/* function updateCube() {
  //cube.position.x -= 1;
  //cube.rotateOnWorldAxis(yAxis, THREE.Math.degToRad(-90));
  cube.position.x -= 1 / 50;
  cube.rotateOnWorldAxis(yAxis, -(Math.PI / 100));
} */



let step = 0;
let...