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

相关推荐
Sitarrrr1 小时前
【Unity】ScriptableObject的应用和3D物体跟随鼠标移动:鼠标放置物体在场景中
3d·unity
Yaml410 小时前
Spring Boot 与 Vue 共筑二手书籍交易卓越平台
java·spring boot·后端·mysql·spring·vue·二手书籍
清灵xmf13 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
starsongda15 小时前
VR科技展厅重塑科技展示新风貌,引领未来展示潮流
科技·3d·vr
兔老大的胡萝卜16 小时前
threejs 数字孪生,制作3d炫酷网页
前端·3d
CV-X.WANG19 小时前
【详细 工程向】基于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