在正文的第一句加入“我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！”
我们先简单使用，three.js,首先需要创建一个物体，这里使用的是正方形，比较简单，我们需要创建一个场景，(大家可以把其想象成一个拍戏的一给场景)，想把看到的东西展示出来，需要有一个相机拍摄，我们还需要把我们创建的物体渲染出来,就需要一个渲染器，（这里我们需要，场景、相机、渲染器）
1 创建一个场景
// 创建场景
const scene = new THREE.Scene();
2创建一个相机
// 创建相机(透视相机)
const camera = new THREE.PerspectiveCamera(
75, // 摄像机角度
window.innerWidth/window.innerHeight, // 宽高比
0.1,// 最近位置
1000, // 最远位置
); //
// 相机位置
camera.position.set(0,0,10) // x y z
在three.js有很多种相机，在这里我们用到是PerspectiveCamera透视摄像机
需要传入4个参数 第一个参数 视野角度 相当于我们看东西的角度 第二个参数 宽高比 也就是你用一个物体的宽除以它的高的值， 第三个和第四个参数 近截面和远截面，当渲染物体的某个部分渲染的比远截面远或者近截面近的时候，这部分不会被渲染到场景中(不会被看到) 下面有一张示意图，可以看到视野角度，宽高比，远截面和近截面的示意图
这个在three的官网上也有demo，webgl_camera，
3 渲染器(把我们创建的东西渲染到页面上)
// 初始化渲染器
const renderer = new THREE.WebGL1Renderer();
// 设置渲染尺寸大小
renderer.setSize(window.innerWidth,window.innerHeight);
// 渲染器添加到canvas画布
document.body.appendChild(renderer.domElement) // 把body上追加
// 使用渲染器通过相机将场景渲染进来
renderer.render(scene,camera)
4 加入立方体
// 添加物体
const geometry = new THREE.BoxGeometry( 1, 1, 1 ); // 创建几何体
// 材质
const cun = new THREE.MeshBasicMaterial({
color: 0xfff000
}) // 基础材质
// 根据几何体和材质创建物体
const cube = new THREE.Mesh(geometry,cun)
// 将几何体添加到场景中
scene.add(cube);
下面是代码块
