vue中使用three.js导入外部3D模型

最近公司有一个需要用到3D模型的项目，所以就学习了一下，在这里小小的记录一下

下载依赖

npm i three -D
npm i three-obj-mtl-loader -D
npm i three-orbit-controls

导入依赖

import * as THREE from “three”;
import { OBJLoader, MTLLoader } from “three-obj-mtl-loader”;
import { GLTFLoader } from “three/examples/jsm/loaders/GLTFLoader”;
import {DDSLoader} from “three/examples/jsm/loaders/DDSLoader”;
import { CSS2DRenderer, CSS2DObject } from “three-css2drender”;
import { AmbientLight, LightShadow } from “three”;
const OrbitControls = require(“three-orbit-controls”)(THREE);

项目结构

依赖的版本

案例代码

这个地方有一个需要注意的位置就是在加载模型的时候的依赖 three-obj-mtl-loader 有所更新需要在node_modules文件夹下找到这个依赖修改index.js文件修改为这样

还有一个点需要注意，就是材质包的导入路径问题

还有一个就是模型需要放到项目的根目录下和public下

<template><div id="container"></div>
</template>
<script>
import * as THREE from "three";
import { OBJLoader, MTLLoader } from "three-obj-mtl-loader";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import {DDSLoader} from "three/examples/jsm/loaders/DDSLoader";
import { CSS2DRenderer, CSS2DObject } from "three-css2drender";
import { AmbientLight, LightShadow } from "three";
const OrbitControls = require("three-orbit-controls")(THREE);
export default {name: "vue-three",data() {return {scene: null,camera: null,renderer: null,};},methods: {// 初始化场景init() {let container = document.getElementById("container");/* 场景*/this.scene = new THREE.Scene();/* 相机*/this.camera = new THREE.PerspectiveCamera(30,container.clientWidth / container.clientHeight,1,1000);this.camera.position.z = 50;/* 渲染器*/this.renderer = new THREE.WebGLRenderer({ antialias: true });this.renderer.setSize(container.clientWidth, container.clientHeight);this.renderer.setClearColor(0xb9d3ff, 1);container.appendChild(this.renderer.domElement);new OrbitControls(this.camera, this.renderer.domElement);},// 加载模型loadObj() {let manager = new THREE.LoadingManager();manager.addHandler( /\.dds$/i, new DDSLoader());new MTLLoader(manager).setPath("/model/male02/").load("male02.mtl", (materials) => {console.log(manager);materials.preload();new OBJLoader(manager).setMaterials(materials).load("/model/male02/male02.obj", (obj) => {console.log(obj.children[0].material);obj.scale.set(0.09, 0.09, 0.09);obj.position.set(0, -7, 0);this.scene.add(obj);});});// new GLTFLoader().load("/model/Duck/Duck.gltf", (obj) => {//   console.log(obj);//   this.scene.add(obj.scene);//   obj.scene.scale.set(5, 5, 5);// });},// 灯光效果light() {//添加聚光灯光源/*       let light = new THREE.SpotLight(0xffffff);light.position.set(-40, 60, -10);light.castShadow = true;light.shadow.mapSize.width = 2048;light.shadow.mapSize.height = 2048; */let light = new THREE.DirectionalLight(0xdfebff, 0.45); //从正上方（不是位置）照射过来的平行光，0.45的强度light.position.set(50, 200, 100);light.position.multiplyScalar(0.3);this.scene.add(light);//添加环境光let ambientLight = new THREE.AmbientLight("#ffffff");this.scene.add(ambientLight);},// 动画效果animate() {requestAnimationFrame(this.animate);this.renderer.render(this.scene, this.camera);},},mounted() {this.init();this.loadObj();this.light();this.animate();},
};
</script><style scoped>
#container {width: 800px;margin: 0 auto;height: 500px;overflow: hidden;
}
</style>

可能出现的问题

1、模型是加载出来是黑色的
问题可能是没有加光源，可以尝试加一下环境光
2、材质包加载不出来
检测一下文件的路径，可以F12一下看看材质包有没有加载出来，文件的加载路径是不是写错了加载出来的话是这个效果

3、如果没有报错的话，材质包也加载出来了可以试试调整模型的大小和位置

还有一种比较简单的是使用vue-3d-model这个我下一篇文章会说，但是有一个缺点就是有比较严重的阴影问题

three的效果

vue-3d-model的效果

我自己写的Demo的地址可以自己下下来看看借鉴一下使用的是vue3.0

项目地址

vue中使用three.js导入外部3D模型相关推荐

【uni-app】只支持在微信小程序运行的导入外部3d模型
1.解决问题 uniapp 导入3d模型,在微信小程序端运行.只支持在微信小程序端使用,若要支持 h5 和 APP端,可以查看这篇,点击这里只导入了3d模型,未设置让模型动. 2.导入模型格式 gl ...
uniapp vue3中引入外部3D模型(适配App)
uniapp vue3中引入外部3D模型(适配App) 主要方式是通过renderjs来实现的, 因为使用threejs的话需要获取页面上的dom节点, 然后需要把threejs创建出来的canvan ...
Vue 中引用第三方js总结
vue中引用第三方js总结 By:授客 QQ:1033553122 实践环境 win10 Vue 2.9.6 本文以引用jsmind为例,讲解怎么在vue中引用第三方js类库基础示例 1.把下载好的 ...
vue中config/index.js:配置的详细理解
当我们需要和后台分离部署的时候,必须配置config/index.js: 用vue-cli 自动构建的目录里面 (环境变量及其基本变量的配置) 1 2 3 4 5 6 7 8 9 10 11 12 ...
如何在 Vue 中使用 Chart.js - 手把手教你搭可视化数据图表
本文首发:<如何在 Vue 中使用 Chart.js - 手把手教你搭可视化数据图表> 使用 Chart.js 在 Vue 搭建的后台管理工具里添加炫酷的图表,是所有数据展示类后台必备的功 ...
在vue中使用three.js
vue中使用three.js vue 安装: npm install --save three 在要使用的页面中引入three.js import * as Three from 'three' 参考 ...
vue js 定义对象_JS标准内置对象Proxy及Vue中的proxy.js文件
昔登铜井望法华,葱茏螺黛浮蒹葭.今登法华望铜井,湖水迷茫烟色瞑.-- <登法华寺山顶> Proxy是什么 Proxy是JS标准内置对象中的一个对象.用于创建一个对象的代理.从而实现对对象操 ...
vue中解决three.js出现内存泄漏丢失上下文问题
vue中解决three.js出现内存泄漏丢失上下文问题参考文章: (1)vue中解决three.js出现内存泄漏丢失上下文问题 (2)https://www.cnblogs.com/lichuank ...
vue中使用raphael.js实现地图绘制
一.效果图二.在vue中引入raphael.js npm i raphael -S 三.封装一个名为StreetMap的组件,代码如下 1 <template> 2 <div> ...

vue中使用three.js导入外部3D模型

vue中使用three.js导入外部3D模型相关推荐

最新文章

热门文章