Three.js入门学习笔记07：外部模型导入-C4D转成json文件供网页使用-fbx导入

最新推荐文章于 2023-12-03 02:18:15 发布
最新推荐文章于 2023-12-03 02:18:15 发布
阅读量6k 收藏 10
点赞数 2
分类专栏： Three.js 文章标签： webgl 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jbwhysy/article/details/104818123
版权

上一篇用的obj导入，转成json发现有些材质加载不进去，不知是什么原因。
比如blender导入obj模型的时候，只要obj和mtl材质文件在同一个文件夹内，正常情况，导入obj的同时就能直接导入同文件夹下的mtl。

在blender中可以看到有完整材质的obj模型，但是用three.js插件转成json放在网页里时，材质有缺失。

这个问题还没解决。

于是我换成用c4d转fbx，fbx导入blender，用blender的three.js插件转成json的方式，放在网页中，这样材质可以比较好的保留。

fbx导入Blender转成json有几个需注意问题和没解决问题记录一下：
以下不知道对不对，也没找到问题原因，只是这么做效果好像好点

1.C4D导出fbx时，需要可以编组导出，每个对象有一个材质，不要把所有层级都连接对象加删除，避免一个对象上有很多材质

2.C4D连接对象加删除时，相邻相近的合并在一起，合并不好可能会在网页里出现破面

3.C4D里重置坐标，blender中对齐3d游标，上一篇里有

4.材质需要加双面绘制

待解决：
1.有些编组分开，也注意材质问题了，还是加载不出想要的材质效果，原因不明

2.有些材质导出成fbx和json都很大，不明原因

3.轴向翻转问题，有何规律，为何会有翻转，原因不明

4.Blender导出three.js时候，需要快捷键a一次，全选之后再选中对象，然后导出才没有报错，这是是为啥

5.加载多个json对象有什么简便方法？

图示
C4D中全部连接对象加删除，多个材质不行
在这里插入图片描述
上图blender里看是类似这种
在这里插入图片描述
不加双面的效果不太行在这里插入图片描述
组里有单独对象，每个对象分别有材质，可以整组导出
在这里插入图片描述
C4D相邻的连接对象+删除
在这里插入图片描述
整组无法重置轴心的时候，可以只影响轴，把轴的原点位置改成0，0，0就好了。
在这里插入图片描述
整个导出还是有很多问题，不知原因是什么

代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>3d_camera</title>
<script type="text/javascript" src="js/three.js"></script>
<script type="text/javascript" src="js/DirectionalLightHelper.js"></script>
<script type="text/javascript" src="js/OBJLoader.js"></script>
<script type="text/javascript" src="js/ObjectLoader.js"></script>
<script type="text/javascript" src="js/FBXLoader.js"></script>
<script type="text/javascript" src="js/inflate.min.js"></script>
<script type="text/javascript" src="js/JSONLoader.js"></script>
</head>

<body>
<script type="text/javascript">
    
//renderer
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(800, 600);
        document.getElementsByTagName("body")[0].appendChild(renderer.domElement);
//scene
        var scene = new THREE.Scene();
    
       camera = new THREE.PerspectiveCamera(30, 800 / 600, 0.1, 100);
                camera.position.set(30, 35, 30);
                camera.lookAt(new THREE.Vector3(0, 0, 0));
                scene.add(camera);
//object
    
    var loader = new THREE.ObjectLoader();
        loader.load("json/cfbx3.json", function(obj) {
        obj.traverse(function(child) {
            if (child instanceof THREE.Mesh) {
                child.material.side = THREE.DoubleSide;
          
        }
    });
        obj.scale.multiplyScalar(5);//3倍大小 
        mesh = obj; 
        obj.position.set(0,0,0);
        obj.rotation.z = -Math.PI;//旋转180度
        scene.add(obj);
    }); 
    
    
     var loader = new THREE.ObjectLoader();
        loader.load("json/cfbx3.json", function(obj2) {
        obj2.traverse(function(child) {
            if (child instanceof THREE.Mesh) {
                child.material.side = THREE.DoubleSide;
          
        }
    });
        obj2.scale.multiplyScalar(5);//3倍大小 
        mesh = obj2; 
        obj2.position.set(0,0,-4);
        obj2.rotation.z = -Math.PI;//旋转180度
        scene.add(obj2);
    }); 
    
    
      var loader = new THREE.ObjectLoader();
        loader.load("json/cfbx3.json", function(obj3) {
        obj3.traverse(function(child) {
            if (child instanceof THREE.Mesh) {
                child.material.side = THREE.DoubleSide;
          
        }
    });
        obj3.scale.multiplyScalar(5);
        mesh = obj3; 
        obj3.position.set(0,0,-7);
        obj3.rotation.z = -Math.PI;//旋转180度
        scene.add(obj3);
    }); 
    
     var loader = new THREE.ObjectLoader();
        loader.load("json/cfbx3.json", function(obj4) {
        obj4.traverse(function(child) {
            if (child instanceof THREE.Mesh) {
                child.material.side = THREE.DoubleSide;
          
        }
    });
        obj4.scale.multiplyScalar(5);
        mesh = obj4; 
        obj4.position.set(0,0,-10);
        obj4.rotation.z = -Math.PI;//旋转180度
        scene.add(obj4);
    }); 
    
     var loader = new THREE.ObjectLoader();
        loader.load("json/untitled2.json", function(obj5) {
        obj5.traverse(function(child) {
            if (child instanceof THREE.Mesh) {
                child.material.side = THREE.DoubleSide;
          
        }
    });
        obj5.scale.multiplyScalar(5);
        mesh = obj5; 
        obj5.position.set(0,0,-13);
        obj5.rotation.z = -Math.PI;//旋转180度
        scene.add(obj5);
    }); 
    
    
         var loader = new THREE.ObjectLoader();
    
    loader.load("json/untitled5.json", function(obj6) {
    obj6.traverse(function(child) {
        if (child instanceof THREE.Mesh) {
            child.material.side = THREE.DoubleSide;
          
        }
    });
        obj6.scale.multiplyScalar(500);
        mesh = obj6; 
        obj6.position.set(0,-2,-10);
        obj6.rotation.x = -Math.PI;//旋转180度
        scene.add(obj6);
    }); 
    
        var loader = new THREE.ObjectLoader();
        loader.load("json/cfbx3.json", function(obj3) {
        obj3.traverse(function(child) {
            if (child instanceof THREE.Mesh) {
                child.material.side = THREE.DoubleSide;
          
        }
    });
        obj3.scale.multiplyScalar(5); 
        mesh = obj3; 
        obj3.position.set(0,0,-13);
        obj3.rotation.z = -Math.PI;//旋转180度
        scene.add(obj3);
    });
    
    
          var loader = new THREE.ObjectLoader();
    
    loader.load("json/che10.json", function(obj7) {
    obj7.traverse(function(child) {
        if (child instanceof THREE.Mesh) {
            child.material.side = THREE.DoubleSide;
          
        }
    });
        obj7.scale.multiplyScalar(100);
        mesh = obj7; 
        obj7.position.set(10,5,-5);
//        obj7.rotation.x = -Math.PI;//旋转180度
        scene.add(obj7);
    }); 
    
         var loader = new THREE.ObjectLoader();
    
    loader.load("json/tool_new.json", function(obj8) {
    obj8.traverse(function(child) {
        if (child instanceof THREE.Mesh) {
          child.material = new THREE.MeshLambertMaterial({
                color: 0xffffff,
                side: THREE.DoubleSide
            });
        }
    });
        obj8.scale.multiplyScalar(100);
        mesh = obj8; 
        obj8.position.set(0,10,-8);
        obj8.rotation.z = -Math.PI;//旋转180度
        obj8.rotation.y = -Math.PI;//旋转180度
        scene.add(obj8);
    }); 
    
     //light 
        var light = new THREE.DirectionalLight(0xffffff);
                light.position.set(10,20,30);
                light.intensity=1.5;//强度
                scene.add(light);
//                scene.add( new THREE.DirectionalLightHelper( light ) );//平行光位置
       
        id = setInterval(draw, 20);    
        function draw() {
        renderer.render(scene, camera);               
        }
  
    
</script>
</body>
</html>
月亮实验室
关注
  • 2
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
把obj，mtl格式导入Blender，修改，然后导出为COLLADA(.dae)，写urdf，最后导入Gazebo
Cyril__Li的博客
12-23 2万+
参考： 1. CSAIL的一个教程 2. http://playerstage.sourceforge.net/doc/Gazebo-manual-svn-html/tutorial_mesh.html 3. http://gazebosim.org/tutorials?tut=import_mesh感觉Gazebo在这方面不如VREP方便，不支持各种格式的mesh文件的导入，修改，YCB数据
Vue使用Three.js加载glTF模型的方法详解
10-15
主要给大家介绍了关于Vue使用Three.js加载glTF模型的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
C4D -＞ Three.js资产制作与导入流程
新缸中之脑
04-06 1354
这篇文章介绍从 Cinema 4D 中的 UV 模型到用于 Three.js 的 .glb/.gltf 资产和纹理的整个过程，该网格将依赖 MeshStandardMaterial 来复制你在 Redshift 中看到的内容， 没有由 Three.js 处理的任何照明。推荐：用快速搭建3D场景。如果你正在寻找一种方法来导出具有可在 Three.js 中主动点亮的纹理的 .glb/.gltf 资产，请查看我关于从 Redshift 烘焙 PBR 样式贴图的另一篇文章。
vue3中使用threejs加载fbx模型.zip
07-04
vue3中使用threejs加载fbx模型， 首先需要npm install three， 并且threejs场景正常
Three.js fbx文件导入 源码
04-26
Three.js fbx文件导入源码实例。 博客查看，https://blog.csdn.net/qq_34206863/article/details/79486518
React_and_three.js:结合使用three.js和React将3D模型导入ReactRedux网站
05-13
React和three.js 尝试使用three.js将Tāwhirimātea的3D模型放到我们的React和Redux网站中。 有多种方法可以将Three.js放入React。 在这里，我使用了React 3渲染器助手。 它很有效，我在网站上获得了3D立方体渲染。 我陷入tryign以获得3D .fbx文件而不是多维数据集的渲染，并获取背景进行加载。 我认为我需要对3个本身有更好的了解，然后恢复使用vanilla JS重建该站点并在其中实施3个。 这是成功的： : 。 我的目标是回到下一步，将我在香草JS中学到的知识运用到React上的三项工作中。
【我的渲染技术进阶之旅】解决Cinema 4D制作的3D模型无法导入Blender的问题
字节卷动
01-11 4358
在我的博客【我的OpenGL学习进阶之旅】关于3D模型知识之：什么是obj文件和mtl文件1newmtl xxx表示定义一个名为xxx的材质；如我们代码使用了这个材质Ns表示材质的反射指数，反射指数越高则高光越密集，取值范围在一般为 [0,1000];Ni表示材质的折射值（折射率），定义当前材料中的光密度（也称为折射率）。值的范围可以从0.001 到 10。值1.0表示光在穿过对象时不会弯曲。玻璃的折射率为 1.5；d表示指定溶解因子（dissolve），即这种材料溶解到背景中的程度。
68 Three.js 导入OBJ格式和MTL的格式
现在学习也不晚
03-19 8267
简介 OBJ和MTL是相互配合的两种格式，经常一起使用。OBJ文件定义几何体，而MTL文件定义所用的材质。OBJ和MTL都是基于文本的格式。 Three.js可以很好地理解OBJ文件和MTL文件，而且Blender也支持这两种文件格式。所以作为替代方案，你也可以在Blender里选择OBJ/MTL格式的文件，而不是Three.js的JSON格式文件。在Three.js里提供两种不同的加载器。如...
threeJS自带的obj/fbx转json文件
qq_35260055的博客
12-17 850
1、全局安装esm npm i esm -g 2、obj2three文件找放到obj/mtl文件复制过去 文件路径：three.js-master\utils\converters 3、在obj2three文件下执行命令（xxx.obj） 是obj名称 node -r esm obj2three.js xxx.obj
Three.js入门学习笔记05：外部模型导入-C4D转成json文件供网页使用
基本无害的博客
03-05 4565
参考学习： https://www.jianshu.com/p/906072e60197 var objectLoader = new THREE.ObjectLoader(); objectLoader.load("../model/eee.json", function ( obj ) { console.log(obj); scope.obj=obj;...
Blender导出Mtl文件格式
最新发布
项目地址:https://gitcode.net/qq_35829452,骑砍mod开发/C++开发/游戏程序
12-03 1331
材质组为单位,材质名 + 着色器(shader)算法参数 + 纹理图片(texture)路径。模型材质(mtl) = 着色器(shader) + 纹理(texture)模型的材质可能会要不同的效果，为了达到这种区分，用关键字illum进行标识。文件->导出-obj文件进行导出,导出选项勾选材质组.导出mtl文件。Ks 标识镜面反射颜色，颜色为rgb参考，取值0-1。Kd标识漫反射颜色，颜色为rgb参考，取值0-1。Ka标识环境颜色，颜色为rgb参考，取值0-1。d 和Tr 标识材质的透明度，Tr=1-d。
vue-three 带动画的fbx，glif格式的模型，能成功导入模型.zip
03-16
vue-three 带动画的fbx，glif格式的模型，能成功导入https://blog.csdn.net/qq_19280295/article/details/114870739
drcobj:使用 draco 压缩和解压 three.js 模型文件。(Use draco to compress and decompress threejs-object files.)
04-29
您可以使用drcobj_exporter.js将threejs-object（.json）文件转换为draco压缩的threejs-object（.drcobj）文件， drcobj_loader.js是drcobj文件的加载器。 新版本！ 与1.0.3.2版相比，1.1.0版将模型加载时间减少了...
化工厂模型，大厂区，提供了三种数据格式fbx-3dmax-obj，cesium和threejs都可用
06-11
2.也可以转fbx/obj为3dtiles 加载在cesium，作者推荐fbx,threejs的加载可以使用多种格式 3.文件较大，使用了压缩包，将解压后的maps文件夹和max文件放在同一目录即可。 4.如需转换为gltf格式可以私信
vue-three 带动画的fbx，glif格式的模型，能成功导入带动画的模型.zip
03-16
vue-three 带动画的fbx，glif格式的模型，能成功导入https://blog.csdn.net/qq_19280295/article/details/114870739
FbxParser：*。fbx解析器，它使用FBX SDK解析FBX文件并在OpenGL上重建FBX模型
02-04
FbxParser：*。fbx解析器，它使用FBX SDK解析FBX文件并在OpenGL上重建FBX模型
three-fbx-loader
05-08
三个fbx加载器Kyle-Larson和Takahiro的重新打包为节点模块安装npm i --save three-fbx-loader 用法var THREE = require ( 'three' ) ;var FBXLoader = require ( 'three-fbx-loader' ) ;var loader = new FBXLoader ...
FBX-Loader-OpenGL-C-:使用 glut lib 和 fbx SDK 加载带有动画（opengl c++）的 3D 模型 FBX 文件。
06-05
FBX-加载器-OpenGL-C- 使用 glut lib 和 fbx SDK 加载带有动画 (opengl c++) 的 3D 模型 FBX 文件..
帮我写一个使用three.js导入fbx模型的示例
04-19
当然可以帮您写一个使用three.js导入fbx模型的示例。 首先，您需要将您的fbx模型导出为json格式（如果您使用的是Autodesk的3ds Max，则可以使用Three.js的3ds Max插件）。接下来，您可以使用Three.js的ObjectLoader来加载模型。以下是示例代码： ```javascript var loader = new THREE.ObjectLoader(); loader.load('model.json', function(object) { scene.add(object); }); ``` 在上面的代码中，我们使用ObjectLoader来加载模型，然后将模型添加到场景中。当然，您需要根据您的模型的路径和名称来替换'model.json'。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值