操作流程
1.模型操作
生成几何体=》生成材质=》混合生成模型
生成模型=》添加到场景中
2.场景操作
生成场景（配置参数）=》模型导入场景
3.相机操作
生成相机=》添加控制器
4.渲染器操作
生成渲染器=》场景和相机添加到渲染器中=》简历与canvas的关联
5.动画模块
动画连续，相机，场景的更新控制
code
letwidth=window.innerWidth
,height=window.innerHeight
constcanvas=document.getElementById("three-canvas")
window.onload=resize
window.onresize=resize
functionresize(){
width=canvas.width=window.innerWidth
height=canvas.height=window.innerHeight
}
//创建立方体 网格体 没有单位
constgeometry=newTHREE.BoxBufferGeometry(1,3,5);
//基础简单材质
constmaterial=newTHREE.MeshNormalMaterial()
//实际的物体
constbox=newTHREE.Mesh(geometry,material)
//创建场景
constscene=newTHREE.Scene()
//将盒子添加到场景中
scene.add(box)
constlight=newTHREE.AmbientLight(0x404040,0.5);
scene.add(light);
//真实世界的相机
constcamera=newTHREE.PerspectiveCamera(75,width/height,0.01,1000)
//摆放相机：相机位置 相机朝向
camera.position.z=8
camera.lookAt(0,0,0)
//渲染器在构造的时候，是连接canvas的
constrenderer=newTHREE.WebGLRenderer({
canvas
})
renderer.setSize(width,height)
console.log(width,height)
functionanimation(){
requestAnimationFrame(animation)
//盒子旋转45°
box.rotation.x+=0.02
box.rotation.y+=0.06
//渲染器 将场景被相机拍摄到的内容渲染出来
renderer.render(scene,camera)
}
animation()
