為了快速入門threejs，學學threejs三大元件。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>threejs三大元件</title>
<script src="../js/three.js"></script>
</head>
<body>
<!-- threejs的API很長，有很多概念和術語，理解了這些概念和術語，才能更好的使用threejs。下圖簡單整理了一下這些概念：-->
<!--
第一元件
相機
第二元件
渲染器
第三元件
scene
場景用來容納圖形元素。場景相當於宇宙，而圖形元素就是星星，圖形元素只有新增到場景中，其座標、大小等才有意義。
相機的作用是定義可視域，即確定哪些圖形元素是可見的。
渲染器則負責用如何渲染出影象，是使用WegGL還是Canvas。
-->
<canvas id="cc"></canvas>
<script type="text/javascript">
// 建立一個場景，它將儲存我們所有的元素，如物體、照相機和燈光。
var scene = new THREE.Scene();
// 建立一個攝像機，它定義了我們所處的位置.
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
// 建立渲染並設定大小 指定渲染canvas物件
var renderer = new THREE.WebGLRenderer({canvas: document.querySelector("#cc")});
renderer.setClearColor(0xEEEEEE);
renderer.setSize(window.innerWidth, window.innerHeight);
//建立一個xyz座標軸，方便初學者理解三維座標
var axes = new THREE.AxisHelper( 20 );
scene.add(axes);
// 建立地面
var planeGeometry = new THREE.PlaneGeometry(60,20,1,1);
var planeMaterial = new THREE.MeshBasicMaterial({color: 0xcccccc});
var plane = new THREE.Mesh(planeGeometry,planeMaterial);
// 地面預設是垂直的。所以需要旋轉一下地面。
plane.rotation.x=-0.5*Math.PI;
plane.position.x=15
plane.position.y=0
plane.position.z=0
// 地面新增到場景裡面去
scene.add(plane);
// 建立一個立方體
var cubeGeometry = new THREE.CubeGeometry(4,4,4);
var cubeMaterial = new THREE.MeshBasicMaterial({color: 0xff0000, wireframe: true});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
// 設定立方體座標位置
cube.position.x=-4;
cube.position.y=3;
cube.position.z=0;
// 立方體放入場景
scene.add(cube);
// 建立一個球體
var sphereGeometry = new THREE.SphereGeometry(4,20,20);
var sphereMaterial = new THREE.MeshBasicMaterial({color: 0x7777ff, wireframe: true});
var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial);
//設定球體座標位置
sphere.position.x=20;
sphere.position.y=4;
sphere.position.z=2;
// 球體放入場景
scene.add(sphere);
//設定相機位置
camera.position.x = -30;
camera.position.y = 40;
camera.position.z = 30;
camera.lookAt(scene.position);
// 執行一次渲染器，GPU渲染成影象，繪製到canvas裡面呈現
renderer.render(scene, camera);
</script>
</body>
</html>