homework6

by Millieyan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/84/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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.min.js">
</script>

CSS

body {
    overflow: hidden
}

JavaScript

var renderer, scene, camera, controls,mesh,stats,clock;
var k=4;
var car;
var radius=60,time=0,omega=Math.PI*2/30;

init();
animate();

function buildVehicle() {
    var car = new THREE.Object3D();
    var mat = new THREE.MeshNormalMaterial();
    var body= new THREE.Mesh(new THREE.CylinderGeometry(6, 6, 2, 30), mat);
    car.add(body);
    var head= new THREE.Mesh(new THREE.BoxGeometry(12, 2, 3), mat);
    car.add(head);
    head.position.x = 7;
    return car;
}

function init() {
    scene = new THREE.Scene();
    clock = new THREE.Clock();
    
    stats = new Stats();
    stats.domElement.style.position = 'absolute';
    stats.domElement.style.top = '0px';
    stats.domElement.style.zIndex = 100;
    document.body.appendChild(stats.domElement);

    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
    camera.position.z = 200;
    camera.lookAt(new THREE.Vector3());

    var gridXZ = new THREE.GridHelper(200, 30, 'red', 'white');
    scene.add(gridXZ);
	gridXZ.rotation.x = Math.PI / 2;
    scene.add(new THREE.AxisHelper(80));

    renderer = new THREE.WebGLRenderer();
    document.body.appendChild(renderer.domElement);
    
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setClearColor(0x888888);
    controls = new THREE.OrbitControls(camera, renderer.domElement);
    controls.enableKeys = false;

    car = buildVehicle();
    car.rotation.x = Math.PI / 2;
    scene.add(car);

    if (k % 2 == 0) k *= 2;
}

function update() {

    time += clock.getDelta();
    
    var nextX = radius * Math.cos(k * omega * time) * Math.cos(omega * time);
    var nextY = radius * Math.cos(k * omega * time) * Math.sin(omega * time);


    var dx = -k * omega * Math.cos(omega * time) * Math.sin(k * omega * time) - omega * Math.sin(omega * time) * Math.cos(k * omega * time);

    var dy = -k * omega * Math.sin(omega * time) * Math.sin(k * omega * time) + omega * Math.cos(omega * time) * Math.cos(k * omega *...