Test Car Driving
by zeemeeuw1994
HTML
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://threejs.org/examples/js/loaders/MTLLoader.js"></script>
<script src="https://threejs.org/examples/js/loaders/OBJLoader.js"></script>
CSS
body{
overflow: hidden;
margin: 0;
}
JavaScript
var car;
var scene = new THREE.Scene( );
var camera = new THREE.PerspectiveCamera ( 75, window.innerWidth / innerHeight, 0.1, 1000 );
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 );
// ondergrond maken
var geometry = new THREE.PlaneGeometry( 10, 10 );
var material = new THREE.MeshPhongMaterial( {color: 0x919191, side: THREE.DoubleSide, wireframe: false} );
var plane = new THREE.Mesh( geometry, material );
new THREE.ShadowMaterial({
color: 0xff0000, transparent: false
});
plane.position.set( 0, -0.5001, 0 );
plane.receiveShadow = true; // ontvangt schaduw van de mesh
plane.rotation.set( Math.PI / 2, 0, 0 );
plane.shadowColor = 0xffffff;
scene.add( plane );
// licht toevoegen
var ambient = new THREE.AmbientLight( 0xffffff, 1 );
scene.add( ambient );
// create the shape
new THREE.MTLLoader()
.setPath( 'https://raw.githubusercontent.com/biancalooijen/car/master/' )
.load( 'car.mtl', function ( materials ) {
materials.preload();
new THREE.OBJLoader()
.setMaterials( materials )
.setPath( 'https://raw.githubusercontent.com/biancalooijen/car/master/' )
.load( 'car.obj', function ( object ) {
car = object;
object.scale.set( 0.25, 0.25, 0.25 );
// object.rotation.set( 0, Math.PI / -4, 0 );
object.rotation.set( 0, Math.PI, 0 );
object.position.set( 0, -0.5, 0 );
...