WebGL with Three.js (and Physijs)
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r69/three.min.js"></script>
<script src="https://rawgit.com/chandlerprall/Physijs/master/physi.js"></script>
<body>
</body>
JavaScript
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement );
//renderer.shadowMapEnabled = true;
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
var light1 = new THREE.DirectionalLight( 0xffffff, 0.7 );
light1.position.set( 0, 5, 3 );
light1.castShadow = true;
scene.add( light1 );
// GEOMETRY
var geometry = new THREE.PlaneGeometry(100,100,99,99);
var material = new THREE.MeshLambertMaterial( { color: 0x00ff00 } );
for ( var i = 0; i<geometry.vertices.length; i++ ) {
geometry.vertices[i].z = Math.floor(Math.random()*1.1);
}
geometry.computeFaceNormals();
geometry.computeVertexNormals();
var terrain = new Physijs.HeightfieldMesh(
geometry,
material,
0
);
terrain.rotation.x -= 90 * Math.PI / 180;
terrain.receiveShadow = true;
scene.add(terrain);
// OBJECT - Sphere
var sphereGeometry = new THREE.SphereGeometry(4, 10, 10);
var objectMaterial = new THREE.MeshPhongMaterial({color:0xffffff});
var sphereMesh = new THREE.Mesh( sphereGeometry, objectMaterial);
sphereMesh.receiveShadow = true;
sphereMesh.castShadow = true;
sphereMesh.position.x = 0;
sphereMesh.position.y = 10;
sphereMesh.position.z = 0;
scene.add(sphereMesh);
// WayPoint - Small sphereMesh to visualize waypoint
var wayPointGeometry = new THREE.SphereGeometry( 1, 5, 5);
var wireFrameMaterial = new THREE.MeshBasicMaterial({color: 0xff0000, wireframe: true });
var wpMesh = new THREE.Mesh( wayPointGeometry, wireFrameMaterial );
wpMesh.position.x = 0;
wpMesh.position.y = 0.5;
wpMesh.position.z = Math.floor(Math.random()*20);
scene.add(wpMesh);
camera.position.z = 50;
camera.position.y = 20;
function render() {
requestAnimationFrame( render );
/*
camera.position.x +=
camera.position.y +=
camera.position.z +=
*/
renderer.render( scene, camera );
}
render();