vue-3d-loader

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 [email protected] --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博客

相关推荐
小西几哦5 小时前
3D点云配准RPM-Net模型解读(附论文+源码)
人工智能·pytorch·3d
木木黄木木9 小时前
css炫酷的3D水波纹文字效果实现详解
前端·css·3d
略知1211 小时前
结肠镜3D视频数据集-C3VD论文中文版
3d·3d视觉·数据集、
摆烂仙君14 小时前
3D意识(3D Awareness)浅析
人工智能·深度学习·计算机视觉·3d
百锦再14 小时前
React编程高级主题:错误处理(Error Handling)
前端·javascript·react.js·前端框架·vue·web·angular
whuzhang162 天前
3dgs通俗讲解
3d
3DVisionary2 天前
3D-DIC与机器学习协同模拟材料应力-应变本构行为研究
人工智能·机器学习·3d·3d-dic技术 机器学习·应力-应变本构行为·卷积神经网络(ecnn)·数字图像相关法(dic)
千鼎数字孪生-可视化2 天前
3D模型给可视化大屏带来了哪些创新,都涉及到哪些技术栈。
ui·3d·信息可视化·数据分析
跟着珅聪学java2 天前
spring boot +Elment UI 上传文件教程
java·spring boot·后端·ui·elementui·vue
杉之2 天前
常见前端GET请求以及对应的Spring后端接收接口写法
java·前端·后端·spring·vue