Three.js大场景camera相机控制/OrbitControls升级修改/threejs以鼠标为中心的场景相机

已于 2022-09-05 22:23:42 修改
阅读量2.3k 收藏 5
点赞数
分类专栏： web3d三维可视化 文章标签： javascript Three.js OrbitControls threejs的相机控制器
于 2022-09-05 21:44:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hlfkyo/article/details/126714013
版权

        做Three.js三维可视化场景一般使用OrbitControls相机控制器。这个控制器实现了完整的平移、旋转和缩放等基本功能。提高了开发效率，省去了直接操控相机camera的麻烦，但是也有一定的缺点：


1、我们有时候需要灵活的主动控制相机，比如实现Three.js场景的路径漫游，就需要OrbitControls把相机控制权暂时的交出来，我们人为的控制一段时间，等漫游功能结束后再转交给OrbitControls操控；


2、OrbitControls的缩放和旋转功能都是以屏幕为中心进行，有很多应用场景无法满足用户的需求。我们只能是自己开发定制一个全新的newOrbitControls。下面是一个OrbitControls升级定制的案例，视频-->请欣赏：

Three.js大场景相机控制器/OrbitControls升级版/threejs以鼠标为中心的场景相机控制

gisOrbitControls实现了：

1、重写Three.js的OrbitControls相机控制器

2、以鼠标所在位置为中心的场景旋转操控

3、以鼠标所在位置为中心的场景缩放

4、平移效果与Three.js默认平移相同

5、如果场景中有被选中的物体，则以所选中物体的中心为旋转基点(视频中未展示)

6、相机缩改可穿透物体，距离越近缩放越慢

7、可添加到threejs、Babylonjs、opengl、directX、osg等其它可视化引擎程序中


技术栈：threejs、opengl、osg、forge、cesium、CAD/Revit/3dMax开发、bim/gis、gltf/glb/fbx/3dtiles大场景数据的程序生成处理;欢迎交流与和作；

hlfkyo
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
three.js轨道控制器OrbitControls.js
Bruce_wjh的博客
11-19 4万+
学习交流欢迎加群：789723098，博主会将一些demo整理共享 轨道控制器OrbitControls.js是一个相当神奇的控件，用它可以实现场景用鼠标交互，让场景动起来，控制场景的旋转、平移，缩放，下面介绍轨道控制器的代码实现方式： //添加轨道控制器 //新建一个轨道控制器 orbitControls = new THREE.OrbitControls(camera, rende...
THREEJS OrbitControls核心功能解读
三维网格
12-20 5921
OrbitControls是THREEJS中最常用的一个控制器，可以帮助我们实现以目标为焦点的旋转缩放，同时平移相机观察场景的操作，看上去是物体在进行变换，实际上所有的变化都是相机的相对位置在发生改变。今天就给大家讲解该空间实现的核心源码以及实现原理。
ThreeJS:坐标辅助器与轨道控制器
最新发布
席木木的博客
05-02 989
ThreeJS:坐标辅助器与轨道控制器，介绍ThreeJS的坐标系定义，以及如何使用坐标辅助器与轨道控制器。
threejs 相机OrbitControls常用方法及属性
c_qianxia5040的博客
05-18 3027
可以对三维场景进行缩放、平移、旋转，本质上改变的不是场景，而是相机的参数，相机的位置角度不同，同一个场景的渲染效果是不一样，比如相机围绕着一个场景旋转，就像场景旋转一样。在实际应用中，想控制一个产品缩放范围, 可以通过相机空间OrbitControls的.minZoom和.maxZoom属性实现。展示一个三维场景，控制360度旋转范围，比如一辆轿车，不希望用户看到轿车的底盘，你可以通过设置相机的旋转范围属性来实现。属性控制上下360度的旋转范围。属性控制左右360度的旋转范围。
Three.js相机控件OrbitControls
u014291990的博客
10-30 2872
Three.js相机控件OrbitControls 通过Three.js的相机控件OrbitControls.js可以对Threejs的三维场景进行缩放、平移、旋转操作，本质上改变的并不是场景，而是相机的参数，通过前面的学习应该知道，相机的位置角度不同，同一个场景的渲染效果是不一样，比如一个相机绕着一个场景旋转，就像场景旋转一样。 如果你想深入了解相机控制器OrbitControls的每一个功能，...
threejs顶点——3、顶点法向量光照计算
u012758488的博客
02-22 777
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>顶点法向量光照计算</title> <style> body { margin: 0; overflow: hidden; /* 隐藏body窗口区域滚动条 */ } </style> <!--.
Three.js利用orbit controls插件（轨道控制）控制模型交互动作详解
10-19
主要给大家介绍了关于Three.js利用orbit controls插件，也就是轨道控制来控制模型交互动作的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
camera-controls:三.js 的相机控件，类似于 THREE.OrbitControls 但支持平滑过渡和更多功能
08-04
一个用于three.js 的相机控件，类似于THREE.OrbitControls，但支持平滑过渡和更多功能。 例子 相机移动 默认用户输入（可配置） 轨道旋转 鼠标左键拖动/触摸：单指移动 多莉 鼠标中键拖动，或鼠标滚轮/触摸：两指...
three.js室内场景+模型第三人称行走demo
05-21
three.js室内场景+模型第三人称行走demo 跟随模型的第三人称相机控制，以键盘wasd控制模型的行走，以鼠标控制模型的朝向。 具体效果参见：https://blog.csdn.net/u014529917/article/details/106610955
three.js多相机技术
03-17
由于一个渲染器（renderer）对应一个相机（camera），当需要多个视图时会消耗大量内存； 故在此封装了一个在单个渲染器上使用多个相机展示不同视图内容的DEMO,大大减少了功耗； 内涵代码和思路文档
Three.js3D场景编辑器（vue3版本）
10-18
构建的three.js3D场景编辑器。支持场景导入，导出。自定义配置。 导出的文件支持https://www.npmjs.com/package/scene-view。解析器解析渲染。 目前为纯前端单机版。 当前文件为打包后文件，可自己启动服务进行查看...
threeJS-object-controls:ThreeJS模块，可让您独立于场景的其余部分旋转对象（网格），并放大移动相机
05-27
ThreeJS对象控件 ThreeJS模块，可让您独立于场景的其余部分旋转对象（网格），并放大/缩小移动相机。 安装 npm install --save threejs-object-controls 用法 import * as THREE from 'three'; import {ObjectControls} from 'threeJS-object-controls'; 创建一个新的Controls实例，使用passig 3个参数： 相机 渲染器元素 移动的网格 var controls = new ObjectControls(camera, renderer.domElement, myMesh); （查看index.html文件以查看用法示例，或检查以查看Angular的npm用法示例） 您也可以更改要旋转的网格！ :party_popper: ，然后单击右侧面板上的“ useMe
WebGL/ThreeJS 相机控件OrbitControls.js和性能控件/stats.min.js 使用案例
11-29
WebGL/ThreeJS 相机控件OrbitControls.js和性能控件/stats.min.js 使用案例
threejs 相机控制camera-controls鼠标和触摸
qq_62787048的博客
01-15 1193
three.js 的相机控件，类似于 THREE。更新相机位置和方向。这应该在滴答循环中调用，如果需要重新渲染，则返回。旋转方位角 （theta） 和极角 （phi）。是 anim 或不在布尔值中的位置。将方位角 （theta） 和极角 （phi） 旋转到给定点。推车进/出摄像机位置。它将相机移动到 中，并使其看起来。使用当前方位角的卡车和基座摄像机。与 相同，但它在两种状态之间插值。没有目标，就一直盯着当前的目标。将所有旋转和位置重置为默认值。没有位置，保持原地不动。将位置移动到给定点。
Three.js搭配OrbitControls.js实现flyTo()
qq_38206656的博客
02-22 2152
需求：较为简单，对3D场景进行OrbitControls自带的拖动缩放功能。在自写一个点击具体3D物体拉近相机的功能，也就是flyTo()。 flyTo()是一个动画过程，（想要线上了解效果的可以参考cesium的效果，链接地址Cesium Sandcastle，我认识这个函数名也是在cesium中） 1.引入OrbitControls，这个步骤为简单，不在详细说明。我使用的是vue项目。 //在script中引入orbitcontrols import {OrbitControls} from.
ThreeJS-轨道控制器(二)
以爱护甲,爱满枫林。
03-29 482
/requestAnimationFrame的回调函数只会被调用一次，所以需要被重新赋值。//使用控制器控制3D拖动旋转OrbitControls。//将webgl渲染的canvas内容添加到body上。//使用渲染器，通过相机将场景渲染进来。//渲染下一帧的时候就会调用回调函数。//根据几何体和材质创建物体。//创建轨道控制器，可以拖动。//将相机添加到场景。//将物体加入到场景。//添加坐标轴辅助器。//设置渲染器的尺寸。
Vue里面使用threeJS 的 OrbitControls报错问题
weixin_48203356的博客
11-04 1886
Vue里面使用threeJS 的 OrbitControls 报TypeError: array[i].call is not a function
Three.js使用OrbitControl制作鸟瞰效果时的模型旋转角度问题
Deck_的博客
12-02 1385
three.js使用OrbitControls时通过模拟鼠标操作的方式实现模型初始化的旋转角度调整
Three.js 中的 OrbitControls 是一个用于控制相机围绕目标旋转以及缩放、平移等操作的控制器。
qq_37030315的博客
03-24 1718
Three.js 中的是一个用于控制相机围绕目标旋转以及缩放、平移等操作的控制器。
three.js 相机可以由鼠标控制
06-13
是的，three.js 中可以通过鼠标控制相机的位置和朝向，这可以通过引入 `OrbitControls` 来实现。`OrbitControls` 是 three.js 中一个常用的控制器，可以通过鼠标控制相机的位置、朝向和缩放等操作。下面是一个简单的示例代码： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Three.js 相机鼠标控制示例</title> <style> body { margin: 0; padding: 0; } canvas { width: 100%; height: 100%; } </style> </head> <body> <script src="https://cdn.jsdelivr.net/npm/three@0.131.0/build/three.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/three/examples/js/controls/OrbitControls.js"></script> <script> // 初始化场景、相机、渲染器 const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // 添加一个立方体 const geometry = new THREE.BoxGeometry(); const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); const cube = new THREE.Mesh(geometry, material); scene.add(cube); // 添加光源 const light = new THREE.PointLight(0xffffff, 1, 100); light.position.set(0, 0, 10); scene.add(light); // 添加鼠标控制 const controls = new THREE.OrbitControls(camera, renderer.domElement); // 渲染循环 function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); } animate(); </script> </body> </html> ``` 在这个示例中，我们首先初始化了场景、相机和渲染器，并添加了一个立方体和一个光源。接着，我们引入了 `OrbitControls`，并使用 `OrbitControls` 创建了一个控制器 `controls`，将相机和渲染器传入。最后，我们开启了渲染循环，并在循环中调用 `renderer.render` 方法和 `controls.update` 方法。这样，我们就实现了通过鼠标控制相机的功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值