three.js加载GLTF模型Nuxt.js/ Vue.js

如何使用节点模块在Vue或Nuxt中加载gltf模型?当我尝试加载gltf模型时,我遇到以下错误:“TypeError:three\\uuu WEBPACK\\u IMPORTED\\u MODULE\\u 0\\uuu。GLTFLoader不是构造函数”
这是我的组件.vue: Canvas.vue(1.3KB)
如本指南99所述,示例文件不是核心的一部分。您必须像这样单独导入它们:nimport { GLTFLoader } from \"three/examples/jsm/loaders/GLTFLoader.js\";
执行此操作时,请注意,没有必要在GLTFLoader之前添加THREE命名空间。因此,加载程序的实例是这样创建的:nconst>nI used the const, which helped my problem. But nowi have another error.nIn the console i get: SyntaxError: Unexpected token nHey there,nI\"m having the same problem. Did you ever find the solution?nThank you!n@Mugen87 there are packages also available but you suggest the files so is there any issue with the packagesn@dsmooot this error usually means your files are not found at the URL you\"ve given, and the correct URL is specific to your project. Check the Network Tab for errors, or see running things locally 24.n@Alex npm packages like three-gltf-loader 22 are not maintained by the threejs team, and usually run several versions behind the latest threejs release.The best way to guarantee loaders are compatible with your version of threejs is to use the versions included in that release.n@donmccurdy Thanks for your quick response! I appreciate your advice and suggestions. I\"m using a relative path and have tested it by placing a png in the same folder and rendering it in a div (successfully). For my dev environment I\"m trying to utilize threejs in a vue js project (vue-CLI w/ webpack) and am curious if the issue is specific to my setup. Have you had any experience with setting up a project in this context, or have any resources for vue -> threejs workflows/templates/boilerplates? Any help would be greatly appreciated!nThanks so much!nPS. network request shows a 200 for my gltf file…just stuck with the json parse error. nDoes it make a difference if you convert your asset to glb?CLI工具glTF Pipeline 17可以为您执行此转换。@dsmoot抱歉,我不确定。如果您可以共享项目的实时演示或副本,则会有所帮助。
这也可能取决于您的构建系统。有些,比如ParcelJS,需要一些额外的配置来处理图像和CSS等常见类型之外的静态文件:https://github.com/donmccurdy/three-gltf-viewer/blob/9ef59abc24fbff84a5f0ce4413ca54a31ef1957/package.json#L55-L64 43
很抱歉延迟响应!这周很忙。
为了进行合理性检查,我在vue之外设置了我的项目,并能够使用gltfloader成功地将我的模型加载到3J中。但同样的设置在vue环境中失败。我相信这与webpack配置有关(我承认我对webpack不太熟悉,并认为我可以基于vue cli webpack简单的项目设置进行构建)…无论如何,如果您不介意研究一下,我已经将我的项目推到了https://github.com/dsmoot/blendtoweb24.
我真的很感谢你的邀请是时候帮我对付这个街垒了!我觉得一旦我解决了这个问题,我的blender->;vue->;threejs样板将是坚实的。
干杯,
达斯汀
PS。我有一个.glb,嵌入的gltf,和同一型号的单独的fltf+垃圾箱,以防导入的文件类型出现问题。@dsmoot-我正在使用Vue和Three.js能够按预期加载glb模型。快速查看您的回购协议,看起来您试图将glb作为静态资产引用,但是,它并不位于Vue项目希望看到静态资产引用的位置,如果没有适当的加载程序,webpack将无法成功解析该引用。如果您通过webpack引用资产,则需要为其提供适当的加载程序。我没有研究过任何gltf或glb装载机,但引用它们就像引用静态资产一样简单。
尝试类似的方法。n1. 在应用程序的顶层添加一个public目录(与src同级)n2. 在那里添加您的资产(因此类似/public/threeAssets/dude.glb)n3. 加载时,请使用以下模式作为资源的url:**7***(注意,不包括/public)
我没有任何使用经验Nuxt.js,但这种模式适用于我的标准Vue.js使用Vue CLI进行安装。
以下是将来在Vue中使用静态资产的参考https://cli.vuejs.org/guide/html和static assets.html#static-资产处理62
嘿,安东尼,
谢谢你的回复。非常感谢你的帮助。我为要测试的glb(和gltf)文件创建了public dir以及public/assets文件夹。虽然已检索到该文件,但我仍有一个JSON.parse当三个/examples/jsm/loaders/GLTFloader尝试加载模型时出错,不幸的是…如果您想查看,我的更改将被推送到我的git repo。
现在,我正在使用传统的html+js设置继续我的项目,但我希望最终能有一个vue的工作流程。如果您愿意在git中共享一个简单的vue+threejs样板文件,我本人(以及其他关注者)将非常感激!
干杯,
达斯汀
@dsmoot-看起来您的项目不是使用vue cli设置的,根据您的具体设置,vue cli可能有不同的要求。下面是一个使用GLTFLoader使用vue cli设置项目的非常简单的示例。GitHubanthonysimone/threejs vue示例275
使用GLTFLoader设置的基本vue cli项目three.js还有GLTFLoader-anthonysimone/threejs vue示例
谢谢您的帮助,@anthonysimone!我真的很感谢你抽出时间和我分享这件事!。。今晚将测试这个!
非常感谢您!很好!
不用担心!
谢谢~!!!
非常有用@anthonysimone!!谢谢您!!
Loading GLTF models in Nuxt.js / Vue.jsn

three.js[已解决]正交摄影机的变换控件:gizmos缩放问题

您好,我正在使用带轨道控制的正交摄影机。我注意到当缩放照相机变焦不改变相机的位置(如透视相机)。首先,我想知道为什么这两个相机的实现方式不同?第二,我也在使用TransformControls,对于透视摄影机,更新功能上的小控件的重新缩放在这个等式中非常有效>但是使用OrbitControls更改缩放而不是正交摄影机的位置时,它没有正常工作。我试着像这样在等式中添加缩放,但没有得到任何好的结果>我应该以不同的方式包括它吗?我应该使用其他控件吗?谢谢大家的帮助!NaDaMa:首先,我很想了解为什么这两个摄像头...

日期:2021-12-11 08:00:01 浏览:1688

three.js多次渲染同一模型(obj模型),FPS要低得多

我试图在程序中渲染150个相同的树模型,但FPS突然从60下降到30+。你能告诉我什么是最好的解决办法吗?非常感谢。和平与爱。skr有两种典型的方法可以解决这个性能问题(太多的绘制调用):- 使用实例化渲染- 将所有几何体合并为一个几何体(因此只有一个网格)...

日期:2021-12-11 08:00:02 浏览:1711

three.js可缩放场景背景

three.js大家好,我有一个场景,由一个物体(反射雕像)组成,保持在一个漂亮背景的中心。我一直在使用威尼斯日落矩形hdr地图作为我的场景背景它既可以作为环境地图,也可以作为背景我看到背景不会与场景中渲染的网格一起缩放。这给人一种场景完全是假的感觉。i、 e状态向上/向下缩放,但背景不缩放。目前,我已经禁用了放大/缩小功能,这样用户就不会感到害怕。我的问题是:1. 当轨道控制放大/缩小时,我是否需要在此处使用一些着色器魔法来放大或缩小场景背景,以便看起来场景中的所有对象都在均匀缩放?或者这根本不可能做到?...

日期:2021-12-11 09:00:02 浏览:1237

three.js移动导入的Gltf模型

three.js我导入了我的gltf模型并将其添加到场景中,但现在如果我尝试移动它,它将不会=新建三、几何();var=混音器( 模型动画[0]>如何移动模式?Prakar_Srivastava:var>3D对象不能是Geometry或BufferGeometry类型。它应该是Object3D或类似Mesh、Points或Line的派生类的实例。在您的情况下,我只是这样声明变量:var mode;在动画循环中,执行以下操作:如果(mod!==未定义)>还请记住,基本3D场景的重要部分在代码片段中丢失(例如相...

日期:2021-12-11 10:00:01 浏览:1067

three.js平面明暗处理的问题

three.js嗨!我在项目中使用节点材质。我在模型渲染方面有问题。它看起来像是真实的平面阴影。如何平滑多边形?也有点像低分辨率阴影纹理贴图的自阴影。可能不是,但可能是。@Arkadiy\\u Vinkovskiy您需要在您的帖子中添加更多细节。屏幕截图不足以说明这里发生了什么。始终包括引起问题的代码,如果您使用的是模型,也要包括这些代码。更好的是,使用codepe制作一个工作示例...

日期:2021-12-11 10:00:02 浏览:955

three.js如何渲染立方体材质?

您好,直到昨天,我才相信Object3D是一组网格,而网格是一组几何体+材质,每个对象只有一个对象。我发现了立方体材质的结构,因此object3D的网格包含1个几何体(boxGeometry)和6个材质!所以问题是,这种网格的渲染效果如何?有关于它的文件吗?(这是为了提高我对three.js)非常感谢还有其他问题,与我的上一个帖子相关,如果一个网格中可能有多个材质,如何设置CustomDistanceMaterial以考虑所有材质的所有贴图?elysium11:所以问题是,渲染如何在这种类型的网格上工作?您...

日期:2021-12-11 11:00:03 浏览:828

three.js如何创建要在网格中拟合的线段

three.js伙计们,我想帮忙,假设我有一个这样的网格图像718×729 1.25 KB我想在网格面内创建线段,也就是说,我想将网格转换成这样的线图像710×828 740字节有人能帮忙吗???...

日期:2021-12-11 12:00:01 浏览:879

three.jsGLTFLoader.js这是我的登记簿错误

three.js每当我试着做决定的时候3.GLTFLoader对象我收到此错误代码:“未捕获类型错误:这是我的登记簿不是一个函数“我需要帮助!由Penta#u Trax在post#5中解决我最终发现我一直在使用错误的文件,当你需要使用jsm/example时,我使用的是js/example。其他东西也是个问题。但这是问题的基础。你能给我们看看你的代码吗?通常,如果你使用的是import语句,GLTFLoader不需要在前面加三个字符。好的,所以在这之前,我刚刚关注了这个视频,因为它是去年发布的。但是现在我试...

日期:2021-12-11 12:00:02 浏览:1041

three.js使用threejs的光流

嘿,我需要通过我的屏幕显示一束移动的光束。我不想使用任何模型或动画。我想知道我是否可以单独使用threejs来实现这一点。我也应该能够控制其运动的颜色强度和路径。嗨!也许这会有帮助:GitHub-jeromeetienne/三倍体积聚光灯: three.js扩展以提供体积聚光灯13,用于可视化光锥。您可以使用THREE.Curve()设置其路径。控制颜色强度,可能取决于曲线上的位置,也可以使用tween.js或者GSAP用于复杂的动画。创造力取决于您这是您想要的吗?https://threejs.org/e...

日期:2021-12-11 13:00:01 浏览:1272

three.js使用光线投射动态绘制多边形

我要画多边形three.js具有交点。为此,我使用下面的函数。首先,我使用光线投射器在第一个交点的第一个点添加球体。每次单击后,在交点处创建新球体,并在该交点和上一点之间创建线。现在,我希望在第一次单击时关闭多边形指向或单击该点周围。如何实现此目标。raycaster params是否与网格一起工作以检测鼠标位置周围的网格?function checkIntersectionclick() = raycaster.intersectObjects(addedObject, true);if (interse...

日期:2021-12-11 13:00:02 浏览:837