![]()
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>canvas { width: 100%; height: 100% }</style>
<!--https://github.com/mrdoob/three.js/-->
<script src="js/three.js"></script>
</head>
<body>
<script>
function init() {
//核心6步驟：
//創建場景（scene）
//添加網格模型（mesh）
//添加燈光（light）
//添加相機（camera）
//創建渲染器（renderer）
//渲染（render）
//1、場景，注意大寫
var scene = new THREE.Scene();
//幾何模型（下面是立方體：長寬高）
var geometry=new THREE.BoxGeometry(100,100,100);
//蘭伯特材質:紅色
var meterial=new THREE.MeshLambertMaterial({color:0xff0000});
// var meterial=new THREE.MeshBasicMaterial({color:0xff0000});
//2、網格模型
var mesh=new THREE.Mesh(geometry,meterial); //給立方體布上啞光材質
//將創建好的網格模型添加到場景中
scene.add(mesh);
//3、添加燈光：白色的點光源
var light=new THREE.PointLight(0xffffff);
//設置光源的位置
light.position.set(300,400,200);
scene.add(light);
//4、創建相機模型：透視相機(視角寬度,近平面寬高比,最近距離,最遠距離)
var camera=new THREE.PerspectiveCamera(40,800/600,1,1000);
camera.position.set(150,150,200); //設定相機的位置
camera.lookAt(scene.position); //設定相機看向哪裏
//5、創建webGL渲染器
var renderer=new THREE.WebGLRenderer();
renderer.setSize(800,600); //設置canvas的長、寬
//如果要佈滿窗口就如下
// renderer.setSize(window.innerWidth, window.innerHeight);
//注意是renderer.domElement不是renderer,domElement
document.body.appendChild(renderer.domElement);
//6、渲染
renderer.render(scene,camera);
}
window.onload = init();
</script>
</body>
</html>
