threejs动态调整相机位置

这篇具有很好参考价值的文章主要介绍了threejs动态调整相机位置。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

本文实现的效果是,模型渲染出来后,根据用户点击模型的某部分,将相机定位到鼠标点击的位置,并放大
监听模型点击事件

this.renderer.domElement.addEventListener('click', this.modelMouseClick, false)

点击事件

// 模型的点击事件
 modelMouseClick( event ) {
     var raycaster = new THREE.Raycaster();
     var mouse = new THREE.Vector2();
     // 将鼠标位置归一化为设备坐标。x 和 y 方向的取值范围是 (-1 to +1)
     mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
     mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
     raycaster.setFromCamera(mouse, this.camera);

     const intersects = raycaster.intersectObjects(this.scene.children);
     // 根据它来判断点击的什么,length为0即没有点击到模型
     console.log(intersects.length ? intersects[0].object.name : intersects, 'intersects----->>>')
     if(intersects.length){
       this.handlePosition(intersects[0].object)
     }
 },

调整相机位置

// 动态调整相机位置
handlePosition(obj){
    let box3 = new THREE.Box3()
    box3.expandByObject(obj) // 计算模型包围盒
    let size = new THREE.Vector3()
    box3.getSize(size) // 计算包围盒尺寸
    let center = new THREE.Vector3()
    box3.getCenter(center) // 计算一个层级模型对应包围盒的几何体中心坐标
    function maxSize(vec3) {
        let max
        if (vec3.x > vec3.y) {
            max = vec3.x
        } else {
            max = vec3.y
        }
        if (max > vec3.z) {
        } else {
            max = vec3.z
        }
        return max
    }

    let max = maxSize(size) //包围盒长宽高中最大的一个值,用来表征模型的尺寸
    // 1.控制渲染范围,但是不要忘记相机位于模型包围盒之外
    this.camera.position.copy(center.clone().addScalar(max))
    // 2. 居中渲染:设置相机目标观察点,指向包围盒几何中心
    this.camera.lookAt(center)
    // 3.注意near和far尺寸控制
    this.camera.near = max * 0.1//最好和相机位置或者说包围盒关联,别设置0.1 1之类看似小的值
    this.camera.far = max * 300//根据相机位置和包围大小设置,把包围盒包含进去即可,宁可把偏大,不可偏小
    this.camera.updateProjectionMatrix()//渲染范围改变,注意更新投影矩阵
    this.controls.target.copy(center)
    this.controls.update()
},

不过此文的相机调整比较快、生硬,没有那种渐进式的感觉,哪位博主有更好的方法了请在下面留言哦文章来源地址https://www.toymoban.com/news/detail-759662.html

到了这里,关于threejs动态调整相机位置的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • threejs让模型始终面向相机

    需求:threejs导入3D模型,改变相机位置的同时,让模型始终面向相机。 实现方式:使用模型的lookAt()方法,设置模型lookAt的值 首次加载模型时,面向相机 相机云顶==运动时,模型面向相机

    2024年02月12日
    浏览(44)
  • 若依 vue前端 动态设置路由path不同参数 在页面容器里打开新页面(新路由),面包屑和标签页标题根据参数动态改变,面包屑多级标题,侧边栏对应菜单亮起

    因为是在vue源码的基础上进行修改,所以,就没有复制代码在文章上,采取的是截图对比源码和我修改的代码片段。要麻烦你们自己手敲了。 场景:在费用配置列表中,点击每一项的配置,都会在页面容器内部打开一个新页面,所以新页面的路径一样,根据传的参数不同,面

    2024年01月16日
    浏览(56)
  • Threejs进阶之十:让模型移动到鼠标点击的指定位置

    上一节中我们实现了物体沿指定轨迹移动的动画效果,这一节我们来实现让模型移动到鼠标点击的制定位置的动画效果。 先看下实现后的最终效果 要实现上面的动画效果,我们需要通过以下步骤来实现 我们需要监听鼠标的点击事件,获取鼠标点击点相对浏览器可视区域左上

    2024年02月09日
    浏览(57)
  • GIS融合之路(三)CesiumJS和ThreeJS相机同步

    同样在这篇文章开始前重申一下,山海鲸并没有使用ThreeJS引擎。但由于ThreeJS引擎使用广泛,下文中直接用ThreeJS同CesiumJS的整合方案代替山海鲸中3D引擎和CesiumJS整合。 系列传送门: 山海鲸可视化:GIS融合之路(一)技术选型CesiumJS/loaders.gl/iTowns? 山海鲸可视化:GIS融合之路(

    2024年02月08日
    浏览(39)
  • threejs 实现场景漫游效果(相机沿着自定义轨道移动)

    效果视频: Video_22-06-15_18-10-11 实现思路:先创建一条曲线curve作为运动路线,然后使用const points = curve.getPoints(n)方法将curve分成n-1段;我们可以通过points[n] 获取第n个点的坐标位置;将相机的位置设置为这个坐标,在动画中不断地修改n的值达到移动的效果;具体操作如下:

    2024年02月11日
    浏览(95)
  • threejs 相机控制camera-controls鼠标和触摸

    npm i camera-controls 官网地址:相机控制 - npm (npmjs.com) three.js 的相机控件,类似于 THREE。OrbitControls 还支持平滑过渡和 es6 导入。 相机移动 用户输入 轨道旋转 鼠标左键拖动/触摸:单指移动 多莉(变焦) 鼠标中键拖动,或鼠标滚轮/触摸:双指捏合或捏出 卡车(平底锅) 鼠标

    2024年01月24日
    浏览(41)
  • 【PlantUML】-类图-布局,如何改变元素位置

       PlantUML属于自动布局。掌握好,是一件利器,掌握不好,就会不知其所以然 。尤其在布局方面,因为它的布局可能会和你想的不太一样。本篇文章以例子为基础,简单地说几个在实际应用过程中摸索出来的原则。相信看完这篇文章(有示例),你就可以轻松驾驭PlantUML的

    2024年01月17日
    浏览(45)
  • Unity调整轴点的位置

    a、如果对象没有网格(确切地说是网格过滤器),则脚本只会相应地更改子对象的位置和旋转。 b、如果对象确实有网格,则脚本首先创建网格实例,通过更改其顶点、法线和切线来调整网格的轴点,最后相应地更改子对象的位置和旋转 2。如何更改对象的轴点,创建空的子

    2024年02月12日
    浏览(42)
  • idea上方工具栏调整位置

    一,点进去idea发现在上方的工具栏那里所有的工具都消失了,如下图所示,Tomcat服务器,包括安装的一些插件都不显示了 二,解决办法:可能是由于自己不小心点到了某个按钮,按照下图操作再把它设置一下就行了,点view–appearance–Navigation bar 三,点Toolbar会把工具栏位置

    2024年02月15日
    浏览(54)
  • echarts中饼图的tooltip根据鼠标位置改变弹出位置

    echarts中的tooltip.position属性配置参考  echarts配置手册 问题:使用echarts绘制饼图,tooltip的弹出位置会遮挡住图表。 需求:tooltip的弹出位置在饼图外圈,不遮挡图表内容,切根据鼠标的位置而改变。 解决方法:在tooltip的配置项中对position进行配置,使用回调函数实现tooltip弹

    2024年02月08日
    浏览(57)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包