vue-3d-loader - npm

GitHub - king2088/vue-3d-loader: VueJS and threeJS 3d viewer

是对 vue-3d-model 的改进，降低Threejs使用难度

# 默认安装 "vue-3d-loader": "^1.3.4", 只支持vue2
npm i vue-3d-loader
# vue3 需要安装2版本，vite只建立在vue3之上的，因此vite也是需要安装2版本
npm i vue-3d-loader@2.2.1 --save 

<template><div class="player-container"><!--1和2版本都是 @load--><vue3dLoader style="height: 100vh;" :showFps="false" :scale="scale" :rotation="rotation" :lights="lights" filePath="https://basin.csceccloud.net:9000/tomcat/fbx/yushuihy.FBX":backgroundAlpha="0" @load="onLoad"></vue3dLoader><!-- <vue3dLoader style="height: 100vh;" :showFps="false" :scale="scale" :rotation="rotation" :lights="lights" filePath="https://basin.csceccloud.net:9000/tomcat/fbx/panjiduanmian.glb":backgroundAlpha="0" @load="onLoad"></vue3dLoader> --></div>
</template><script>
import { vue3dLoader } from "vue-3d-loader";export default {components: {vue3dLoader},data() {return {scale: { x: 1.5, y: 1.5, z: 1.3 },rotation: {x: 0,y: 0,z: 0,},//3d模型灯光lights: [{type: 'HemisphereLight',position: { x: 2, y: 2, z: 2 },skyColor: 0xffffff,intensity: 2,},{type: 'DirectionalLight',position: { x: 2, y: 2, z: 2 },color: 0xffffff,intensity: 2,}],}},methods: {onLoad() {console.log('模型加载完成')this.rotate();},rotate() {requestAnimationFrame(this.rotate);//实现自动旋转效果this.rotation.y += 0.001;},}
}
</script><style>
html,
body {padding: 0;margin: 0;overflow: hidden;
}.player-container {width: 100vw;height: 100vh;background-color: black;
}
</style>

模型放在服务器的tomcat中，跨域配置参见这篇文章：

vue-3d-model-CSDN博客