map

by omgazero

HTML

<div id="info">
  map
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/96/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js">
</script>

CSS

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

body {
  overflow: hidden;
}

JavaScript

var frame, scene, light, camera, renderer, controls;
var roadtexture = 'https://i.imgur.com/wMuVCEo.jpg';

init();
animate();

function init() {
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor(0x888888);
  document.body.appendChild(renderer.domElement);

  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 10000);
  camera.position.y = 1000;
  camera.position.z = 100;

  controls = new THREE.OrbitControls(camera, renderer.domElement);


  light = new THREE.DirectionalLight( 0xFFFFFF , 1);
  scene.add(light);
  
  
 /* var gridXZ = new THREE.GridHelper(500, 20, 'red', 'white');
  scene.add(gridXZ);*/
  frame = createMap();
  frame.rotation.x = -Math.PI/2;
 	scene.add(frame);
}

function animate() {
  
  requestAnimationFrame(animate);
  render();
  
}

function render() {

  renderer.render(scene, camera);
}

function createMap(){
	let map = new THREE.Object3D();
	
  let loader = new THREE.TextureLoader();
  loader.crossOrigin = '';
  let roadtex = loader.load(roadtexture);
	let roadmat = new THREE.MeshPhongMaterial({
  	map: roadtex
  })
  
  let road1 = createRoad(15);
  map.add(road1);
  

  let road2 = createRoad(15);
  road2.position.y -= 300;
  road2.rotation.z = Math.PI;
  map.add(road2);
  
  let road3 =  createRoad(5);
  road3.position.y -= 150;
  road3.position.x += 170;
  road3.rotation.z = -Math.PI/2;
  map.add(road3);
  
  let crossroad1 = createCrossRoad();
  map.add(crossroad1);
  
  let crossroad2 = crossroad1.clone();
  crossroad2.position.x += 750;
  map.add(crossroad2);
  
  
  let road4 = createRoad(15);
  road4.position.x += 750;
  map.add(road4);
  
  let road5 = createRoad(15);
  road5.position.copy( road2.position );
  road5.rotation.copy( road2.rotation );
  road5.position.x += 750;
  map.add(road5);  
  
  let road6 = createRoad(10);
  road6.position.copy( road1.position );  
  road6.position.x +=...