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

相关推荐
liangshanbo121519 分钟前
写好 React useEffect 的终极指南
前端·javascript·react.js
哆啦A梦15882 小时前
搜索页面布局
前端·vue.js·node.js
_院长大人_3 小时前
el-table-column show-overflow-tooltip 只能显示纯文本,无法渲染 <p> 标签
前端·javascript·vue.js
哆啦A梦15884 小时前
axios 的二次封装
前端·vue.js·node.js
阿珊和她的猫4 小时前
深入理解与手写发布订阅模式
开发语言·前端·javascript·vue.js·ecmascript·状态模式
yinuo4 小时前
一行 CSS 就能搞定!用 writing-mode 轻松实现文字竖排
前端
snow@li5 小时前
html5:拖放 / demo / 拖放事件(Drag Events)/ DataTransfer 对象方法
前端·html·拖放
爱看书的小沐5 小时前
【小沐杂货铺】基于Three.js渲染三维风力发电机(WebGL、vue、react、WindTurbine)
javascript·vue.js·webgl·three.js·opengl·风力发电机·windturbine
浪裡遊6 小时前
Nivo图表库全面指南:配置与用法详解
前端·javascript·react.js·node.js·php
漂流瓶jz7 小时前
快速定位源码问题:SourceMap的生成/使用/文件格式与历史
前端·javascript·前端工程化