<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Tween</title>
<!--請去網上下載-->
<script type="text/javascript" src="js/three.js"></script>
<script type="text/javascript" src="js/Tween.js"></script>
<style type="text/css">
div#canvas-frame {
border: none;
cursor: pointer;
width: 100%;
height: 600px;
background-color: #EEEEEE;
}
</style>
</head>
<body onload="threeStart()">
<div id="canvas-frame"></div>
<script>
//1.渲染器
var renderer;
function initThree() {
width = document.getElementById('canvas-frame').clientWidth;
height = document.getElementById('canvas-frame').clientHeight;
//渲染器
renderer = new THREE.WebGLRenderer({
antialias : true
});
renderer.setSize(width, height);
document.getElementById('canvas-frame').appendChild(renderer.domElement);
renderer.setClearColorHex(0xFFFFFF, 1.0);
}
//2.相機
var camera;
function initCamera() {
//90爲90度視角
camera = new THREE.PerspectiveCamera(90, width / height, 1, 10000);
camera.position.x = 0;
camera.position.y = 0;
camera.position.z = 800;
camera.up.x = 0;
camera.up.y = 1;
camera.up.z = 0;
//相機的視野中心
camera.lookAt({
x : 0,
y : 0,
z : 0
});
}
//3.場景
var scene;
function initScene() {
scene = new THREE.Scene();
}
//4.燈光
var light;
function initLight() {
//方向光
light = new THREE.DirectionalLight(0xFF0000, 0.5);
light.position.set(100, 100, 200);
scene.add(light);
//點光源
light = new THREE.PointLight(0xFF0000);
light.position.set(10,0,300); //放的位置
scene.add(light);
//環境光
light = new THREE.AmbientLight(0x00FF00);
light.position.set(100, 100, 200);
scene.add(light);
}
//5.物體
var cube;
var mesh;
function initObject() {
//幾何體
var geometry = new THREE.CylinderGeometry(100,150,400);
//var geometry = new THREE.Bezier(1,1);
//使用材質 蘭伯特材質
var material = new THREE.MeshLambertMaterial({color:0xFF0000});
//Mesh 幾何體 材質
mesh = new THREE.Mesh(geometry,material);
mesh.position = new THREE.Vector3(0,0,0); //點位置
scene.add(mesh);
}
//6.開始
function threeStart() {
initThree();
initCamera();
initScene();
initLight();
initObject();
initTween();
animation();
}
/*****Tween.js******/
//1.渲染聲明
function initTween(){
new TWEEN.Tween(camera.position).to({x:300,y:400},3000).repeat(Infinity).start();
}
//2.函數重複執行
function animation(){
renderer.render(scene,camera);
requestAnimationFrame(animation);
TWEEN.update();
}
</script>
</body>
</html>