threejs使用gui改变相机的参数
移动开发
2023-10-01 02:59:53
阅读次数: 0
调节相机远近角度
- 定义相机的配置:
const cameraConfg = reactive({ fov: 45 })
- gui中加入调节fov的方法
const gui = new dat.GUI();
const cameraFolder = gui.addFolder("相机属性设置");
cameraFolder.add(cameraConfg, "fov", 0, 100).name("修改相机远近").onChange((num) => {
camera.fov = num;
camera.updateProjectionMatrix();
});
- 实现效果
调节相机的位置
- 定义参数:
const cameraConfg = reactive({
fov: 45,
viewX: 0,
viewY: 20,
viewZ: 10
});
- 初始化相机,设置相机位置。
// 2、创建相机
const camera = new THREE.PerspectiveCamera(
cameraConfg.fov,
window.innerWidth / window.innerHeight,
0.25,
1000
);
camera.position.set(cameraConfg.viewX, cameraConfg.viewZ, cameraConfg.viewY);
- 加入gui的配置
const gui = new dat.GUI();
const cameraFolder = gui.addFolder("相机属性设置");
cameraFolder.add(cameraConfg, "viewX", -50, 50).name("修改视角-x").onChange((num) => {
cameraConfg.viewX = num;
camera.position.set(cameraConfg.viewX, cameraConfg.viewZ, cameraConfg.viewY);
});
cameraFolder.add(cameraConfg, "viewY", 0, 100).name("修改视角-y").onChange((num) => {
cameraConfg.viewY = num;
camera.position.set(cameraConfg.viewX, cameraConfg.viewZ, cameraConfg.viewY);
});
cameraFolder.add(cameraConfg, "viewZ", 0, 100).name("修改视角-z").onChange((num) => {
cameraConfg.viewZ = num;
camera.position.set(cameraConfg.viewX, cameraConfg.viewZ, cameraConfg.viewY);
});
- 最后的效果
转载自blog.csdn.net/weixin_38441229/article/details/132301275