Three.js在导入obj模型时自动赋予名字

最新推荐文章于 2023-09-05 14:23:10 发布

CXY_Likescoding

最新推荐文章于 2023-09-05 14:23:10 发布

阅读量1.1k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/Eternity666/article/details/116642828

版权

本文介绍如何在使用Three.js时，通过解析OBJLoader加载过程中的XML文件获取模型URL，从而提取文件名作为模型名称。由于加载过程异步，此方法解决了为导入模型赋予名字的难题，但需注意不同浏览器XML格式的差异，代码适用于Firefox和Chrome。

摘要由CSDN通过智能技术生成

在Three.js实现的Web项目中自动导入模型时需要根据文件名给导入的模型赋予名字，但由于THREE.OBJLoader().load()和你写的读入模型的for循环是异步进行的，因此难以实现，这里使用了一个讨巧的方式实现了这个需求。

笔者使用的方法是从OBJLoader读取过程中的xml文件里找到文件导入的url，然后从url中分离出文件的名字，xml文件的具体内容可以打印xhr查看。这里需要注意的是不同浏览器的xml格式可能不太相同，需要做一定的修改，下面的代码里只考虑了火狐和谷歌的浏览器。

function objLoading() {
   
    //加载OBJ格式的模型
    objs_list = one_model_objs["all_objs"];
    for(var obj_id in objs_list) {
   
        material_choosed[objs_list[obj_id]

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

CXY_Likescoding

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

vue 中将three.js导入的3D模型给指定的元素初始化时展示tip；动态id名称和动态css；vue 中将three.js导入的3D模型中的tip随着元素位置的变化而变化

killerdoubie的博客

09-19

183

（2）在animate方法中查询到具体的要显示tip的对象后调用上面的labelTag方法（在这里调用就是为了tip和元素的位置一起变化）可以根据某个标识去批量加载出对应的tip。（1）在methods中定义生成方法。

threejs模型旁边添加文字注释，解释模型 3D效果

最新发布

qq_44426236的博客

09-05

4502

THREE.JS提供的方式是在标签DOM上另外套了一个DOM，通过对这个外面DOM进行操作从而影响我们的标签。从页面效果来看，两者最大的区别就是：CSS2Drender不会随着模型的缩放而改变，而CSS3Drender相反。

Three.js 给obj模型添加材料纹理的样例

01-15

在本文中，我们将深入探讨如何使用...在这个特定的样例中，我们学习了如何为OBJ模型赋予逼真的外观，并允许用户通过鼠标进行旋转和缩放操作。通过不断实践和探索Three.js，你可以创造出更多令人惊叹的3DWeb应用程序。

three.js-r136.zip

05-13

Three.js支持加载多种3D模型格式，如OBJ、FBX、GLTF等，通过Loader类可以方便地将这些模型导入到场景中。这极大地扩展了Three.js的应用范围，使得开发者可以利用现有的3D设计资源。七、性能优化 Three.js-r136版本...

Three.js前端3D开发：在场景中自定义光源绘制立方体

08-07

了解这些基础知识后，你就可以开始探索更高级的主题，如加载`.obj`模型，它们是3D对象的通用格式，可以导入到Three.js中进行展示。Three.js提供OBJLoader或MTLLoader加载器来处理这类文件。此外，还可以学习如何使用...

WebGL 可视化3D绘图框架：Three.js 零基础上手实战.rar

06-13

5. **加载外部模型**：如何导入和展示.obj、.gltf等格式的3D模型。 6. **交互性**：使用Raycaster检测鼠标或触摸事件，实现与3D对象的交互。 7. **性能优化**：了解如何减少渲染开销，提高大型3D场景的性能。 8. **...

第九章 Python自定义模块及导入方法

weixin_34129145的博客

10-27

155

9.1 自定义模块自定义模块你已经会了，平常写的代码放到一个文件里面就是啦！例如，写个简单的函数，作为一个模块：#!/usr/bin/python # -*- coding: utf-8 -*- def func(a, b): return a * b class MyClass: def __init__(self, a, b): self.a = a ...

threejs自定义引入模型进行点击获取

yunduanzhijie的博客

01-29

3717

最近编辑点击事件时发现： threejs的 raycaster只对mesh有感应，而引入模型类型是group，那么要对引入模型进行获取就要把 raycaster.intersectObjects（children）里children对象设置为group的children这样就可以编辑对引入模型的点击事件。如果目标模型的同级模型干扰严重，可以直接外部建立一个透明mesh进行点击绑定 // 获取与射线相交的对象数组 function getIntersects(event) { event.preven

vue使用threeJs导入obj模型，并添加标注

hzqzzz的博客

08-03

9755

vue使用threeJs导入obj模型，并添加标注

vue2+three.js实现页面引入3d模型并进行简单模型控制

weixin_42477308的博客

05-13

3832

创建材质代码段解释：此时的方法是将一个图片转换为一个材质，并将该材质贴到3d电脑模型的屏幕上，（具体怎么精确贴到模型屏幕上，下面代码做有解释）例2：控制模型某一部位（如vr模型驾驶，点击车门，车门打开，进入查看驾驶室）可以在控制台打印出模型位置name，一般建模时会声明出来模型位置name。当拿到模型某一位置名字时，可以直接进行更换此位置颜色。此时就将上面所转换的图片精准的贴在模型的屏幕上。上面仅为自身理解，如有错误请大佬指正！七、渲染模型之后想进行控制模型的某一位置。五、创建场景、相机、地面、材质。

【ThreeJs】如何给模型打上文字标签？

IT飞牛

03-11

1万+

ThreeJs渲染中创建的网格模型，有时候我们需要给模型添加标签文字，方便识别不同的物体。这时候我们可以使用这两个库，里面提供了三种打标签的方式，随着相机角度的变化，三种标签的显示效果各不相同。

threejs通过模型名称获取模型，并修改颜色

九段刀客的博客

01-29

1773

【代码】threejs通过模型名称获取模型，并修改颜色。

Three.js层级模型节点命名、查找、遍历

u014291990的博客

12-01

6892

层级模型节点命名、查找、遍历本文是Three.js电子书的6.2节上节课说过Threejs场景对象Scene和各种子对象构成的层级模型就是一个树结构。如果你有一定的算法基础对树结构肯定会非常了解，如果你了解前端的DOM树结构也非常有助于本节课的学习，如果这些都不了解也没有关系，直接体验本节课的案例源码。本文通过Three.js的一个类Group来介绍Threejs层级模型的概念，如果你对We...

three根据name或者id获得模型，设置透明度

qq_34631220的博客

03-24

2142

var Floor = gltf.scene.getObjectById(2307); Floor.material = new THREE.MeshLambertMaterial({ color: 0x000000, }); var Floor = gltf.scene.getObjectByName('地面'); Floor.material = new THREE.MeshLambertMaterial({ color: 0x000000, }); ...

three.js导入外部模型—obj

赵佳佳的博客

03-09

4216

一、导入obj格式的模型只加载obj文件：即只加载obj文件中的几何信息，不加载材质文件，系统自动设置phong网格材质 1、引入obj模型加载库OBJLoader.js <script src="./OBJLoader.js"></script> 2、定义obj模型加载器 var loader=new THREE.OBJLoader(); 3、进行加载 loader.load("./几何体.obj",function(obj){ console.log(obj); //可

three.js导入obj模型，贴图怎么办

07-14

要在Three.js中导入`.obj`模型并贴图，你可以使用`MTLLoader`和`OBJLoader`加载器，并在材质上应用纹理。首先，确保你已经安装了所需的依赖项： ``` npm install three react-three-fiber ``` 然后，创建一个新的React组件来加载和渲染`.obj`模型： ```jsx import React, { useRef } from 'react'; import { Canvas, useLoader } from 'react-three-fiber'; import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader'; import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'; function Model() { const materials = useLoader(MTLLoader, '/path/to/model.mtl'); materials.preload(); const obj = useLoader(OBJLoader, '/path/to/model.obj'); const modelRef = useRef(); obj.setMaterials(materials); obj.position.y = -1; return <primitive object={obj} ref={modelRef} />; } function App() { return ( <Canvas> <ambientLight /> <pointLight position={[10, 10, 10]} /> <Model /> </Canvas> ); } export default App; ``` 在上面的代码中，我们首先导入了需要的加载器和组件。然后，在`Model`组件中，我们使用`useLoader`钩子加载`.mtl`文件，并预加载材质。接下来，我们使用`useLoader`再次加载`.obj`文件，并创建一个模型引用。然后，我们将预加载的材质应用于模型，并设置模型的位置。在`App`组件中，我们创建了一个基本的Three.js场景，并添加了环境光和点光源。然后，我们将`Model`组件放置在场景中以渲染模型。请确保将`/path/to/model.mtl`和`/path/to/model.obj`替换为你实际模型文件和材质文件的路径。这只是一个简单的示例，你可以根据需要进行修改和扩展。希望对你有所帮助！