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 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博客

相关推荐
海的诗篇_2 小时前
前端开发面试题总结-原生小程序部分
前端·javascript·面试·小程序·vue·html
温轻舟3 小时前
3D词云图
前端·javascript·3d·交互·词云图·温轻舟
在下胡三汉4 小时前
粗略地看一下 glTF 2.0 的所有标准属性(顺便说一下,还有 .glb 的结构)
3d
zhongqu_3dnest7 小时前
3D可视化:开启多维洞察新时代
3d·3d建模·空间计算·3d可视化·三维空间·沉浸式体验
sunbyte7 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DragNDrop(拖拽占用组件)
前端·javascript·css·vue.js·vue
试着19 小时前
【数据标注师】3D标注
3d·数据标注师·3d标注
工业3D_大熊10 天前
3D模式格式转换工具HOOPS Exchange如何将3D PDF转换为STEP格式?
3d·pdf·3d格式转换·3d模型格式转换·cad格式转换·cad数据格式转换·3d模型可视化
skyymrj10 天前
Vue3 + Tailwind CSS 后台管理系统教程
前端·css·vue
程序猿小D10 天前
[附源码+数据库+毕业论文]基于Spring+MyBatis+MySQL+Maven+Vue实现的校园二手交易平台管理系统,推荐!
java·数据库·mysql·spring·vue·毕业设计·校园二手交易平台
广州华锐视点10 天前
浅议 3D 展示技术为线上车展新体验带来的助力
3d