JSFiddle - React, Tailwind, and code Playground

by wayne6172

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/104/three.min.js"></script>
<script src="https://jyunming-chen.github.io/tutsplus/js/KeyboardState.js"></script>
<div id="main">
</div>
<div id="second">
</div>

CSS

body {
    overflow: hidden;
    margin: 0;
}

#main{
  position: absolute;
  width: 50vw;
}

#second{
  position: absolute;
  left: 50vw;
  width: 50vw;
}

JavaScript

var renderer, renderer2, scene, camera, keyboard = new KeyboardState();
var car, walls = [], wallSize = 10, mainCamera;
var cameraHelper;

class AnimateKey{
	constructor(){
    	this.start = null;
        this.end = null;
    }
    
    update(){
    	let move = this.end.clone().sub(this.start).multiplyScalar(0.08);
        
        console.log(this.start);
        console.log(this.start.clone().add(move));
       	move = this.start.clone().add(move);
        
        return move;
    }
}

class Car{
	constructor(camera){
    	this.body = this.buildBody();
        this.angle = 0;
		this.AnimateKey = new AnimateKey();
        
		this.camera = camera;
        camera.position.set(-70,20,0);     	
        this.body.add(camera);
        camera.lookAt(this.body.getWorldPosition(new THREE.Vector3()));
        
        scene.add(this.body);
    }
    
    buildBody(){
    	let A = new THREE.Mesh(new THREE.CylinderGeometry(5,5,5,64), new THREE.MeshNormalMaterial());
        let B = new THREE.Mesh(new THREE.BoxGeometry(10,5,5,64), new THREE.MeshNormalMaterial());
        
        B.position.set(5,0,0);
        A.add(B);
        
        return A;
    }
    
    update(){
    	keyboard.update();
        this.AnimateKey.start = this.camera.position.clone();
        
        if(keyboard.pressed('A')){
        	this.angle += 0.1;
        }
        if(keyboard.pressed('D')){
        	this.angle -= 0.1;
        }
        if(keyboard.pressed('W')){
        	this.body.position.add(new THREE.Vector3(1,0,0).applyAxisAngle(new THREE.Vector3(0,1,0), this.angle));
        }
        if(keyboard.pressed('S')){
        	this.body.position.add(new THREE.Vector3(-1,0,0).applyAxisAngle(new THREE.Vector3(0,1,0), this.angle));
        }
        
        this.body.rotation.y = this.angle;
        this.camera.position.set(-70,20,0);  

        let rayCaster = new THREE.Raycaster(this.camera.getWorldPosition(new THREE.Vector3()),this.body.position.clone().sub(this.camera.getWorldPosition(new...