test

test

by 蔡 育曄

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>

JavaScript

var renderer, camera, controls, scene;
var car;
var angle = 0;
init();
animate();

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

  camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.y = 150;
	
  controls = new THREE.OrbitControls(camera, renderer.domElement);

  scene = new THREE.Scene();
  
  var gridXZ = new THREE.GridHelper(100, 10, 'red', 'white');
  scene.add(gridXZ);
	
  var material = new THREE.MeshNormalMaterial();
	var carMesh = new THREE.Mesh(new THREE.CubeGeometry(5,4,5),material);
	carMesh.position.x = 7.5;
  car = new THREE.Mesh(new THREE.CubeGeometry(10,5,10),material);
  car.add(carMesh);
	scene.add(car);
  
  var a = new THREE.Vector3(4,5,6);
  var b = new THREE.Vector3(,1,0);
  console.log(a.projectOnPlane (b))
}

function animate() {
	angle+=0.01;
  car.position.set(-30*Math.cos(angle),2.5,30*Math.sin(angle));
  car.rotation.y = Math.PI/2 + angle;
  controls.update();
  renderer.render (scene, camera);

  requestAnimationFrame (animate);
}