1.鼠标操作三维场景旋转、移动和缩放

使用THREE的OrbitControls控件，可以实现鼠标控制三维图形的操作。主要是通过监听鼠标操作，控制相机的三维参数。

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

const render = () => {
  renderer.render(scene,camera);
  requestAnimationFrame(render);
}

render();
new OrbitControls(camera,renderer.domElement);

鼠标左键，控制旋转
鼠标中建，控制缩放
鼠标右键，控制移动

2.场景中添加新的三维图形

可以通过创建不同的mesh添加到场景中的方式，来添加不同的图形到同一个场景中。

const geometry = new THREE.BoxGeometry(100,100,100); // 创建一个立方体几何对象
const material = new THREE.MeshLambertMaterial({
  color:0x0000ff,
  specular:0x4488ee,
  shininess:12
}); // 材质对象material
const mesh = new THREE.Mesh(geometry,material); // 网格模型对象Mesh
scene.add(mesh);

const geometry1 = new THREE.SphereGeometry(60,40,40); //创建一个球体几何对象 
const material1 = new THREE.MeshLambertMaterial({
  color: 0x0000ff,
})
const mesh1 = new THREE.Mesh(geometry1,material1);
mesh1.translateY(120);
scene.add(mesh1);

然后会得到这样的效果：

这里是一些其他的图形的实现代码：

//长方体 参数：长，宽，高
var geometry = new THREE.BoxGeometry(100, 100, 100);
// 球体 参数：半径60  经纬度细分数40,40
var geometry = new THREE.SphereGeometry(60, 40, 40);
// 圆柱  参数：圆柱面顶部、底部直径50,50   高度100  圆周分段数
var geometry = new THREE.CylinderGeometry( 50, 50, 100, 25 );
// 正八面体
var geometry = new THREE.OctahedronGeometry(50);
// 正十二面体
var geometry = new THREE.DodecahedronGeometry(50);
// 正二十面体
var geometry = new THREE.IcosahedronGeometry(50);

3.设置材质效果

（1）常见材质：

材质属性	简介
color	材质颜色，比如蓝色0x0000ff
wireframe	将几何图形渲染为线框。默认值为false
opacity	透明度设置，0表示完全透明，1表示完全不透明
transparent	是否开启透明，默认false

（2）常用材质类型：

材质类型	功能
MeshBasicMaterial	基础网格材质，不受光照影响的材质
MeshLambertMaterial	Lambert网格材质，与光照有反应，漫反射
MeshPhongMaterial	高光Phong材质,与光照有反应
MeshStandardMaterial	PBR物理材质，相比较高光Phong材质可以更好的模拟金属、玻璃等效果