Test

by wayne6172

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>

<script src="https://threejs.org/examples/js/controls/OrbitControls.js">
</script>

<script src="https://jyunming-chen.github.io/tutsplus/js/KeyboardState.js"></script>

CSS

body{
    overflow: hidden;
}

JavaScript

var scene,camera,renderer,controls;
var keyboard = new KeyboardState();
var clock;

var car;
var pos = new THREE.Vector3();
var vel = new THREE.Vector3();
var force = new THREE.Vector3();
var power,angle;

(function(){
	Math.clamp = function(val,min,max){
    	return Math.min(Math.max(val,min),max);
    }
})();

init();
animate();

function buildVehicle(){
	var car = new THREE.Object3D();
    var mat = new THREE.MeshNormalMaterial();
    var body = new THREE.Mesh(new THREE.CylinderGeometry(5,5,2,20),mat);
    var pointer = new THREE.Mesh(new THREE.BoxGeometry(10,2,2),mat);
    
    car.add(body);
    car.add(pointer);
    pointer.position.x = 5;
    
    return car;
}

function init(){
	clock = new THREE.Clock();
    scene = new THREE.Scene();
    
    camera = new THREE.PerspectiveCamera(50,window.innerWidth/window.innerHeight,1,1000);
	camera.position.z = 500;
    scene.add(camera);
    
    var gridXZ = new THREE.GridHelper(200,20,'red','white');
    scene.add(gridXZ);
    
    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth,window.innerHeight);
    renderer.setClearColor(0x888888);
    
    controls = new THREE.OrbitControls(camera,renderer.domElement);
    controls.enableKeys = false;
    document.body.appendChild(renderer.domElement);
    
    power = 5.0;
    angle = 0.0;
    
    car = buildVehicle();
    scene.add(car);
}

function update(dt){
	keyboard.update();
    
    if(vel.length() > 0){
    	angle = Math.atan2(-vel.z,vel.x);
    }
    
    if(keyboard.pressed("space"))
    	power = 0.1;
    if(keyboard.pressed("up"))
    	power *= 1.2;
    if(keyboard.pressed("down"))
    	power /= 1.2;
        
    power = Math.clamp(power,0,80.0);
    
    var angle_thrust = angle;
   	
    if(keyboard.pressed("left"))
    	angle_thrust += 0.3;
    if(keyboard.pressed("right"))
    	angle_thrust -= 0.3;
        
    var thrust = new THREE.Vector3(1,0,0).multiplyScalar(power).applyAxisAngle(new THREE.Vector3(0,1,0),angle_thrust);
   ...