vue-3d-model

• 移动开发

vue-3d-model – npm

GitHub – hujiulong/vue-3d-model: 📷 vue.js 3D model viewer component

通过该插件降低Threejs的使用难度

vue-3d-model

vue项目加载三维模型，我把模型放在了服务器的tomcat里面，需要对tomcat的fbx项目文件夹设置跨域，如下：

WEB-INF\web.xml



    
      cross-origin
      org.apache.catalina.filters.CorsFilter
      
        cors.allowed.origins
        *
      
      
        cors.allowed.methods
        GET,POST,PUT,DELETE,HEAD,OPTIONS
      
      
        cors.allowed.headers
        *
      
    
   
    
        cross-origin
        /*

vue项目要注意版本

# 默认安装 "vue-3d-model": "^1.4.1", 只支持vue2
npm i vue-3d-model
# vue3 需要安装2版本，vite只建立在vue3之上的，因此vite也是需要安装2版本
npm i vue-3d-model@v2.0.0-alpha.4 --save

代码

  
    
    
    
    <!--  -->
  



import { ModelFbx, ModelGltf } from 'vue-3d-model';

export default {
  components: {
    ModelFbx, ModelGltf
  },
  data() {
    return {
      scale: { x: 1.5, y: 1.5, z: 1.3 },
      rotation: {
        x: 0,
        y: 0,
        z: 0,
      },
      imgUrl: 'yushuihy',
      //3d模型灯光
      lights: [
        {
          type: 'HemisphereLight',
          position: { x: 2, y: 2, z: 2 },
          skyColor: 0xffffff,
          intensity: 3,
        },
        {
          type: 'DirectionalLight',
          position: { x: 2, y: 2, z: 2 },
          color: 0xffffff,
          intensity: 3,
        }
      ],
    }
  },
  methods: {
    onLoad() {
      console.log('模型加载完成')
      this.rotate();
    },
    rotate() {
      requestAnimationFrame(this.rotate);//实现自动旋转效果
      this.rotation.y += 0.001;
    },
  }
}



html,
body {
  padding: 0;
  margin: 0;
  overflow: hidden;
}

.player-container {
  width: 100vw;
  height: 100vh;
  background-color: black;
}

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://net2asp.com/ac80d14d8c.html

赞 (0)
« 上一篇 1天前
下一篇 » 1天前

相关推荐