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

相关推荐
蜗牛快跑2131 分钟前
面向对象编程 vs 函数式编程
前端·函数式编程·面向对象编程
Dread_lxy2 分钟前
vue 依赖注入(Provide、Inject )和混入(mixins)
前端·javascript·vue.js
涔溪1 小时前
Ecmascript(ES)标准
前端·elasticsearch·ecmascript
榴莲千丞1 小时前
第8章利用CSS制作导航菜单
前端·css
奔跑草-1 小时前
【前端】深入浅出 - TypeScript 的详细讲解
前端·javascript·react.js·typescript
羡与1 小时前
echarts-gl 3D柱状图配置
前端·javascript·echarts
guokanglun1 小时前
CSS样式实现3D效果
前端·css·3d
咔咔库奇1 小时前
ES6进阶知识一
前端·ecmascript·es6
渗透测试老鸟-九青2 小时前
通过投毒Bingbot索引挖掘必应中的存储型XSS
服务器·前端·javascript·安全·web安全·缓存·xss
龙猫蓝图2 小时前
vue el-date-picker 日期选择器禁用失效问题
前端·javascript·vue.js