vue使用three.js加载obj和mtl

①构建三维坐标，代码如下

<!--  -->
<template><div id="container"></div>
</template><script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import * as THREE from "three";
import { OBJLoader, MTLLoader } from "three-obj-mtl-loader";
const OrbitControls = require("three-orbit-controls")(THREE);
import Stats from "stats-js";
export default {//import引入的组件需要注入到对象中才能使用components: { THREE, OBJLoader, MTLLoader, OrbitControls, Stats },props: {},data() {//这里存放数据return {};},//监听属性 类似于data概念computed: {},//监控data中的数据变化watch: {},//方法集合methods: {init() {var scene, camera, renderer, controls;scene = initScene();renderScene();// 控制器，监听鼠标事件function renderScene() {renderer.render(scene, camera);}// 场景自适应window.addEventListener("resize", onWindowResize, false);function onWindowResize() {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize(window.innerWidth, window.innerHeight);}function initScene() {// 创建场景var scene = new THREE.Scene();// 创建相机camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight,0.01,1000);//创建渲染器renderer = new THREE.WebGLRenderer({ antialias: true });renderer.setSize(window.innerWidth, window.innerHeight);renderer.setClearColor(0xffffff, 0);renderer.setPixelRatio(window.devicePixelRatio);document.getElementById("container").appendChild(renderer.domElement);// 创建坐标轴var axes = new THREE.AxesHelper(100);scene.add(axes);camera.position.x = 1.8;camera.position.y = 0.6;camera.position.z = 2.7;camera.lookAt(scene.position);scene.add(camera);// 控制器，监听鼠标事件controls = new OrbitControls(camera, renderer.domElement);controls.addEventListener("change", renderScene);return scene;}},animate() {},},//生命周期 - 创建完成（可以访问当前this实例）created() {},//生命周期 - 挂载完成（可以访问DOM元素）mounted() {this.init();},beforeCreate() {}, //生命周期 - 创建之前beforeMount() {}, //生命周期 - 挂载之前beforeUpdate() {}, //生命周期 - 更新之前updated() {}, //生命周期 - 更新之后beforeDestroy() {}, //生命周期 - 销毁之前destroyed() {}, //生命周期 - 销毁完成activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style  scoped>
</style>

②加载obj文件

  // 创建objLoader对象var loader = new OBJLoader();loader.load("../../static/536.obj", function (obj) {  // 调用OBJ的loader函数,加载成功会有个回调函数，参数obj就是模型加载成功后的网格Mesh实例对象scene.add(obj);// 页面加载成功后没有立即渲染模型，调用立即渲染函数renderScene();});

③未看见模型，原因：未设置光源，因此，设置光源

④ 设置网格对象的参数

// 创建objLoader对象var loader = new OBJLoader();loader.load("../../static/536.obj", function (obj) {  // 调用OBJ的loader函数,加载成功会有个回调函数，参数obj就是模型加载成功后的网格Mesh实例对象// 调试发现模型会在y轴上方的，我们希望在y轴的下方一些// 网格模型按xyz进行放缩obj.scale.set(2,2,2);obj.position.y = -65;obj.position.x = -1045;obj.position.z = -50;// 几何体绕着x轴旋转45度obj.rotateX(Math.PI / 6);scene.add(obj);// 页面加载成功后没有立即渲染模型，调用立即渲染函数renderScene();});

⑤贴图

  // 给模型穿衣服，加载uv网格图片,以下代码写在模型加载上面const textureLoader = new THREE.TextureLoader();// 下载地址:https://github.com/mrdoob/three.js/blob/master/examples/textures/uv_grid_opengl.jpgconsole.log("texture对象初始化成功");// 创建objLoader对象var loader = new OBJLoader();loader.load("../../static/536.obj", function (obj) {// 调用OBJ的loader函数,加载成功会有个回调函数，参数obj就是模型加载成功后的网格Mesh实例对象// 调试发现模型会在y轴上方的，我们希望在y轴的下方一些// 遍历子网格obj.traverse(function (child) {if (child.isMesh) {// 纹理设置console.log("遍历子网格");child.material.map = texture;}});// 网格模型按xyz进行放缩obj.scale.set(2, 2, 2);obj.position.y = -65;obj.position.x = -1045;obj.position.z = -50;// 几何体绕着x轴旋转45度obj.rotateX(Math.PI / 6);scene.add(obj);// 页面加载成功后没有立即渲染模型，调用立即渲染函数renderScene();});

⑥管理器

初始化管理器

// 配置加载管理器类，获取加载进度和是否加载出错
const manager = new THREE.LoadingManager();
// 参数1：正在加载的模型，参数2：已经加载的模型 参数3：总的模型数量
manager.onProgress = function(item,loaded,total){console.log(item,loaded,total);
}

预先定义一个存放OBJ模型的变量

// 预先定义一个存放OBJ模型的变量
var object;

编写一个模型加载完成 callback函数

// 编写一个模型加载完成 callback函数
function loadModel(){// 遍历子网格object.traverse(function (child) {if (child.isMesh) {// 纹理设置console.log("遍历子网格");child.material.map = texture;}});// 网格模型按xyz进行放缩object.scale.set(2, 2, 2);object.position.y = -65;object.position.x = -1045;object.position.z = -50;// 几何体绕着x轴旋转45度object.rotateX(Math.PI / 6);scene.add(object);// 页面加载成功后没有立即渲染模型，调用立即渲染函数renderScene();
}loader.load('obj文件路径',function(obj)->{object=obj;
});

将loadModel传递给LoadingManager的构造函数中

// 将loadModel传递给LoadingManager的构造函数中
const manager = new THREE.LoadingManager(loadModel);

将manager作为纹理和模型加载器的构造函数中

// 将manager作为纹理和模型加载器的构造函数中const  textureLoader = new THREE.TextureLoader(manager);var loader =new OBJLoader(manager);

控制台查看manager是否打印，将遍历子网格的方法注释掉暂时用不到

⑥加载mtl文件

// 创建加载mtl的对象，manager作为参数传入var mtlLoader = new MTLLoader(manager);
// 加载mtl 文件 ,参数1： mtl文件路径 , 参数2：回调函数mtlLoader.load('./male02/male02.mtl',function(materials){// 调用预加载函数，作用: 让浏览器提前加载指定资源(加载后并不执行)，在需要执行的时候再执行materials.preload();})

声明一个变量用于存储加载好的材质实例

 // 声明一个变量用于存储加载好的材质实例var mat;mtlLoader.load('./male02/male02.mtl',function(materials){// 调用预加载函数，作用: 让浏览器提前加载指定资源(加载后并不执行)，在需要执行的时候再执行materials.preload();mat=materials;})

载入模型材质

   // 创建加载mtl的对象，manager作为参数传入var mtlLoader = new MTLLoader(manager);// 加载mtl 文件 ,参数1： mtl文件路径 , 参数2：回调函数mtlLoader.load("../../static/536.mtl", function (materials) {// 调用预加载函数，作用: 让浏览器提前加载指定资源(加载后并不执行)，在需要执行的时候再执行materials.preload();mat = materials;// 创建objLoader对象var loader = new OBJLoader(manager);loader.setMaterials(mat);loader.load("../../static/536.obj", function (obj) {object = obj;},onProgress,onError);});

定义onproces函数用于显示模型的加载进度和加载出错函数

 // 定义onproces函数用于显示模型的加载进度function onProgress(xhr) {//做一个判断，如果获取到模型信息就控制台输出一个模型进度if (xhr.lengthComputable) {const percentComplete = (xhr.loaded / xhr.total) * 100;console.log("model " + Math.round(percentComplete, 2) + "% downloaded");}}// 加载出错的函数，暂不编写function onError() {}

作为加载obj文件回调函数的参数

vue使用three.js加载obj和mtl相关推荐

threejs加载服务器文件,如何使用Three.js加载obj和mtl文件
OBJ和MTL是3D模型的几何模型文件和材料文件. 在最新的three.js版本(r78)中,以前的OBJMTLLoader类已废弃. 现在要加载OBJ和MTL文件,需要结合OBJLoader和MTL ...
Three.js加载.obj和.mtl文件(无法加载材质、路径错误问题)
加载.obj模型文件本文是Three.js电子书的14.3节使用三维软件导出.obj模型文件的时候,会同时导出一个材质文件.mtl, .obj和.stl文件包含的信息一样都是几何体顶点相关数据,材 ...
Vue引入Thee.js 加载obj文件和mtl文件并上纹理贴图
目录 1.引入包三个包 2.在vue 组件内 import文件 3.在mound钩子函数内调用 4.效果图部分加载报错另:HTML页面使用three加载obj文件和mtl文件 1.引入包三个包 n ...
HTML版的使用three.js加载obj和mtl文件并上贴图
目录效果图全部代码另: [Vue版的](https://blog.csdn.net/weixin_44601948/article/details/108502580) 效果图全部代码 < ...
three.js加载obj模型和材质
1.Vue中安装three.js和加载用的包安装three.js使用npm install three --save 安装加载obj和mtl文件的包npm install three-obj-mtl ...
three.js加载OBJ模型
three.js加载OBJ模型推荐一个免费下载3D模型的网址https://www.cgtrader.com,包含多种格式(obj, mtl等). three.js现在是es6语法,旧版本是es5的 ...
VR 效果前端使用 three.js 加载 Obj，drc文件（三维模型文件）
VR 效果前端使用 three.js 加载 Obj(三维模型文件) 前言:我对 three.js 并不熟!只是朋友有这个需求,写了几个 demo 运行,能看~.如果想深入学习,还需要多看看官方文档, ...
vue中通过js加载图片显现
在vue开发中会遇到这样的问题:有时需要在img中加载多个静态资源的图片,如果我们将src的路径整个定义成一个变量,会发现img加载不出来正个图片的路径,其实此时需要require()来加载静态资源的 ...
首次使用three.js加载obj模型未成功
接此,https://blog.csdn.net/bcbobo21cn/article/details/110676331 基本代码如下: <!DOCTYPE html> <html ...

vue使用three.js加载obj和mtl

vue使用three.js加载obj和mtl相关推荐

最新文章

热门文章