three.js学习点滴(2)— 模型导入

three.js没有像mmcmm这样的单位,为了和three.js的大部分插件代码的参数一致 ,本人以cm为最小单位在3dmax中建模

3Dmax中设置 :

一、单位问题: 最小单位为cm  , 以现实实际大小建模 ,如人物高度:1.8m。

二、以原点为模型基准点:

三、中文问题:材质球名称、贴图名称、贴图路径不能有中文。

四、导出模型为obj格式、并保留.mtl, 即导出文件有两个如(floor.obj , floor.mtl),所有导出模型名称有意义,不能包含中文。

导出模型参数设置, 这里个人建议使用 Triangles三角面

OBJ转换成Json格式数据:(以cube.obj为例:)

将模型cube.obj 和 cube.mtl两个文件放到同一个文件中,运行cmd,并cd到该文件目录下,用Python(Python安装2.x的不要安装3.x的) 调用convert_obj_three.py 进行格式转换:

如图:

转换程序 convert_obj_three.py  在github上可以下载 ,three.js源码和例子和.doc 托管在 :https://github.com/mrdoob/three.js/ 上

三、将模型导入场景:

代码如下所示:

loader = new THREE.JSONLoader(); 
	var callbackCube= function( geometry, materials ) {
		var cube = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial({color : 0xff0000}) );
		cube.position.set( 0, 0, 0 ); 
		cube.scale.set( 1, 1, 1 );
		cube.name = 'cube';
		scene.add( cube );
	};
	loader.load( cubeModelPath, callbackCube );


three.js还支持其他格式的导入,如.Obj,  .STL 等,详情查看 :http://threejs.org/examples/

以下是截图 :


  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 使用three.js导入3D动画模型可以通过以下几个步骤完成: 1. 准备模型文件:首先需要准备一个包含有动画模型的文件。常见的模型文件格式包括.obj,.fbx,.dae等。可以使用3D建模软件(如Blender、3ds Max等)创建模型并导出为合适的格式。 2. 创建场景:使用three.js创建一个场景,用于显示导入模型。创建一个渲染器,指定渲染目标(可以是画布或者HTML元素),并设置渲染器的尺寸和像素密度。 3. 导入模型:使用three.js的加载器来导入模型文件。three.js中提供了多种加载器,例如OBJLoader用于.obj格式,FBXLoader用于.fbx格式,ColladaLoader用于.dae格式等。选择合适的加载器并使用它来加载模型文件。 4. 添加动画:当模型文件加载完成后,可以将动画添加到场景中。如果模型文件中包含动画数据,可以使用three.js提供的动画系统来播放动画。根据模型文件的格式和结构,可以使用不同的方式来控制和处理动画。 5. 渲染场景:在动画播放之前,需要在每一帧更新场景和模型的状态,并调用渲染器的渲染方法来显示场景。可以使用requestAnimationFrame函数来创建一个循环,以便在每一帧更新场景状态并渲染。 通过以上步骤,就能够使用three.js导入3D动画模型,并在浏览器中展示和播放模型的动画效果。着重注意导入模型文件格式和对应的加载器,同时根据模型文件的结构来控制和处理动画,以实现预期的效果。 ### 回答2: 要在Three.js导入3D动画模型,我们可以按照以下步骤进行: 首先,我们需要准备一个3D动画模型的文件,通常使用的格式是Collada(.dae)、FBX(.fbx)或者glTF(.gltf/.glb)。这些格式可以由3D建模软件(如Blender、Maya)导出。 接下来,我们需要在网页中引入Three.js库,可以通过CDN或者本地引入。在HTML文档的头部添加以下代码: ```html <script src="https://threejs.org/build/three.js"></script> ``` 然后,我们创建一个场景(Scene)对象,一个相机(Camera)对象和一个渲染器(Renderer)对象。 ```javascript var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 5; var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); ``` 接着,我们使用Three.js提供的加载器(Loader)来加载3D模型文件。以Collada为例,我们可以使用ColladaLoader: ```javascript var loader = new THREE.ColladaLoader(); loader.load('model.dae', function (collada) { var model = collada.scene; // 对模型进行一些调整 model.scale.set(0.1, 0.1, 0.1); scene.add(model); }); ``` 最后,我们需要编写动画循环的逻辑,即在每一帧中更新场景和渲染。 ```javascript function animate() { requestAnimationFrame(animate); // 更新动画 renderer.render(scene, camera); } animate(); ``` 通过以上步骤,我们就可以在网页中成功导入并展示3D动画模型了。需要注意的是,具体的加载方式和调整可能因使用的3D模型文件格式而有所不同,但基本的原理是相似的。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值