vue-3d-model

vue-3d-model - npm

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

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

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

WEB-INF\web.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd">
<web-app>
    <filter>
      <filter-name>cross-origin</filter-name>
      <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
      <init-param>
        <param-name>cors.allowed.origins</param-name>
        <param-value>*</param-value>
      </init-param>
      <init-param>
        <param-name>cors.allowed.methods</param-name>
        <param-value>GET,POST,PUT,DELETE,HEAD,OPTIONS</param-value>
      </init-param>
      <init-param>
        <param-name>cors.allowed.headers</param-name>
        <param-value>*</param-value>
      </init-param>
    </filter>
   
    <filter-mapping>
        <filter-name>cross-origin</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
</web-app>

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 

代码

<template>
  <div class="player-container">
    <!--1版本 @on-load-->
    <!--2版本 @load-->
    <model-fbx :background-alpha="0" :scale="scale" :rotation="rotation" :lights="lights" src="https://***/fbx/yushuihy.FBX"
      @on-load="onLoad" />
    <!-- <model-gltf :background-alpha="0" :scale="scale" :rotation="rotation" :lights="lights"
      src="https://***/fbx/panjiduanmian.glb" @on-load="onLoad" /> -->
  </div>
</template>

<script>
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;
    },
  }
}
</script>

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

.player-container {
  width: 100vw;
  height: 100vh;
  background-color: black;
}
</style>
相关推荐
Yaml47 小时前
Spring Boot 与 Vue 共筑二手书籍交易卓越平台
java·spring boot·后端·mysql·spring·vue·二手书籍
清灵xmf10 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
starsongda12 小时前
VR科技展厅重塑科技展示新风貌,引领未来展示潮流
科技·3d·vr
兔老大的胡萝卜13 小时前
threejs 数字孪生,制作3d炫酷网页
前端·3d
CV-X.WANG16 小时前
【详细 工程向】基于Smart3D的五镜头相机三维重建
数码相机·3d
JoeyKo1 天前
国内版Sketchfab平台 - CG美术之家(3D编辑发布篇)
3d·3d建模·3dsmax·3d渲染·模型·3d模型·cg模型
mirrornan1 天前
3D互动+AR试戴,重塑线上珠宝营销新体验!
3d·ar
琴~~2 天前
前端根据后端返回的文本流逐个展示文本内容
前端·javascript·vue
DisonTangor2 天前
腾讯混元3D-1.0:文本到三维和图像到三维生成的统一框架
人工智能·3d·aigc
程序员徐师兄2 天前
基于 JavaWeb 的宠物商城系统(附源码,文档)
java·vue·springboot·宠物·宠物商城