hw1

by Leoooo

HTML

<div id="info">drive
 <br>
  <button id="toggle" style="width:20%">cammera</button>
</div>
<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://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="https://jyunming-chen.github.io/tutsplus/js/KeyboardState.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: #ffffff;
}

body {
  overflow: hidden;
}

JavaScript

var camera, scene, renderer;


var keyboard = new KeyboardState();
var clock;
var pos = new THREE.Vector3();
var vel = new THREE.Vector3();
var force = new THREE.Vector3();
var power, angle;
var box,road,sign,light1,light2,building,car,tire1,tire0; 
var turn=false,camera1,camera2;
var cameraHUD1, cameraHUD2, sceneHUD;

(function() {
  Math.clamp = function(val,min,max){
    return Math.min(Math.max(val,min),max);
    
  }})();
  
  $("#toggle").click(function() {
  turn = !turn;
});


init();
animate();

function buildroad()
{
  let part = new THREE.Object3D();
	let loader = new THREE.TextureLoader()
    loader.crossOrigin = '';
  var  texture = loader.load ( 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTJaidN4FCxRnWfGVrDfu4Uoj3BKz0OKQ4Y8Gr0MlMKoYU0-6S9' );
  var texture2=loader.load('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQcZHLFt_UYVt8NUtmrGRtJnq6scxzo6UFB3dogh_jK2IefMysq')
  var texture3=loader.load('https://img3.stockfresh.com/files/c/cherezoff/m/41/5468860_stock-photo-asphalt-road-texture-with-two-arrows-and-vertical-line.jpg')
// texture.repeat.set (1,0.4)
 texture.wrapS = texture.wrapT = THREE.WrapRepeating
  var road1= new THREE.Mesh (new THREE.PlaneGeometry(50,400), new THREE.MeshPhongMaterial({map:texture}))
  road1.rotation.x=-Math.PI/2
  road1.rotation.z=Math.PI/2
  road1.position.set(0,0.1,-105)
  //
   var road2= new THREE.Mesh (new THREE.PlaneGeometry(50,280), new THREE.MeshPhongMaterial({map:texture}))
  road2.rotation.x=-Math.PI/2
  road2.position.set(80,0.1,60)
  //
  var road3= new THREE.Mesh (new THREE.PlaneGeometry(30,255), new THREE.MeshPhongMaterial({map:texture2}))
   road3.rotation.x=-Math.PI/2
   road3.rotation.z=Math.PI/2
   road3.position.set(-72,0.2,10)
  //
    var road4= new THREE.Mesh (new THREE.PlaneGeometry(30,50), new THREE.MeshPhongMaterial({map:texture2}))
   road4.rotation.x=-Math.PI/2
   road4.rotation.z=Math.PI/2
   road4.position.set(130,0.2,10)
  //
   var road5= new THREE.Mesh (new...