three相机在模型上_实例讲解Three.js加载外部模型
本文主要介绍了Three.js外部模型加载的教程详解,在文章给大家补充介绍了three.js 外部模型加载json的方法,非常不错,具有参考借鉴价值,需要的朋友可以参考下,希望能帮助到大家。
1. 首先我们要在官网: https://threejs.org/ 下载我们three.js压缩包,并将其中的build文件夹下的three.js通过script标签对的src属性导入到我们的页面中
2. 创建three.js核心对象
Scene(场景)
Camera(相机)
Light(光源)
Mesh(模型)
Renderer(渲染器)
最后一步就是渲染显示在我们的页面上了renderer.render(scene,camera)
3. OBJ模型的导入
4. .JS模型的导入
首先我们需要将.OBJ模型的文件转换成.JS文件的模型
.obj格式转.js格式使用的是threejs.org官方提供的一个convert_obj_three.py的工具,这个工具的使用需要安装python环境
转换过程:
将convert_obj_three.py和要转换的.obj文件和.mtl文件放在同一个目录下
打开cmd,切换到对应的目录下
python convert_obj_three.py -i infile.obj -o outfile.js [-t ascii|binary]
可以得到两种编码方式的.js文件(二进制binary和ascii)
出现的问题,转换格式的问题:
打开.obj文件,
将mtllib关键字后面改成 .mtl文件相对于.obj文件的路径
将文件中的这些?改成字母,乱码
.mtl文件中的newmtl 关联到.obj文件中
这是.obj文件中的
5. 准备导入
Ascii
Binary
需要导入
PS:three.js 外部模型加载json
用blender做模型可以直接导出json文件(导出插件可以从three.js包里找到)。从网上下载模型,网上的模型很多事3ds max做的,我就用3ds max把模型格式转换成obj,再导入blender处理好模型后导出json文件。
导出json文件时选项勾选如果选择了SCENE可连灯光一同导出加载时需要用ObjectLoader
var loader = new THREE.ObjectLoader();
loader.load('youscene1.json',function(obj){
obj.scale.x = obj.scale.y = obj.scale.z =100;
scene.add(obj);
});
导出json文件时如果不勾选scene,需要页面中添加灯光否则模型全黑,加载时用JSONLoader
var loader = new THREE.JSONLoader();
loader.load( "noscene.json",function( geometry, materials ) {
materials[ 0 ].shading = THREE.FlatShading;
mesh = new THREE.Mesh( geometry, new THREE.MultiMaterial( materials ) );
mesh.position.x = 0;
mesh.position.y = 0;
mesh.position.z = 0;
mesh.scale.x = mesh.scale.y = mesh.scale.z =100;
scene.add( mesh );
});
大家学会了吗?赶紧动手尝试一下吧。
相关推荐:
three相机在模型上_实例讲解Three.js加载外部模型相关推荐
- three相机在模型上_Three.js加载外部模型的教程详细解说
1. 首先我们要在官网: https://threejs.org/ 下载我们three.js压缩包,并将其中的build文件夹下的three.js通过script标签对的src属性导入到我们的页面中 ...
- Three.js加载外部模型骨骼动画
加载外部模型骨骼动画 上节课是通过Threejs程序创建一个骨骼动画然后解析播放,本节课是加载解析一个外部的骨骼动画模型文件. 查看骨骼动画数据 在解析模型骨骼动画之前,先加载外部的三维模型,查看骨骼 ...
- three.js加载OBJ模型
three.js加载OBJ模型 推荐一个免费下载3D模型的网址https://www.cgtrader.com,包含多种格式(obj, mtl等). three.js现在是es6语法,旧版本是es5的 ...
- three.js加载3d模型_基于WebGL的3D技术在网页中的运用 ThingJS 前端开发
Three.js.ThingJS这些引擎库可以加载3D制作软件的模型,大幅度提高了制作效率,改变WebGL开发困难的局面,让Web开发者享受便捷的3D开发服务.三者的难度对比如下: ThingJS(框 ...
- 【Threejs 微信小程序】小程序加载外部模型后对模型进行平移旋转操作
一.效果展示 需要实现的功能,对已经加载进小程序里的模型进行沿着xyz轴方向去旋转和平移. 如下图的效果: 点击底部的按钮,对模型进行平移和旋转操作. 二.方法描述 关于平移和旋转的方法 比如沿着 Y ...
- three.js加载obj模型和材质
1.Vue中安装three.js和加载用的包 安装three.js使用npm install three --save 安装加载obj和mtl文件的包npm install three-obj-mtl ...
- three.js 加载gltf模型的简化demo
目录 前言 下载依赖 改造插件 主要代码 效果 前言 最近需要做一个three.js加载三维模型的,才发现three.js的官网和网上的示例挺乱的.甚至有人说把three.js的全部demo下载下来, ...
- Three.js加载Sketchfab模型
Sketchfab 的 API 使你能够以编程方式访问网络上最大的 glTF 3D 模型集合. 本文通过一个最小的代码示例向你展示如何: 让你的用户使用 Sketchfab API 进行身份验证 将 ...
- 首次使用three.js加载obj模型未成功
接此,https://blog.csdn.net/bcbobo21cn/article/details/110676331 基本代码如下: <!DOCTYPE html> <html ...
最新文章
- 打开linux虚拟机ssh服务,虚拟机中Ubuntu11.04如何开启ssh服务?
- 爬取数据解决方案- 每页打开+单个查询
- URAL 1011 Conductors
- android webview 重定向 goback,Android WebView 网址重定向影响 goBack
- 年度总结 | Flink 年度最佳学习路线总结
- mysql mysqli 修改_php mysqli 增删改查操作
- uni-app微信小程序登录授权
- 用python将word文档导入数据库_python读取word文档,插入mysql数据库实例
- OpenCV-图像处理(20、霍夫变换-直线)
- 如何学习PMP才算是成功?
- 关于近期卡巴斯基6.0授权文件被封的解决方案
- java所有单词汇总
- 使用opencv-python读取webm格式的视频并转换成图片和avi格式的视频
- 阿里云搭建WordPress系统
- python批量自动填写网页表单_Python爬虫自动填写调查表
- 短信通道防盗刷,短信发送策略
- 第三课——win10常用快捷键的使用
- Python:输入身份证号,计算出生日期、年龄、性别(源码+效果图)
- 【推荐】我的FLASH情结2010——浅谈FLASH WEB GAME与创业(3)
- uniAPP小程序webview从H5返回小程序不起作用
热门文章
- 红帽Redhat产品资料官方文档
- Linux Socket C语言网络编程:TCP Socket
- 【编译制导指令】#pragma pack - 字节数基准对齐
- Java实现将二进制文件显示为图片(SU中的ximage)
- python取出矩阵中的某一元素_将tensorflow.Variable中的某些元素取出组成一个新的矩阵示例...
- python 包 子文件夹调用_15步,你就能拥有自己的Python程序包
- idea开发搭建scala项目流程(二)
- 加州大学欧文分校 计算机专业,UCI的Computer Science「加州大学欧文分校计算机科学系」...
- 后勤管理系统_高校后勤设备报修管理系统_易报修系统高校后勤管理系统_免费高校后勤管理系统...
- scp复制linux系统的文件文件到本机(windows)以及本机文件复制到远程的命令