1.threejs 创建一个场景

// 场景、相机和渲染器,这样我们就能透过摄像机渲染出场景

// 场景
var scene = new THREE.Scene();

// 透视摄像机PerspectiveCamera
// 第一个参数75 视野角度（FOV field angle of view） 视野角度就是无论在什么时候，
// 你所能在显示器上看到的场景的范围，它的值是一个角度
// 第二个值是长宽比（aspect ratio）。 也就是你用一个物体的宽除以它的高的比值。
// 比如说，当你在一个宽屏电视上播放老电影时，可以看到图像仿佛是被压扁的。
// 接下来的两个值是远剪切面和近剪切面。
// 也就是说当物体所在的位置比摄像机的远剪切面远或者所在位置比近剪切面近的时候，该物体超出的部分将不会被渲染到场景中。
var camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

// 渲染器
var renderer = new THREE.WebGLRenderer();

// setSize渲染器宽高
renderer.setSize(window.innerWidth, window.innerHeight);
// 可以如下将第三个参数设置为false，保持长宽，但是分辨率减半
// renderer.setSize(window.innerWidth / 2, window.innerHeight / 2, false);

// 我们将renderer（渲染器）的dom元素（renderer.domElement）添加到我们的HTML文档中
document.body.appendChild(renderer.domElement);

// BoxGeometry（立方体）对象. 这个对象包含了一个立方体中所有的顶点（vertices）和面（faces）
var geometry = new THREE.BoxGeometry();

// 一种材质
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

// Mesh（网格）包含一个几何体以及作用在此几何体上的材质，我们可以直接将网格对象放入到我们的场景中，并让它在场景中自由移动
var cube = new THREE.Mesh(geometry, material);

// scene.add()，物体将会被添加到(0,0,0)坐标
scene.add(cube);

// 移动摄像机。使其可以观察到立方体
camera.position.z = 5;

// 渲染循环 这段代码每帧都会执行（正常情况下是60次/秒）
var animate = function () {
  // 虽然的确可以用setInterval做渲染循环，但是，requestAnimationFrame有很多的优点
  // 最重要的一点或许就是当用户切换到其它的标签页时，它会暂停，因此不会浪费用户宝贵的处理器资源，也不会损耗电池的使用寿命
  requestAnimationFrame(animate);

  // 旋转立方体
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  renderer.render(scene, camera);
};

animate();

 当fov缩小时（红线），屏幕上的物体会变大