創建一個靜態三維場景
- 博主新手一枚，學習過程中必定有許多理解錯誤之處，博客主要用於幫助記錄自己所學內容，如有錯誤，懇請大神們批評指出。
- 博主自學機械工業出版社《Three.js開發指南》，本文部分代碼參考此書。
效果圖
![這裏寫圖片描述]()
完整代碼及註釋
<!DOCTYPE html>
<html>
<head>
<title>Three.js學習筆記</title>
<script type="text/javascript" src="js/three.js"></script>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="WebGL-output">
</div>
<script type="text/javascript">
function init() {
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1,500);
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(0xFFEC8B, 0.5));
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMapEnabled = true;
var axes=new THREE.AxisHelper(80);
scene.add(axes);
var planeGeometry = new THREE.PlaneGeometry(100, 100);
var planeMaterial = new THREE.MeshLambertMaterial({color: 0XD1EEEE});
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.receiveShadow = true;
plane.rotation.x = -0.5 * Math.PI;
plane.position.x = 15;
plane.position.y = 0;
plane.position.z = -5;
scene.add(plane);
var cubeGeometry = new THREE.BoxGeometry(6, 6, 6);
var cubeMaterial = new THREE.MeshLambertMaterial({color: 0XF0E68C});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.castShadow = true;
cube.position.x = 0;
cube.position.y = 10;
cube.position.z = 0;
scene.add(cube);
var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
var sphereMaterial = new THREE.MeshLambertMaterial({color: 0x7777ff});
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphere.position.x = 20;
sphere.position.y = 4;
sphere.position.z = 2;
sphere.castShadow = true;
scene.add(sphere);
camera.position.x = -40;
camera.position.y = 30;
camera.position.z = 40;
camera.lookAt(scene.position);
var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-40, 80, -10);
spotLight.castShadow = true;
scene.add(spotLight);
document.getElementById("WebGL-output").appendChild(renderer.domElement);
renderer.render(scene, camera);
}
window.onload = init;
</script>
</body>
</html>
說明
<script type="text/javascript" src="js/three.js"></script>
在我的html文件的同一目錄下有一個js文件夾，在此文件夾裏有本次實驗所需要的three.js。在調用js文件時，一定要注意引用路徑的正確。雖然簡單，但新手往往在此出錯。- Three.js有兩種類型的相機:正投影相機（THREE.OrthographicCamera）和透視相機（THREE.PersepectiveCamera）
透視相機，一種較爲自然的視圖。相同的物體，距離相機越遠，被渲染的越小。
正投影相機，對象和相機之間的距離不會影響渲染的結果，相同物體，無論遠近，大小相同。
