<html>
<head>
<meta charset="UTF-8">
<title>lesson1-by-shawn.xie</title>
<!--引入Three.js-->
<script src="../build/three.min.js"></script>
<script type="text/javascript">
//開啓Three.js渲染器
var renderer; //聲明全局變量（對象）
function initThree() {
width = document.getElementById('canvas3d').clientWidth; //獲取畫布「canvas3d」的寬
height = document.getElementById('canvas3d').clientHeight; //獲取畫布「canvas3d」的高
renderer = new THREE.WebGLRenderer({ antialias: true }); //生成渲染器對象（屬性：抗鋸齒效果爲設置有效）
renderer.setSize(width, height); //指定渲染器的高寬（和畫布框大小一致）
document.getElementById('canvas3d').appendChild(renderer.domElement); //追加 【canvas】 元素到 【canvas3d】 元素中。
renderer.setClearColorHex(0xFFFFFF, 1.0); //設置canvas背景色(clearColor)
}
//設置相機
var camera;
function initCamera() {
camera = new THREE.PerspectiveCamera(45, width / height, 1, 5000); //設置透視投影的相機,默認情況下相機的上方向爲Y軸，右方向爲X軸，沿着Z軸朝裏（視野角：fov 縱橫比：aspect 相機離視體積最近的距離：near 相機離視體積最遠的距離：far）
camera.position.x = 0; //設置相機的位置座標
camera.position.y = 50; //設置相機的位置座標
camera.position.z = 100; //設置相機的位置座標
camera.up.x = 0; //設置相機的上爲「x」軸方向
camera.up.y = 1; //設置相機的上爲「y」軸方向
camera.up.z = 0; //設置相機的上爲「z」軸方向
camera.lookAt({ x: 0, y: 0, z: 0 }); //設置視野的中心座標
}
//設置場景
var scene;
function initScene() {
scene = new THREE.Scene();
}
//設置光源
var light;
function initLight() {
light = new THREE.DirectionalLight(0xff0000, 1.0, 0); //設置平行光源
light.position.set(200, 200, 200); //設置光源向量
scene.add(light); // 追加光源到場景
}
//設置物體
var sphere;
function initObject() {
sphere = new THREE.Mesh(
new THREE.SphereGeometry(20, 20), //width,height,depth
new THREE.MeshLambertMaterial({ color: 0xff0000 }) //材質設定
);
scene.add(sphere);
sphere.position.set(0, 0, 0);
}
//執行
function threeStart() {
initThree();
initCamera();
initScene();
initLight();
initObject();
renderer.clear();
renderer.render(scene, camera);
}
</script>
<style type="text/css">
div#canvas3d{
border: none;
cursor: move;
width: 1400px;
height: 600px;
background-color: #EEEEEE;
}
</style>
</head>
<body οnlοad='threeStart();'>
<!--盛放canvas的容器-->
<div id="canvas3d"></div>
</body>
</html>three.js入門2
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.