Three.js中camera的lookAt函数与OrbitControls冲突

最新推荐文章于 2025-06-21 22:45:12 发布

Arururururu

最新推荐文章于 2025-06-21 22:45:12 发布

阅读量6.5k

点赞数 8

CC 4.0 BY-SA版权

分类专栏： WebGL+Three.js

本文链接：https://blog.youkuaiyun.com/unirrrrr/article/details/80692267

今天想把整个场景往下沉一点，想要照相机也跟着沉，于是设置了

camera.lookAt(new THREE.Vector3(0, -1000, 0));

结果发现视角并没有发生改变，在网上查了一下发现是与three.js的OrbitControls控件有关系，
在OrbitControls的源代码中可以看到，camera的lookAt对象被更改了：

THREE.OrbitControls = function ( object, domElement ) {
   
   
...
// "target" sets the location of focus, where the object orbits around
this.target = new THREE.Vector3();
...
var

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Arururururu

关注关注

8
点赞
踩
16

收藏

觉得还不错? 一键收藏
7
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Three.js引擎开发：Three.js渲染技术_（18）.Three.js的开发工具与调试技巧

chenlz2007的博客

06-16

1172

在Three.js开发过程中，使用合适的开发工具和调试技巧可以显著提高开发效率和项目质量。本节重点介绍了VSCode、Chrome DevTools、Three.js Inspector和Webpack等工具的使用方法，以及一些常见的调试技巧和实战案例。希望这些内容能帮助你在Three.js开发中更好地解决问题，提升项目的性能和效果。通过这些工具和技巧，你可以更高效地进行Three.js开发，确保项目在各种平台和设备上都能正常运行。

1️⃣7️⃣three.js_OrbitControls相机控制器

sharkhzj的专栏

05-02

1942

Controls” 表明它是一个输入控制系统，将用户操作（鼠标/触摸）转换为相机运动。

7 条评论您还未登录，请先登录后发表或查看评论

three.js camera.lookAt不起作用的原因

gisfun.xyz

03-10

5862

1、问题描述在场景中添加了一个PlaneGeometry来实现草地效果时，使用camera.lookAt(mesh.position)使相机看向mesh的位置，初始化后相机方向正确，能看向mesh的中心点，但是当拖动场景后，相机又看向了场景坐标原点。代码如下： var geometry = new THREE.PlaneGeometry(4000, 4000); //矩形平面 // 加载树纹理贴图 var texture = new THREE.TextureLoader().load(".

OpenGL学习笔记（七）：Camera 摄像机（视图变换、LookAt矩阵、Camera类的实现）

qq_39281631的博客

02-03

1896

渲染流程中，视图变换实际上是在对摄像机做变换。OpenGL本身没有摄像机Camera的概念，我们通过把场景中的所有物体向相反的方向移动来模拟出摄像机，并抽象出Camera类。

Three.js 基础入门：Scene、Camera 和 Render 详解

最新发布

qq_52623552的博客

06-21

761

Three.js 的场景、相机和渲染器构成了 3D 应用的基础框架。理解这三者的关系和工作原理是掌握 Three.js 的关键。通过本文的学习，你应该已经掌握了：如何创建和配置场景各种相机的特点和使用场景渲染器的设置和优化技巧完整的 Three.js 基础实现。

Three.js设置相机lookAt无效

weixin_44223180的博客

10-30

2392

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

ThreeJS相机camera位置属性

丰空岛主(Vega Prime,Android,LabWindows,ThreeJS,Python,OpenCV）

12-03

3899

开始很懵，完全不能理解，有个position，还要up和lookAt干嘛。既然是位置属性不明白，那默认其它属性都懂了。上坐标轴：先来第一个position属性，可以设置xyz。假设设置y为 1000 position(0,1000,0); 相机的位置是下图：单独设置xz轴都和以上类似，位置z或者x轴某个位置。那lookAt，字面上的意思就是，看向哪里。相机默认是由正z轴看像-z轴（相机镜头对着-z轴方向拍），就是我们由屏幕外向屏幕内看一样。 camera.l...

Three.js使用OrbitControls（控制器）后修改相机旋转方向无效问题

Define_best的博客

12-25

2860

Three.js使用OrbitControls（控制器）后修改相机旋转方向无效问题

通过相机动画案例了解threejs 相机Camera.lookAt()方法

u014291990的博客

12-13

1564

下面给大家讲解，通过相机对象Camera的.position属性和.lookAt()方法，实现一段相机动画。

Three.js相机Camera控件知识梳理

xichji的专栏

12-17

1676

在透视投影中，物体的大小会随着距离的增加而减小，这使得远离相机的物体看起来更小，符合现实世界中的透视效果。OrbitControls本质上就是改变相机的参数，比如相机的位置属性，改变相机位置也可以改变相机拍照场景中模型的角度，实现模型的360度旋转预览效果，改变透视投影相机距离模型的距离，就可以改变相机能看到的视野范围。较小的视角值则会产生更窄的视野和更低的畸变。课件案例源码是一个工厂模型，相机在空中俯视工厂，如果在渲染循环中不停地改变相机位置，这时候产生的视觉效果，就好比你在天上运动，看地面的效果。

Three.js camera.lookAt设定视角初始值无效

10-19

Three.js 中，`camera.lookAt()` 函数用于设置相机的朝向，使其看起来指向特定的位置。当你在初始化场景时，如果直接设置 `camera.lookAt()` 的初始值无效，可能是以下几个原因： 1. **未设置目标位置**：确保你在...

three.js 相机camera的up和lookAt详解

flame_007的博客

03-11

1万+

three.js相机的设置很重要。甚至牵涉到缩放，旋转等动画的应用，下面就up和lookAt的用法做下解释：先来说说position属性，就是设置相机的位置，而位置设置后相机看向哪里呢？默认情况下，是由正z轴看像-z轴（相机镜头对着-z轴方向拍），就是我们由屏幕外向屏幕内看一样。如果不设置lookAt，相机看向的就是position的z值垂直向里看的方向。如果设置了lookAt，比...

three.js：关于相机position,up,lookAt理解~~~

热门推荐

qq_42206266的博客

06-04

1万+

最近对three.js突然感兴趣，搜了一些相关教程准备自学成才，但是发现关于相机的一些属性设置，教程写的还是比较模糊的，理解起来感觉有些困难。不多说先上代码：为了便于理解，先手绘了一个三维坐标系，然后更改相应的参数，来进行理解： let scene = new THREE.Scene(); let camera = new THREE.Pe...

threejs camera.lookAt()的作用

redrun博客

01-29

2049

threejs camera.lookAt()的作用 // 传入的是观察对象元素的位置 camera.lookAt(group.position) 显示效果会将放入的元素的位置持续置为坐标中心

threejs修改camera的lookAt无效怎么办

lmchhh的博客

11-28

3376

前几天想移动camera实现漫游效果，结果发现camera总是朝着原点坐标方向，然后我修改lookAt为其他坐标 let v = new THREE.Vector3(100, 0, 100) camera.lookAt(v) 结果camera的朝向还是（0,0,0）后来在网上找到原因，原来是我在页面上使用了controls控件，影响了照相机camera的使用，我在页面上使用了DragControls和TrackballControls，所以我直接修改代码 let v = new THREE.Vector

Three.js——十五、Box3、相机动画、lookAt()视线方向、管道漫游案例、OrbitControls旋转缩放限制、以及相机控件MapControls

NanChen的博客

07-17

2671

正投影相机和透视相机的区别如果都以高处俯视去看整个场景，正投影相机就类似于 2d 的可视化的效果，透视相机就类似于人眼观察效果如果你想整体预览全部立方体，就需要调整相机的渲染范围，比如设置上下左右的范围。使用场景：正投影可以用来预览中国地图，或者 2D 可视化的效果透视投影相机一般是人在场景用漫游，或者高俯视整个就是将整个模型的所有顶点包裹起来形成一个长方体，此长方体就是 Box3 改变相机的位置.position，三维场景在 canvas 画布上呈现不同的效果，如果连续改变相机的位置.positi

图形化开发（五）041-Three.js之Camera相机——target焦点和lookAt()方法、OrthographicCamera正交相机、PerspectiveCamera透视相机、相机插件

weixin_44867717的博客

09-11

3815

图形化开发（五）041-Three.js之Camera相机——target 焦点属性和lookAt()方法、OrthographicCamera 正交相机、PerspectiveCamera 透视相机、相机插件-OrbitControls Camera相机相机是Three.js抽象出来的一个对象，使用此对象，我们可以定义显示的内容，并且可以通过移动相机位置来显示不同的内容。下面讲解一下Three.js中的相机的通用属性和常用的相机对象。我们常用的相机正交相机(OrthographicCamera)和透

Threejs 关闭轨道控制器（OrbitControls）后无法正常渲染

Yokattasama的博客

10-25

659

THreejs 关闭轨道控制器后无法看到内容

Three.js的DragControls和OrbitControls实现互斥

hard_reward的博客

08-07

1787

Three.js的DragControls和OrbitControls实现互斥有这么一个问题，我们对一个场景加入了OrbitContrils，而且对一组物体加入了DragControls，当我们拖动物体的时候，场景也会同时被拖动，也就是OrbitContrils和DragControls同时生效了。这篇文章就是来解决这个问题的。直接上代码。 //拖拽控制器 function initDragControl() { //这里是给dots这一个对象数组加入了一个拖拽控制器