模型导入到three.js后坐标不对

最新推荐文章于 2024-05-12 20:12:06 发布
最新推荐文章于 2024-05-12 20:12:06 发布
阅读量4.1k 收藏 2
点赞数
分类专栏： Threejs-Shader
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_21476953/article/details/107564261
版权
问题描述:

在3d作图软件模型正常,但是模型导入到three.js后坐标不对。具体表现在该模型的子模块位置不对。

可能原因:

  • 相机的坐标系和模型坐标系是否相同.（都是Y轴朝上？）
  • 模型的子模块的坐标系可能是相对的世界坐标系,需要设置子模块的坐标系为局部坐标系。

在这里插入图片描述

问题复现步骤:

世界坐标系下看, 模型圆锥的尖是朝上的:
在这里插入图片描述
但是局部坐标系下看, 圆锥模型的Y轴，这里设置的是朝下:
在这里插入图片描述
这样的话, 模型导入到three.js中就是朝下的。我们期待导入three.js中和3d模型编辑中看模型应该是一样的。
也就是说在3d软件中看模型正常,但是导入到three.js看就不正常了。
在这里插入图片描述
解决办法就是重新设置模型的局部坐标系,也就是轴心朝向。让局部坐标轴和世界坐标轴的朝向一致就行了。
在c4d 软件,如果要设置轴向,需要设置两个地方:
在这里插入图片描述

力博荣三维可视化
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
threejs学习（十一）非全屏canvas下，射线拾取坐标错位问题
干饭两斤半
01-28 1179
问题 在非全屏状态下，使用射线进行模型拾取，如果按照官方例子来做，会出现屏幕坐标转换三维坐标有误差，导致拾取模型错误； 非全屏canvas 解决方案 需要重新计算鼠标点击坐标位置 spriteClick: function (event) { event.preventDefault(); // 鼠标转换三维坐标 // this.mouse.x = (event.clientX / document.getElementById("other").offset
Three.js渲染GeoJSON.zip
07-13
在“ThreeGeoJSON-master”这个项目中，开发者可能已经封装了这些步骤，提供了一个简单的API，使得我们可以轻松地将GeoJSON数据导入到Three.js场景中。通过阅读源代码，我们可以学习到如何将复杂的地理数据有效地...
在Three.js中给导入的3D模型重新设置中心点
热门推荐
qq_35750405的博客
07-31 1万+
最近尝试做一个基于Three.js的3D模型的网页在线查看器，支持以下功能 1. 能够控制相机，旋转，拖拉缩放   （OrbitControls) 2. 能够移动导入的3D模型                  (TransformControls) 3. 相应的灯光和背景                           4. 导入obj+mtl模型，并将中心点设置在模
【Threejs进阶教程-算法篇】1.常用坐标系介绍与2d/3d随机点位算法
最新发布
qq_42760477的博客
05-12 1089
Threejs进阶教程，坐标系与随机数，本篇主要介绍了在开发中常用的几种坐标系，以及基于这些坐标系的随机算法
ThreeJS选中gltf进行单体化时，使用选中的mesh进行克隆，模型飞掉的问题
weixin_39823367的博客
05-21 891
ThreeJS选中gltf进行单体化时，使用选中的mesh进行克隆，模型飞掉的问题 原因有可能时group造成的，使用下面操作： res.object为选中的模型对象是mesh类。 var testlt=res.object.clone(); res.object.parent.children.push(testlt); //此处不可用，好像是因为group的原因。 // scene.add(testlt); ...
threejs更改z轴朝向问题，拖拽平时视图在xy轴平面
qq_190265950的博客
07-29 1286
threejs相机朝向问题，解决相机旋转平移围绕y轴改为z轴
threejs 模型 世界坐标系和设备坐标系
m0_52009348的博客
04-10 1959
开发中遇到需求需要点击屏幕位置处，生成一个类似圆形弹窗面板，这个交互需要进行的坐标转换为模型坐标（局部坐标）=>场景坐标（世界坐标）=>标准设备坐标=>屏幕空间坐标，也就是一个将3D坐标转换为2D坐标的过程，话不多说，上代码！
three.js导入glb/gltf模型
subsistent的博客
03-24 1017
【代码】three.js导入glb/gltf模型。
Blender Three.js 智慧3D机房开发 模型创建与导入中的常见问题与解决方案
qq_59060196的博客
03-17 4916
如果你遇到了在本文中没有出现的问题，欢迎评论或者私信我。
自己写的 three.js 导入模型 高德三维导入模型
05-02
2. **地图与Three.js结合**：为了将3D模型插入到高德地图中，我们需要获取地图的像素坐标与真实世界坐标之间的转换关系。高德地图API提供了getMapStatus接口获取当前地图状态，包括中心点、缩放级别等信息。 3. **...
three.js拖拽生成场景简单示例
09-06
在这个示例中，`index.html`会引入`threejs.js`和`OrbitControls.js`这两个JavaScript文件。`threejs.js`是three.js的核心库，提供了3D对象、光照、材质等元素的创建和管理功能；而`OrbitControls.js`是three.js的一...
three.js加载obj模型添加点击事件及其他
01-04
1. **导入three.js库**：确保在HTML文件中引入three.js库，可以通过CDN链接或者本地文件导入。 ```html <script src="path/to/three.js"> ``` 2. **创建场景、相机和渲染器**：这是three.js的基本配置。 ```...
Vue使用Three.js加载glTF模型的方法详解
11-20
7. **运行和交互**：现在，当Vue组件加载完成后，Three.js将自动渲染glTF模型，并且用户可以通过轨道控制器进行交互式查看。 通过以上步骤，你可以在Vue项目中成功地引入并显示glTF模型。记住，根据实际需求，你...
qt的three.js偶尔获取世界坐标不正确的问题
toTheUnknown的博客
12-12 1053
当一个object3D对象的position或者rotation发生变化时，使用object3D对象的getWorldPosition()返回的世界坐标可能不正确。因为three.js的相对坐标改变后世界坐标默认不会自动更新，而是到了渲染时才更新。 解决办法：在更改相对坐标后，如果要马上获取其世界坐标或者子对象的世界坐标，首先要调用object3D对象的updateMatrixWorld()强制...
Three.js 世界坐标转换屏幕坐标偏差问题
love and share
12-16 1518
/* world position to screen position * v3: Vector3 * camera: Camera * */ function wordPosToScreen(object,camera) { var vector = new THREE.Vector3(); var widthHalf = 0.5 * window.i...
three.js中坐标系转换以及camera的position、lookAt与up属性理解
weixin_50867227的博客
09-01 6745
three.js中坐标系转换以及camera的position、lookAt与up属性理解
threejs 世界坐标与屏幕坐标相互转换
01-18 3692
屏幕坐标转世界坐标: let pX = (screenPoint.x / this.scene.renderer.domElement.clientWidth) * 2 - 1; let pY = - (screenPoint.y / this.scene.renderer.domElement.clientHeight) * 2 + 1; //通过调用V...
ThreeJS基本坐标设置
丰空岛主(Vega Prime,Android,LabWindows,ThreeJS,Python,OpenCV）
12-04 4460
1 绘制基本的场景面板，XY平面绘制网格线，建立起基本的坐标。左右为为X轴，右为正；前后为Y轴，前为正；山下为Z轴，上为正。 2 ThreeJS中的点对象，比如：默认都用camera.lookAt(scene.position);其实，也可以自己修改：camera.lookAt(new THREE.Vector3(0, 0, 0)); 3 线条绘制： var geometryX = new THREE.Geometry(); geometryX...
ThreeJS 坐标系转化
Define_best的博客
07-28 2270
ThreeJS 坐标系转化（屏幕坐标与世界坐标互转）
Blender模型如何处理才能正确导入 Three.js
06-08
把Blender模型导入Three.js之前，需要进行一些处理，以确保模型能够正确导入并呈现。下面是一些常见的处理步骤： 1. 应用所有变换：确保在导出之前应用所有变换（旋转、缩放、平移等）。在Blender中，您可以按Ctrl+A键并选择“应用缩放/旋转/位置”来应用变换。 2. 确保模型的坐标系：Three.js使用右手坐标系，而Blender使用左手坐标系。因此，在导出之前，请确保将模型转换为右手坐标系。您可以在Blender中使用“选项”面板（N键）中的“转换”选项卡来转换坐标系。 3. 确保材质和纹理：在导出之前，请确保为模型设置了正确的材质和纹理。Three.js支持多种材质和纹理类型，但您需要确保它们与您的模型兼容。 4. 导出为glTF格式：Three.js支持多种模型格式，但是glTF是其中一种最佳选择。glTF是一种开放的标准，支持多种功能，包括动画和PBR材质。 5. 加载模型：在Three.js中，您可以使用GLTFLoader库加载glTF模型。您可以使用以下代码加载模型： ```javascript var loader = new THREE.GLTFLoader(); loader.load( 'models/your-model.gltf', function ( gltf ) { scene.add( gltf.scene ); }, undefined, function ( error ) { console.error( error ); } ); ``` 希望这些处理步骤能够帮助您正确地导入Blender模型到Three.js中。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值