~~~
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Threejs-</title>
<style>
* { margin: 0; padding: 0}
html, body { width: 100%; height: 100%; }
</style>
</head>
<body>
<script src="https://cdn.bootcss.com/three.js/r73/three.min.js"></script>
<script>
var scene = new THREE.Scene(); // 新建一個場景
var camera = new THREE.PerspectiveCamera( 75, 800 / 450, 0.1, 1000 ); // 進行遠景投影的相機。
// 遠景投影，也稱之為透視投影。這個是我們人眼觀察世界的模式
var renderer = new THREE.WebGLRenderer();
// WebGL渲染器使用WebGL來繪制您的場景，如果您的設備支持的話。使用WebGL將能夠利用GPU硬件加速從而提高渲染性能。
// 這個渲染器比 Canvas渲染器(CanvasRenderer) 有更好的性能。
renderer.setSize( 800, 450 ); // 調整輸出canvas尺寸（寬度，高度）
renderer.setClearColor( 0xff7300, 0.5 ); // 設置背景顏色
var canvasObject = renderer.domElement; // 獲得渲染對象
document.body.appendChild( canvasObject ); // 將渲染對象添加到頁面中
var geometry = new THREE.BoxGeometry( 1, 2, 1 );
// BoxGeometry是四邊形的幾何模型類。它通常用于創建具有“寬度”、“高度”和“深度”參數的立方體或不規則四邊形模型。
var material = new THREE.MeshBasicMaterial( { color: 0x03a9f4 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
var render = function () {
requestAnimationFrame( render );
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
};
render();
</script>
</body>
</html>
~~~
