Three.js Primer

test

by 蔡 育曄

HTML

<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

body {
  overflow: hidden;
}

JavaScript

var renderer, camera, controls, scene;
var car,line;
var angle,alpha=0;
var pos1,pos2,quat1,quat2;
var index=0
init();
animate();

function buildCar() {
	let material = new THREE.MeshNormalMaterial();
	let base = new THREE.Mesh(new THREE.BoxGeometry(60,10,40),material);
  
  let head =new THREE.Mesh( new THREE.CylinderGeometry(10,10,20,32),material);
  head.position.set(20,15,0);
  base.add(head)
  base.position.y = 5;
  return  base;
}

function makeLine() {
  let dt = 0.002;
  let geometry = new THREE.Geometry();
  for(let t = 0; t <= 16;t++) {
    geometry.vertices.push (new THREE.Vector3(-80+10*t,5,50)); 
  }
  for(angle = -Math.PI/2;Math.abs(angle)<=Math.PI*1.5;angle-=0.1) {
  	geometry.vertices.push (new THREE.Vector3(80-50*Math.cos(angle),5,-50*Math.sin(angle))); 
  }
  for(let t = 0; t <= 16;t++) {
   geometry.vertices.push (new THREE.Vector3(80-10*t,5,-50)); 
  }
   while(Math.abs(angle)<=Math.PI*2.5) {
  	geometry.vertices.push (new THREE.Vector3(-80-50*Math.cos(angle),5,-50*Math.sin(angle)));
    angle-=0.1;
  }
  geometry.vertices.push (new THREE.Vector3(-80,5,50));
  let mat = new THREE.LineDashedMaterial ({color:0xffff00, dashSize: 3, gapSize: 3})
	return new THREE.Line(geometry, mat);
}

function walkingRoute(i) {
  var p = new THREE.Vector3();
  pos1.copy(line.geometry.vertices[i]);
  if(i+1 == line.geometry.vertices.length)
  	pos2.copy(line.geometry.vertices[0]);
  else
  	pos2.copy(line.geometry.vertices[i+1]);
  var oldDir =pos2.clone().sub(pos1).normalize();
	if(i+2 == line.geometry.vertices.length) {
  	p.copy(line.geometry.vertices[0]);
  } else {
 		p.copy(line.geometry.vertices[i+2]);
   }
  let newDir = p.sub(pos2).normalize();
  
  var localDir = new THREE.Vector3(1 ,0 ,0);
  
  quat1.setFromUnitVectors (localDir, oldDir);
 
  quat2.setFromUnitVectors (localDir, newDir);
  
}

function init() {
  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.setSize(window.innerWidth, window.innerHeight);
 ...