webGL,Three.js初识 欢迎大家一起参与讨论...
<!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>