Three JS改变相机属性&模型打组----(3)

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第3天，点击查看活动详情 >

改变相机的朝向

默认状态下场景内的相机lookAt我们场景的中心点(0,0,0),当我们想让某个模型位于场景的中心时,可以设置相机lookAt某个模型就可以实现

// 相机lookAt某个指定的点
camera.lookAt(new THREE.Vector3(3,0,0))
// 相机朝向某个模型
 camera.lookAt(mesh.position)

解决相机lookAt失效的情况

有些人在场景中设置了lookAt但是好像并没有效果,此时应该检查场景中是否引入了控制器,如果场景中添加了控制器OrbitControls，想要改变相机的聚焦点设置camera.lookAt()是无效的，需要改变控制器的target属性;

// 如我的场景中使用了轨道控制器,此时的lookAt是失效的
const  controls= new OrbitControls( camera, renderer.domElement )
// ES6结构赋值 
 let {x,y,z} = mesh.position
 controls.target.set(x,y,z)

简单封装了一个创建几何体的方法

代码简单,只是懒得写冗余代码

/**
 * 根据类型创建几何体
 * @param shepType 创建几何体类型
 * @param materialParam 材质参数
 * @param shepParam 创建几何体参数
 * @returns {Mesh}
 */
createGeometryByType({shepType='BoxGeometry',materialParam,shepParam }){
    const shep = new THREE[shepType](...shepParam);
    const material = new THREE.MeshBasicMaterial(materialParam);
    return  new THREE.Mesh(shep,material)
}

模型打组

当我们需要对某一堆模型的位置,旋转,缩放进行统一的控制时,我们可以对模型进行打组操作,将模型加入同一个Group中,去改变Group的旋转,平移缩放的属性;

// 创建组
const group = new THREE.Group();
// 创建正方体1,2,3
let cube1 = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), new THREE.MeshBasicMaterial({ color: 'pink' }))
cube1.position.x = -2;
let cube2 = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), new THREE.MeshBasicMaterial({ color: 'blue' }))
let cube3 = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), new THREE.MeshBasicMaterial({ color: 'yellow' }))
cube3.position.x = 2;
// 将模型123添加进组中
group.add(cube1)
group.add(cube2)
group.add(cube3)
// 修改group的位置,被加入组中的模型的位置都向y+1了
group.position.y = 1;
// 将组添加进场景中
scene.add(group)

效果图