效果图：
我们先来看一下示例程序的基本骨架：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebGL渲染器入门示例</title>
<script src="https://cdn.bootcdn.net/ajax/libs/three.js/r99/three.min.js"></script>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<script>
</script>
</body>
</html>因为我们要在整个浏览器的内容区域里展示我们的示例程序，所以我们将body的margin设置成0。<script>标签用于存放Three.js代码。
接下来，我们要做的就是在<script>标签内编写Three.js代码。
我们定义了三个全局变量：
// 渲染器
var renderer;
// 场景
var scene;
// 摄像机
var camera;- 渲染器（Renderer）：场景的渲染方式，如webGL\canvas2D\Css3D。
- 场景（Scene）：是物体、光源等元素的容器。
- 相机（Camera）：场景中的相机，代替人眼去观察，场景中只能添加一个。
我们定义了一个初始化方法init()，会在页面加载完成后调用。
// 页面加载成功后调init()方法
window.onload = init;我们来看下init()方法的具体内容：
/**
* 初始化方法
*/
function init() {
scene = new THREE.Scene();
// 透视相机
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.x = 15;
camera.position.y = 16;
camera.position.z = 13;
camera.lookAt(scene.position);
renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0x000000, 1.0);
renderer.setSize(window.innerWidth, window.innerHeight);
var cubeGeometry = new THREE.BoxGeometry(10. * Math.random(), 10. * Math.random(), 10. * Math.random());
// 立方体材质：网格法线材质
var cubeMaterial = new THREE.MeshNormalMaterial();
// 网格模型：立方体
var cute = new THREE.Mesh(cubeGeometry, cubeMaterial);
scene.add(cute);
document.body.appendChild(renderer.domElement);
renderer.render(scene, camera);
}完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebGL渲染器入门示例</title>
<script src="https://cdn.bootcdn.net/ajax/libs/three.js/r99/three.min.js"></script>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<!-- three.js代码 -->
<script>
// ########## 全局变量 ##########
// 渲染器
var renderer;
// 场景
var scene;
// 摄像机
var camera;
/**
* 初始化方法
*/
function init() {
scene = new THREE.Scene();
// 透视摄像机
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.x = 15;
camera.position.y = 16;
camera.position.z = 13;
camera.lookAt(scene.position);
renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0x000000, 1.0);
renderer.setSize(window.innerWidth, window.innerHeight);
var cubeGeometry = new THREE.BoxGeometry(10. * Math.random(), 10. * Math.random(), 10. * Math.random());
// 立方体材质：网格法线材质
var cubeMaterial = new THREE.MeshNormalMaterial();
// 网格模型：立方体
var cute = new THREE.Mesh(cubeGeometry, cubeMaterial);
scene.add(cute);
document.body.appendChild(renderer.domElement);
renderer.render(scene, camera);
}
// 页面加载成功后调init()方法
window.onload = init;
</script>
</body>
</html>官网地址：https://threejs.org/docs/index.html
本文暂时没有评论，来添加一个吧(●'◡'●)