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

相关推荐
苏打水com20 小时前
前端框架深度解析:Vue.js 3 从 Composition API 到生态升级,解锁企业级开发新能力
vue
知识分享小能手1 天前
微信小程序入门学习教程,从入门到精通,微信小程序核心 API 详解与案例(13)
前端·javascript·学习·react.js·微信小程序·小程序·vue
小灰灰的可爱无人可替代1 天前
记录一次使用docker和docker-compose更新vue前端项目问题
nginx·docker·vue
二川bro2 天前
第28节:网络同步与多人在线3D场景
网络·3d
java水泥工2 天前
酒店客房管理系统|基于SpringBoot和Vue的酒店客房管理系统(源码+数据库+文档)
spring boot·vue·酒店管理系统·酒店客房管理系统
nnnnichijou3 天前
Qt Quick 3D-机械臂模型显示与交互
qt·3d·交互
m0_743106463 天前
LOBE-GS:分块&致密化效率提升
人工智能·算法·计算机视觉·3d·几何学
视觉人机器视觉3 天前
机器视觉Halcon3D中,六大类3D处理算子
人工智能·计算机视觉·3d·视觉检测
Damon小智3 天前
从零开始XR开发:Three.js实现交互式3D积木搭建器
javascript·3d·xr
-dzk-3 天前
【3DGS复现】Autodl服务器复现3DGS《简单快速》《一次成功》《新手练习复现必备》
运维·服务器·python·计算机视觉·3d·三维重建·三维