看結果：
看源碼及解釋：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First Scene</title>
<style type="text/css">
body { /*移除所有的滾動條*/
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="WebGL-output"></div>
<script type="text/javascript" src="./libs/three.js"></script>
<script>
var scene = new THREE.Scene(); // 場景容器, 用來保存並跟蹤所有我們想渲染的物體
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); // 相機變量, 我們能夠在渲染好的場景scence里看到什么
var renderer = new THREE.WebGLRenderer(); // 渲染器對象, 負責計算指定相機角度下瀏覽器中scene的樣子
renderer.setClearColorHex(0xEEEEEE); // 將renderer對象的背景色設置為0xEEEEEE
renderer.setSize(window.innerWidth, window.innerHeight); // 讓renderer對象將scene渲染成多大尺寸
var axes = new THREE.AxisHelper(20); // axes坐標軸對象
scene.add(axes); // 把坐標軸添加到場景中去
var planceGeometry = new THREE.PlaneGeometry(60, 20); // PlaneGeometry: 翻譯 平面幾何 (參數: 寬60, 高20)
var planeMaterial = new THREE.MeshBasicMaterial({ color: 0xcccccc }); // MeshBasicMaterial: 翻譯 基礎網格材質 (用來設置平面的外觀, 顏色，透明度等)
var plane = new THREE.Mesh(planceGeometry, planeMaterial); // 把這2個對象合並到一個名為plane(平面)的Mesh(網格)對象中
plane.rotation.x = -0.5*Math.PI; // 繞x軸旋轉90度
plane.position.x = 15; // 平面坐標位置
plane.position.y = 0;
plane.position.z = 0;
scene.add(plane); // 將平面添加到場景
var cubeGeometry = new THREE.CubeGeometry(4, 4, 4); // Geometry: 翻譯 立方體幾何
var cubeMaterial = new THREE.MeshBasicMaterial({ color: '#12B7F5', wireframe: true }); // 立方體是0xff0000顏色 wireframe： 線框屬性設置為true
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial); // 把立方體和他的外觀合並一下
cube.position.x = -3; // 立方體的坐標位置
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); // lookAt函數指向場景的中心
document.querySelector('#WebGL-output').appendChild(renderer.domElement); // 把canvas添加到指定的dom中
renderer.render(scene, camera); // 使用渲染器渲染
</script>
</body>
</html>