（三）Threejs基础-通过帮助文档创建立方体、轨道控制器、坐标轴辅助器

1、文档使用、基础环境配置

1）创建本地ThreeJS文档示例环境：
https://blog.youkuaiyun.com/donglaoxie/article/details/127840254
2）初始化ThreeJS项目：
https://blog.youkuaiyun.com/donglaoxie/article/details/127877036

2、创建立方体、轨道控制器、坐标轴辅助器

main.js

//导入threejs框架
import * as THREE from "three"
//导入轨道控制器 允许相机围绕着目标对象旋转
import {OrbitControls} from "three/examples/jsm/controls/OrbitControls"

//创建场景 threejs对象及对象位置的渲染是在场景中完成的，场景中可渲染配置对象、灯光、相机
onst scene=new THREE.Scene();

//2创建相机 perspective projection 模拟人眼所看到的景象，它是3D场景的渲染中使用得最普遍的投影模式。详见第3部分相机类型
const camera=new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000);

//3设置相机位置 详见第3部分其它相机位置说明
camera.position.set(0,0,10)

//4添加相机到场景
scene.add(camera);


//5场景中添加物体
const geometry= new THREE.BoxGeometry( 1, 1, 1);
const material= new THREE.MeshBasicMaterial({color: 0xffff00});
const cube=new THREE.Mesh(geometry,material);
scene.add(cube);

//6初始化渲染器
const renderer=new THREE.WebGLRenderer();

//7设置渲染的尺寸大小
renderer.setSize(window.innerWidth,window.innerHeight);

//8将webgl渲染的canvas内容添加到body
document.body.appendChild(renderer.domElement);

//9创建轨道控制器
const controls=new OrbitControls(camera,renderer.domElement);
//10创建辅助坐标轴
const axesHelper=new THREE.AxesHelper(5);
scene.add(axesHelper);

//11使用渲染器，通过相机将场景渲染进来
renderer.render(scene,camera);

3、其它

1）相机类型：

2）相机的位置说明：机相对于世界坐标系原点的位置，换句话说相机距离场景中心的距离。距离越近看到的物体越少越大，距离越远看到的物体越多越小。