HW00 1008

by joe chan

HTML

<!DOCTYPE html>
<html>
<head>
<style>
body {
	overflow: hidden
}
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/104/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.min.js"></script>

</body>

</html>

JavaScript

var renderer, scene, camera;
var controls;
var cube,train;
var angle=0;  //初始值

init();
animate();

function init () {
	renderer = new THREE.WebGLRenderer();
	document.body.appendChild (renderer.domElement);
	var width = window.innerWidth;
	var height = window.innerHeight;
	renderer.setSize (width, height);

	renderer.setClearColor (0x888888);

	scene = new THREE.Scene();
	var grid = new THREE.GridHelper(10,1, 0x112233, 0x112233);
	scene.add (grid);
	var axes = new THREE.AxisHelper (5);
	scene.add (axes);

	camera = new THREE.PerspectiveCamera (35, width/height, 1, 100);
	camera.position.y = 16;
	camera.position.z = 40;
	camera.lookAt (new THREE.Vector3(0,0,0));

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

	window.addEventListener('resize', onWindowResize, false);
	///////////////////////////////////////////////////////////////////
	var cubeGeometry = new THREE.BoxGeometry (1.5,0.5,3);
	var cubeMaterial = new THREE.MeshNormalMaterial();
	cube = new THREE.Mesh (cubeGeometry, cubeMaterial);								//車體
	var circularGeometry = new THREE.CylinderGeometry( 0.45, 0.45, 0.9 , 32 );//圓柱
	circular = new THREE.Mesh (circularGeometry , cubeMaterial  );
	train = new THREE.Object3D();
	cube.position.y=0.25;
	cube.position.x=9;
	circular.position.x=9;
	circular.position.y=0.875;
	circular.position.z=-1
	train.add(cube);
	train.add(circular);
	scene.add (train);
}


function onWindowResize() {
	var width = window.innerWidth;
  var height = window.innerHeight;
  camera.aspect = width / height;
  camera.updateProjectionMatrix();
  renderer.setSize(width, height);

}

function animate() {

	angle-=0.01;
	//train.position.set(9*Math.cos(angle) ,0 ,9*Math.sin,(angle) );
	train.rotation.y= -angle;
	/* controls.update() */;
	requestAnimationFrame(animate);
	render();

}
function render() {
	renderer.render(scene, camera);
}