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="https://enable3d.io/lib/enable3d/enable3d.ammoPhysics.0.22.0-dev.1.min.js"></script>

CSS

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

JavaScript

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();

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 THREE.Mesh(planeGeometry,planeMaterial);

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

        scene.add(plane);

const cube = new THREE.Mesh(
  new THREE.BoxBufferGeometry(1, 1, 1),
  new THREE.MeshPhongMaterial({
    color: "red"
  })
);
cube.position.set(5, 0, 0);
scene.add(cube);
physics.add.existing(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);
  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 animationId = null;
let action = null

function startStepping(){
  // set up the interval...
  // but then also ensure the action stops after the animation plays:
    animationId = setInterval(() => {
    updateCube();
    if (++step ===...