实现效果
Tips:先泼个冷水，这个预览3D组件有个致命的缺陷——不能设置材质、皮肤文件的目录路径，必须要和3d文件放在同一个目录，如果项目是用hash模式(url后面会有/#/这种井号)，就会导致无法读取根目录的材质文件。所以推荐了解下 vue-3d-loader
安装先
npm install vue-3d-model --save属性
| prop | type | default | example |
|---|---|---|---|
| src | string | - | './exapmle.obj' |
| width | number | - | 300 |
| height | number | - | 300 |
| position | object | { x: 0, y: 0, z: 0 } | { x: 100, y: 20, z: -10 } |
| rotation | object | { x: 0, y: 0, z: 0 } | { x: Math.PI / 2, y: 0, z: - Math.PI / 4 } |
| cameraPosition | object | { x: 0, y: 0, z: 0 } | { x: 1, y: 2, z: -3 } |
| cameraRotation | object | { x: 0, y: 0, z: 0 } | { x: 3, y: 2, z: -1 } |
| scale | object | { x: 1, y: 1, z: 1 } | { x: 2, y: 2, z: 3 } |
| lights | array | - | |
| backgroundColor | number/string | 0xffffff | 0xffffff/'#f00'/'rgb(255,255,255)' |
| backgroundAlpha | number | 1 | 0.5 |
| controlsOptions | object | - | see OrbitControls Propertiesopen in new window |
| crossOrigin | string | anonymous | anonymous/use-credentials |
| requestHeader | object | - | { 'Authorization: Bearer token' } |
| outputEncoding | number | THREE.LinearEncoding | see WebGLRenderer OutputEncodingopen in new window |
| glOptions | object | { antialias: true, alpha: true } | see WebGLRenderer Parametersopen in new window |
事件
| event |
|---|
| mousedown |
| mousemove |
| mouseup |
| click |
| load |
| progress |
| error |
插槽
| slots |
|---|
| progress-bar |
| poster |
<template>
<div class="threeDPreview">
<!-- 3D立体文件预览 -->
<div if="threeDComponents" class="threeD">
<component
:is="threeDComponents.componentName"
:backgroundAlpha="1"
:backgroundColor="'#000'"
:rotation="ratation"
:src="`${encodeURIComponent(_fileURL)}`"
@load="onLoad" />
</div>
</div>
</template>
<script>
//引入3D预览插件 npm install vue-3d-model --save
import { ModelCollada, ModelFbx, ModelGltf, ModelThree, ModelObj, ModelPly, ModelStl, } from 'vue-3d-model';
export default {
components: {
ModelCollada, ModelFbx, ModelGltf, ModelThree, ModelObj, ModelPly, ModelStl,
},
data() {
return {
load: null,
threeDfileTypes: [
{ label: 'dae', value: 1, iconURL: 'static/img/fileType/3D/dae.svg', componentName: 'ModelCollada' },
{ label: 'fbx', value: 2, iconURL: 'static/img/fileType/3D/fbx.svg', componentName: 'ModelFbx' },
{ label: 'gltf', value: 3, iconURL: 'static/img/fileType/3D/gltf.svg', componentName: 'ModelGltf' },
{ label: 'json', value: 4, iconURL: 'static/img/fileType/3D/json.svg', componentName: 'ModelThree' },
{ label: 'obj', value: 5, iconURL: 'static/img/fileType/3D/obj.svg', componentName: 'ModelObj' },
{ label: 'ply', value: 6, iconURL: 'static/img/fileType/3D/ply.svg', componentName: 'ModelPly' },
{ label: 'stl', value: 7, iconURL: 'static/img/fileType/3D/stl.svg', componentName: 'ModelStl' },
],
ratation: {
x: -Math.PI / 2,
y: 0,
z: 0,
},
_fileURL: '',
_fileType: '',
};
},
props: ["fileURL", "fileType"],
watch: {
fileURL: {
handler(d) {
this._fileURL = decodeURIComponent(d || this.$route.query.fileURL);
}, deep: true, immediate: true,
},
fileType: {
handler(d) {
this._fileType = d || this._fileURL.split('.').slice(-1)[0];
// 如果是3D文件个后缀名格式
if (this.threeDfileTypes.find(v => v.label == this._fileType)) {
this.showLoad();
}
}, deep: true, immediate: true,
},
},
computed: {
threeDComponents() {
return this.threeDfileTypes.find(v => v.label == this._fileType);
},
},
methods: {
showLoad() { this.load = this.$loading({ text: "加载中…" }); },
hideLoad() { this.load && this.load.close(); },
onLoad(d) {
this.rotate();
this.hideLoad();
},
rotate() {
requestAnimationFrame(this.rotate);//实现自动旋转效果
this.rotation.z += 0.01;
},
}
};
</script>
<style lang="scss" scoped>
.threeDPreview {
position: relative;
.threeD {
width: 100%;
height: calc(100vh - 60px);
}
}
</style>相关API文档来源：
安装 | Vue 3D ModelVue 3D Modelhttps://vue-3d-model.netlify.app/zh/guide/installation/
可能会遇到的报错
vue-3d-model.umd.js报错You may need an appropriate loader to handle this file type怎么办？_你挚爱的强哥的博客-CSDN博客找到 node_modules\vue-3d-model\dist\vue-3d-model.umd.js文件。大约是9281行代码。https://blog.csdn.net/qq_37860634/article/details/131491871文章来源：https://www.toymoban.com/news/detail-600260.html
其他可以预览3D的组件，前列腺推荐！
推荐：vue-3d-loader支持.dae/.fbx/.gltf/.glb/.obj/.ply/.stl/.json，并支持同一个场景导入多个不同3D模型，支持mtl材质以及jpg/png等图片纹理_你挚爱的强哥的博客-CSDN博客vue-3d-loader是vueJS + threeJS整合的一个3d展示组件。支持.dae/.fbx/.gltf/.glb/.obj/.ply/.stl/.json，并支持同一个场景导入多个不同3D模型，支持mtl材质以及jpg/png等图片纹理vue3请安装及以上版本，vue2请安装版本。https://blog.csdn.net/qq_37860634/article/details/131494010文章来源地址https://www.toymoban.com/news/detail-600260.html
到了这里，关于Vue使用vue-3d-model组件预览3D三维文件、立体文件，支持旋转、自动播放的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
