實現(xiàn)效果
Tips:先潑個冷水，這個預(yù)覽3D組件有個致命的缺陷——不能設(shè)置材質(zhì)、皮膚文件的目錄路徑，必須要和3d文件放在同一個目錄，如果項目是用hash模式(url后面會有/#/這種井號)，就會導(dǎo)致無法讀取根目錄的材質(zhì)文件。所以推薦了解下?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立體文件預(yù)覽 -->
<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預(yù)覽插件 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);//實現(xiàn)自動旋轉(zhuǎn)效果
this.rotation.z += 0.01;
},
}
};
</script>
<style lang="scss" scoped>
.threeDPreview {
position: relative;
.threeD {
width: 100%;
height: calc(100vh - 60px);
}
}
</style>相關(guān)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文章來源：http://www.zghlxwxcb.cn/news/detail-600260.html
其他可以預(yù)覽3D的組件，前列腺推薦！
推薦：vue-3d-loader支持.dae/.fbx/.gltf/.glb/.obj/.ply/.stl/.json，并支持同一個場景導(dǎo)入多個不同3D模型，支持mtl材質(zhì)以及jpg/png等圖片紋理_你摯愛的強哥的博客-CSDN博客vue-3d-loader是vueJS + threeJS整合的一個3d展示組件。支持.dae/.fbx/.gltf/.glb/.obj/.ply/.stl/.json，并支持同一個場景導(dǎo)入多個不同3D模型，支持mtl材質(zhì)以及jpg/png等圖片紋理vue3請安裝及以上版本，vue2請安裝版本。https://blog.csdn.net/qq_37860634/article/details/131494010文章來源地址http://www.zghlxwxcb.cn/news/detail-600260.html
到了這里，關(guān)于Vue使用vue-3d-model組件預(yù)覽3D三維文件、立體文件，支持旋轉(zhuǎn)、自動播放的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
