1.引入包三个包

npm i three
npm i three-obj-mtl-loader
npm i orbitcontrols

第三个是辅助控制缩放移动的

2.在vue 组件内 import文件

3.在mound钩子函数内调用

文件

let that = this;this.windowHalfX = window.innerWidth / 2;this.windowHalfY = window.innerHeight / 2;let divs = document.createElement('div');this.container = document.querySelector('.Modal');this.container.appendChild(divs);// 场景this.scene = new THREE.Scene();// 相机this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);this.camera.position.z = 1.5;// 灯光var light = new THREE.AmbientLight('#deebf7', 0.9); // soft white lightthis.scene.add(light);// 渲染器this.renderer = new THREE.WebGLRenderer();this.renderer.setSize(window.innerWidth, window.innerHeight);// this.renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色divs.appendChild(this.renderer.domElement);var onProgress = function(xhr) {if (xhr.lengthComputable) {var percentComplete = (xhr.loaded / xhr.total) * 100;console.log(Math.round(percentComplete, 2) + '% downloaded');}};var onError = function(xhr) {console.log(xhr)};var MTLLoaders = new MTLLoader();var OBJLoaders = new OBJLoader();var textureLoader = new THREE.TextureLoader();MTLLoaders.load('https://xxxxxxxxx.com/18559677286/mesh.mtl', (materials) =>{console.log(materials);materials.preload();// OBJLoaders.setMaterials(materials)OBJLoaders.load('https://xxxxxxxxx.com/18559677286/mesh.obj',(object)=> {console.log(object);// 设置旋转中心点object.children[0].geometry.computeBoundingBox();object.children[0].geometry.center();object.scale.set(3, 3, 3);object.position.y = 0;// this.scene.add(materials);this.scene.add(object);this.renderer.render(this.scene, this.camera);// requestAnimationFrame(anime);textureLoader.load('https://xxxxxxxxx/18559677286/mesh.png', (texture)=> {console.log(texture, object);object.children[0].material.map = texture;// object.children[1].material.map = texture;object.children[0].material.needsUpdate = true;// object.children[1].material.needsUpdate = true;this.scene.add(object);this.renderer.render(this.scene, this.camera);});},onProgress,onError);});window.addEventListener('resize', onWindowResize, false);const controls = new OrbitControls(this.camera, this.renderer.domElement)controls.enableDamping = truecontrols.dampingFactor = 0.25controls.enableZoom = falsecontrols.addEventListener('change', render); //监听鼠标、键盘事件function onWindowResize() {windowHalfX = window.innerWidth / 2;windowHalfY = window.innerHeight / 2;this.camera.aspect = window.innerWidth / window.innerHeight;this.camera.updateProjectionMatrix();this.renderer.setSize(window.innerWidth, window.innerHeight);}function render() {that.camera.lookAt(that.scene.position);that.renderer.render(that.scene, that.camera);}render();

4.效果图

部分加载报错

在node_module > three-obj-mtl-loader > index.js中找到第543行并注释掉。在 545行重新定义loader
原代码:

新修改

另：HTML页面使用three加载obj文件和mtl文件

Vue引入Thee.js 加载obj文件和mtl文件并上纹理贴图相关推荐

three、vue中使用three、three怎么加载obj模型和mtl文件、three自定义800*800大小怎么拾取/点击
以上都是这一个星期碰到的坑,找了很多很多资料,总结归纳一下,希望对你的项目有一点点帮助先说说需求 1.加载3D模型 2.点击模型的子模型会显示对于子模型名称 3.不全屏展示,还要点击子模型 4.创建 ...
vue使用three.js加载obj和mtl
①构建三维坐标,代码如下  <template><div id="container"></div> </te ...
VR 效果前端使用 three.js 加载 Obj，drc文件（三维模型文件）
VR 效果前端使用 three.js 加载 Obj(三维模型文件) 前言:我对 three.js 并不熟!只是朋友有这个需求,写了几个 demo 运行,能看~.如果想深入学习,还需要多看看官方文档, ...
three.js加载OBJ模型
three.js加载OBJ模型推荐一个免费下载3D模型的网址https://www.cgtrader.com,包含多种格式(obj, mtl等). three.js现在是es6语法,旧版本是es5的 ...
vue中通过js加载图片显现
在vue开发中会遇到这样的问题:有时需要在img中加载多个静态资源的图片,如果我们将src的路径整个定义成一个变量,会发现img加载不出来正个图片的路径,其实此时需要require()来加载静态资源的 ...
Three.js加载.obj和.mtl文件(无法加载材质、路径错误问题)
加载.obj模型文件本文是Three.js电子书的14.3节使用三维软件导出.obj模型文件的时候,会同时导出一个材质文件.mtl, .obj和.stl文件包含的信息一样都是几何体顶点相关数据,材 ...
threejs加载服务器文件,如何使用Three.js加载obj和mtl文件
OBJ和MTL是3D模型的几何模型文件和材料文件. 在最新的three.js版本(r78)中,以前的OBJMTLLoader类已废弃. 现在要加载OBJ和MTL文件,需要结合OBJLoader和MTL ...
three.js加载obj模型和材质
1.Vue中安装three.js和加载用的包安装three.js使用npm install three --save 安装加载obj和mtl文件的包npm install three-obj-mtl ...
首次使用three.js加载obj模型未成功
接此,https://blog.csdn.net/bcbobo21cn/article/details/110676331 基本代码如下: <!DOCTYPE html> <html ...

Vue引入Thee.js 加载obj文件和mtl文件并上纹理贴图

目录

1.引入包三个包

2.在vue 组件内 import文件

3.在mound钩子函数内调用

4.效果图

部分加载报错

另：HTML页面使用three加载obj文件和mtl文件

Vue引入Thee.js 加载obj文件和mtl文件并上纹理贴图相关推荐

最新文章

热门文章