实现第一个three.js程序
1.目标效果
注意一个版本问题：three.js版本并不稳定，几乎每个月都会更新一个小版本，尽可能使用固定版本进行开发，事实上我们入门的话，只掌握其中一个版本即可，如果使用新版本，需要查看新版本与旧版本的差异。这里使用96dev版本：
下载地址：https://download.csdn.net/download/qq_44849312/89884271
2.认识三大组建
在Three.js中，要渲染物体到网页中，我们需要3个组建：场景（scene）、相机（camera）和渲染器（renderer）。有了这三样东西，才能将物体渲染到网页中去。
相关代码如下
var scene = new THREE.Scene(); // 场景
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);// 透视相机
var renderer = new THREE.WebGLRenderer(); // 渲染器
renderer.setSize(window.innerWidth, window.innerHeight); // 设置渲染器的大小为窗口的内宽度，也就是内容区的宽度
document.body.appendChild(renderer.domElement);
场景：
场景是所有物体的容器，如果要显示一个苹果，就需要将苹果对象加入场景中。
在Threejs中场景就只有一种，用THREE.Scene来表示，要构件一个场景也很简单，只要new一个对象就可以了，代码如下：
let scene = new THREE.Scene();
相机：
另一个组建是相机，相机决定了场景中那个角度的景色会显示出来。相机就像人的眼睛一样，人站在不同位置，抬头或者低头都能够看到不同的景色。
let camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
渲染器：
最后一步就是设置渲染器，渲染器决定了渲染的结果应该画在页面的什么元素上面，并且以怎样的方式来绘制。这里我们定义了一个WebRenderer渲染器，代码如下所示：
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
3.一个基础的three.js程序
一个最简单的three.js程序需要由以下几个步骤：
1.创建dom节点，用来放置three.js场景
2.创建场景scene
3.创建相机camera
4.创建渲染器renderer
5.渲染器挂载到dom节点中
6.通过动画帧函数requestAnimationFrame执行渲染
7.在场景中加入物体
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
body{
margin: 0;
padding: 0;
overflow-y: hidden;
overflow-x: hidden;
}
</style>
<script src="../three.js-master/build/three.js"></script>
</head>
<body>
<div id="three" style="width: 100%;height: 100%;"></div>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.querySelector("#three").appendChild(renderer.domElement);
var geometry = new THREE.CubeGeometry(1,1,1);
var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
function render() {
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
renderer.render(scene, camera);
requestAnimationFrame(render);
}
render();
</script>
</body>
</html>
视频演示：https://www.bilibili.com/video/BV1jRm3YQEGk/?vd_source=0f4eae2845bd3b24b877e4586ffda69a