Basic Scene

by Paul West

HTML

<script src="https://raw.githubusercontent.com/biancalooijen/car/master/three.js"></script>
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

CSS

body{
  overflow: hidden;
  margin: 0;
}

JavaScript

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / innerHeight, 0.1, 1000);
camera.position.set(0, 0, 20);

var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
controls = new THREE.OrbitControls(camera, renderer.domElement);

// viewport update (meeschalen met schermgrootte)
window.addEventListener('resize', function() {
  var width = window.innerWidth;
  var height = window.innerHeight;
  renderer.setSize(width, height);
  camera.aspect = width / height;
  camera.updateProjectionMatrix();
});

// licht toevoegen
var ambientLight = new THREE.AmbientLight(0xffffff, 2.0);
ambientLight.castShadow = true;
scene.add(ambientLight);

// water
var waterGeometry = new THREE.BoxGeometry(10, 6, 10);
var material = new THREE.MeshNormalMaterial({
  color: 0x448fdb
});
var water = new THREE.Mesh(waterGeometry, material);
scene.add(water);

// scene renderen
var render = function() {
  renderer.render(scene, camera);
};

var GameLoop = function() {
  requestAnimationFrame(GameLoop);
  render();
}

GameLoop();