创建一个场景
为了真正能够让你的场景借助three.js来进行显示，我们需要以下几个对象：场景、相机和渲染器，这样我们就能透过摄像机渲染出场景。 three.js里有几种不同的相机，在这里，我们使用的是PerspectiveCamera（透视摄像机）。
第一个参数是视野角度（FOV） 。视野角度就是无论在什么时候，你所能在显示器上看到的场景的范围，它的单位是角度(与弧度区分开)。
第二个参数是长宽比（aspect ratio） 。 也就是你用一个物体的宽除以它的高的值。比如说，当你在一个宽屏电视上播放老电影时，可以看到图像仿佛是被压扁的。
接下来的两个参数是近截面（near）和远截面（far）。 当物体某些部分比摄像机的远截面远或者比近截面近的时候，该这些部分将不会被渲染到场景中。或许现在你不用担心这个值的影响，但未来为了获得更好的渲染性能，你将可以在你的应用程序里去设置它。
接下来是渲染器。这里是施展魔法的地方。除了我们在这里用到的WebGLRenderer渲染器之外，Three.js同时提供了其他几种渲染器，当用户所使用的浏览器过于老旧，或者由于其他原因不支持WebGL时，可以使用这几种渲染器进行降级。
/**
* 创建一个场景
* 1. 需要创建 场景 相机 渲染器 这三个对象
*/
const scene = new THREE.Scene(); // 场景
const camera = new THREE.PerspectiveCamera( // PerspectiveCamera 透视相机
// 视野角度 : 在显示器上能够看到的场景范围, 单位是角度
75,
// 长宽比 : 一个物体的宽 除以他的高
window.innerWidth / window.innerHeight,
// 近截面 near
0.1,
// 远截面 far
1000
); // 相机
const renderer = new THREE.WebGLRenderer(); // 渲染器
// 设置渲染器尺寸
// 可以设置为一半降低性能消耗
// setSize第三个参数updateStyle设为false, 将以一般的分辨率渲染, 但是程序尺寸不变
renderer.setSize(window.innerWidth, window.innerHeight);
// 将渲染器的显示场景放到html
document.body.appendChild(renderer.domElement);
const geometry = new THREE.BoxGeometry(); // 创建几何体
const material = new THREE.MeshBasicMaterial({ color: 0x00ff20 }); // 添加材质
const cube = new THREE.Mesh(geometry, material); // 创建立方体 网格 几何体 mesh材质
scene.add(cube); // 物体被添加到(0,0,0) 坐标
// 为了避免物体和相机重叠, 移动一下相机
// z轴 值越小距离物体越近
// 调节相机位置 可以从不同角度看见物体
camera.position.z = 2;
camera.position.x = 2;
camera.position.y = 2;
// 循环渲染
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
