Three.js设置相机lookAt无效

Three.js设置相机lookAt无效

原因:代码中使用了OrbitControls轨道控件来控制相机,这个目标默认为THREE.Vector3(),也就是(0, 0, 0)世界坐标的原点。使用camera.lookAt会无效。

源代码片段:

typescript 复制代码
//创建相机
const camera = new THREE.PerspectiveCamera(
    80, //视角
    widthofelement / heightofelement, //宽高比
    0.1, //近距离
    1000 //远距离
)

//相机位置,z轴为朝向自己的方向,y轴为垂直方向
camera.position.set(-7, 13, -7)
// 设置相机朝向的位置
camera.lookAt(100, 0, 100) // <----!!!此处无效!!!
const controls = new OrbitControls(camera, renderer.domElement);

//渲染函数
function animate() {
    controls.update()
    //调用animate
    requestAnimationFrame(animate) //异步函数
    //渲染
    renderer.render(scene, camera)
}

animate()

解决方法:

camera.lookAt(100, 0, 100)改为:

typescript 复制代码
controls.target = new THREE.Vector3(100, 0, 100)

这篇博文写的很详细:

https://blog.csdn.net/ithanmang/article/details/82735273

相关推荐
喜欢你,还有大家21 分钟前
FTP文件传输服务
linux·运维·服务器·前端
该用户已不存在24 分钟前
你没有听说过的7个Windows开发必备工具
前端·windows·后端
Bi36 分钟前
Dokploy安装和部署项目流程
运维·前端
普通网友37 分钟前
前端安全攻防:XSS, CSRF 等防范与检测
前端·安全·xss
携欢40 分钟前
PortSwigger靶场之Reflected XSS into attribute with angle brackets HTML-encoded通关秘籍
前端·xss
小爱同学_44 分钟前
React知识:useState和useRef的使用
前端·react.js
再学一点就睡1 小时前
双 Token 认证机制:从原理到实践的完整实现
前端·javascript·后端
wallflower20201 小时前
滑动窗口算法在前端开发中的探索与应用
前端·算法
蚂蚁绊大象1 小时前
flutter第二话题-布局约束
前端
龙在天1 小时前
我是前端,scss颜色函数你用过吗?
前端