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>
相关推荐
农场主er15 小时前
Metal - 5.深入剖析 3D 变换
3d·opengl·transform·matrix·metal
一朵小红花HH16 小时前
SimpleBEV:改进的激光雷达-摄像头融合架构用于三维目标检测
论文阅读·人工智能·深度学习·目标检测·机器学习·计算机视觉·3d
CG_MAGIC18 小时前
Blender 创作手记:皮椅的针织布皮革质感塑造之旅
3d·blender·建模教程·pointiness 节点
BFT白芙堂21 小时前
【买机器人,上BFT】北京大学联合项目 论文解读 | H2R:一种用于机器人视频预训练的人机数据增强技术
人工智能·机器学习·3d·机器人·franka·leaphand·灵巧手方案
爱吃小胖橘1 天前
Unity-动画目标匹配
3d·unity·c#·游戏引擎
GitCode官方1 天前
腾讯混元 3D 系列两大模型正式于 GitCode 开源:首个原生3D部件生成+多条件控制模型免费开放
3d·开源·gitcode·混元·hunyuan
dami_king1 天前
RTX4090算力应用-3D
人工智能·深度学习·3d·ai
_JinHao1 天前
Cesium Viewer对象详解——Cesium基础笔记(快速入门)
前端·javascript·笔记·3d·webgl
灰太狼不爱写代码1 天前
3DGS输入的三个bin文件的作用
数码相机·计算机视觉·3d
DDC楼宇自控与IBMS集成系统解读1 天前
DDC 楼宇自控系统 + 3D 可视化运维管理平台融合解决方案
运维·3d