AR702

by j91157j91157

HTML

<!DOCTYPE html>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<div id="info">
  <button id="jmchen" style="width:20%">Jmchen</button>
  <button id="sunny" style="width:20%">Sunny</button>
</div>

CSS

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

body {
  overflow: hidden
}

JavaScript

var renderer, camera, controls, scene;
var target, rotating = 0;
var alpha = 0, alphaP1 = 0, alphaP2 = 0;
var pos1, pos2, pos3, pos4;
var pos1_s, pos2_s, alpha_s = 0;
var toggle_j = false, toggle_s = false;
var line_j, line_s;

init();
animate();

$('#jmchen').click (function() {
	alpha = 0;
  alphaP1 = 0;
  alphaP2 = 0;
  target.visible = true;
	toggle_j = !toggle_j;
  if(toggle_s) toggle_s = false;
})

$('#sunny').click (function() {
	alpha_s = 0;
  target.visible = true;
	toggle_s = !toggle_s;
  if(toggle_j) toggle_j = false;
})

function init() {

  renderer = new THREE.WebGLRenderer({
	  antialias: true
	});
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor(0x888888);
  

  camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.set(0, 8, 10)  // important

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

  scene = new THREE.Scene();
  
  var ambientLight = new THREE.AmbientLight( 0x888888 );
	scene.add( ambientLight );

	var light = new THREE.PointLight( 0xffffff, 1, 100 );
	light.position.set( 0, 50, 25 );
	scene.add( light );
  
  var gridXZ = new THREE.GridHelper(10, 10, 'red', 'white');
  scene.add(gridXZ);
  
  var axes = new THREE.AxisHelper(100);
  scene.add(axes);
  
  var aou = build702();
  //scene.add (unitize (aou, 100));
  scene.add (aou);
}

function animate() {
	///////////這裡有問題//////////////
	if (alpha > 3) {
  	alpha = 0;
    alphaP1 = 0;
    alphaP2 = 0;
  }
  
  alpha += 0.01;
  
	var pp = pos1.clone();
  
  if(alpha < 1) pp.lerp(pos2, alpha);
  else if(alpha >= 1 && alpha < 2){
    alphaP1 += 0.01;
    pp = pos2.clone();
    pp.lerp(pos3, alphaP1);
  }
  else if(alpha >= 2 && alpha < 3){
  	alphaP2 += 0.01;
  	pp = pos3.clone();
    pp.lerp(pos4, alphaP2);
  }
  //////////////////////////////
  alpha_s += 0.01;
  if (alpha_s > 1) alpha_s = 0;
    
  var ppp = pos1_s.clone();
 ...