~~~
<!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>
~~~
