1.用threejs创建几何体的步骤

操作流程

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()