Tire Assembly

by jmcjc5u

HTML

<div id="info">Textured Tire Assembly
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/94/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

#info {
    position: absolute;
    top: 1%;
    width: 100%;
    padding: 10px;
    text-align: center;
    color: #ffee12;
}

body {
    overflow: hidden;
}

JavaScript

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

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

function createTire() {
    let loader = new THREE.TextureLoader();
    loader.crossOrigin = '';

    let tireAssembly = new THREE.Object3D();
    let treadTex = loader.load("https://i.imgur.com/21rKfjX.jpg?2");
    treadTex.repeat.set(6, 1);
    treadTex.wrapS = THREE.RepeatWrapping;
    let treadMat = new THREE.MeshBasicMaterial({
        map: treadTex,
        side: THREE.DoubleSide
    });
    let geometry = new THREE.CylinderGeometry(10, 10, 5, 80, 2, true);
    let tread = new THREE.Mesh(geometry, treadMat);
    // parameters need to be set in initial instantiation  
    tireAssembly.add(tread);
    let tireTex = loader.load('https://i.imgur.com/jPX4y1n.png?1');
    let tireMat = new THREE.MeshBasicMaterial({
        map: tireTex,
        transparent: true,
        side: THREE.DoubleSide
    })
    let tire = new THREE.Mesh(new THREE.CircleGeometry(10, 80), tireMat)
    let tire1 = tire.clone();
    tireAssembly.add(tire1)
    tire1.rotation.x = -Math.PI / 2;
    tire1.position.y = 2.5;
    let tire2 = tire.clone();
    tire2.rotation.x = Math.PI / 2;
    tire2.position.y = -2.5;
    tireAssembly.add(tire2);
    tireAssembly.rotation.x = Math.PI / 2;
    return tireAssembly;
}

class FrontAxle{
	constructor(){
    	this.angle = 0.0;
    	this.vel = new THREE.Vector3();
        this.leftWheel = new createTire();
        this.rightWheel = new createTire();
        this.body = new THREE.Object3D();
        
        this.leftWheel.position.set(20, 10, -20);
        this.rightWheel.position.set(20, 10, 20);
        this.body.add(this.rightWheel,this.leftWheel);
    }
    
    update(dt,vel,speed){
    	this.vel = vel.clone();
    
        if(keyboard.pressed("A"))this.angle += 0.005;
        else if(keyboard.pressed("D"))this.angle -= 0.005;
        
   ...