vue-3d-loader

vueJS + threeJS 3d viewer component, support dae/fbx/gltf(glb)/obj/ply/stl/json models, and support the same scene to import multiple different 3D models, support mtl materials and texture

简体中文

Click here view demo page

demo gif

Vue3 please install 2.0.0 or later, vue2 please install 1.x.x version

Feature support list

• Load a single 3D model
• Loading Multiple 3D Models Simultaneously
• Load multiple 3D models of different types at the same time
• Load Draco gltf models(See API)
• Set scene width and height
• Set up materials and textures
• interactive control
• mouse event
• light
• Camera position and rotation
• Add label points

install

npm i vue-3d-loader -S # npm install vue-3d-loader -save

or

yarn add vue-3d-loader

How to use vue-3d-loader

If use in global, insert code in entry file：

/* vue2 */
import vue3dLoader from "vue-3d-loader";
Vue.use(vue3dLoader)

/* vue3 */
import vue3dLoader from "vue-3d-loader";
createApp(App).use(vue3dLoader).mount('#app')

If non-global use, insert code in your vue files:

import { vue3dLoader } from "vue-3d-loader"; // The vue3dLoader in {...}

Use tags in your components<vue3dLoader></vue3dLoader>

<vue3dLoader
  :height="200"
  :showFps="true"
  :filePath="['/fbx/1.fbx', '/obj/2.obj', '/gltf/3.gltf']"
  :mtlPath="[null, '/obj/2.mtl', null]"
  :backgroundColor="0xff00ff"
></vue3dLoader>

API

Attributes

Events

Example

1. Load a 3D model

supports dae/fbx/gltf(glb)/obj/ply/stl models

<!-- fbx model -->
<vue3dLoader filePath="models/collada/stormtrooper/stormtrooper.dae"></vue3dLoader>
<!-- obj model -->
<vue3dLoader filePath="/obj/1.obj"></vue3dLoader>

2. Loading multiple models in the same scene

<!-- Load multiple models of different type, support for setting position, scale, and rotation for each model -->
<template>
  <div class="multiple-models">
    <div class="options">
      <input
        name="Fruit"
        type="checkbox"
        @change="setPosition"
        v-model="checkedPosition"
      />set position
      <input
        name="Fruit"
        type="checkbox"
        @change="setScale"
        v-model="checkedScale"
      />set scale
      <input
        name="Fruit"
        type="checkbox"
        @change="setRotation"
        v-model="checkedRotation"
      />set rotation
    </div>
    <vue3dLoader
      :filePath="filePath"
      :scale="scale"
      :position="position"
      :rotation="rotation"
      :cameraPosition="{ x: -500, y: -200, z: -300 }"
    />
  </div>
</template>
<script>
export default {
  data() {
    return {
      filePath: [
        "/models/fbx/Samba Dancing.fbx",
        "/models/collada/pump/pump.dae",
      ],
      scale: [
        { x: 0.4, y: 0.4, z: 0.4 },
        { x: 1, y: 1, z: 1 },
      ],
      position: [
        { x: 1, y: 0, z: 0 },
        { x: 80, y: 40, z: 200 },
      ],
      rotation: [
        { x: 0, y: 0, z: 0 },
        { x: 0, y: -5, z: -10 },
      ],
      checkedPosition: true,
      checkedScale: true,
      checkedRotation: true,
    };
  },
  methods: {
    setPosition() {
      if (this.checkedPosition) {
        this.position = [
          { x: 1, y: 0, z: 0 },
          { x: 80, y: 40, z: 200 },
        ];
        return;
      }
      this.position = [];
    },
    setScale() {
      if (this.checkedScale) {
        this.scale = [
          { x: 0.4, y: 0.4, z: 0.4 },
          { x: 1, y: 1, z: 1 },
        ];
        return;
      }
      this.scale = [];
    },
    setRotation() {
      if (this.checkedRotation) {
        this.rotation = [
          { x: 0, y: 0, z: 0 },
          { x: 0, y: -5, z: -10 },
        ];
        return;
      }
      this.rotation = [];
    },
  },
};
</script>

3. Material and texture

<!-- obj and mtl material -->
<vue3dLoader filePath="/obj/1.obj" mtlPath="/obj/1.mtl" ></vue3dLoader>
<!-- fbx and png texture -->
<vue3dLoader filePath="/fbx/1.fbx" textureImage="/fbx/1.png" ></vue3dLoader>

4. Background color and transparency

<vue3dLoader filePath="/fbx/1.fbx" :backgroundAlpha="0.5" backgroundColor="red"></vue3dLoader>

5. Controls

<template>
  <div class="controls">
    <div class="buttons">
      <!-- Disable right-click dragging -->
      <button @click="enablePan = !enablePan">
        {{ enablePan ? "disable" : "enable" }} translation
      </button>
      <!-- Disable zoom -->
      <button @click="enableZoom = !enableZoom">
        {{ enableZoom ? "disable" : "enable" }} zoom
      </button>
      <!-- Disable rotate -->
      <button @click="enableRotate = !enableRotate">
        {{ enableRotate ? "disable" : "enable" }} rotation
      </button>
    </div>
    <vue3dLoader
      :filePath="'/models/collada/elf/elf.dae'"
      :controlsOptions="{
        enablePan,
        enableZoom,
        enableRotate,
      }"
      :cameraPosition="{ x: 0, y: -10, z: 13 }"
    />
  </div>
</template>
<script>
export default {
  data() {
    return {
      enablePan: true,
      enableZoom: true,
      enableRotate: true,
    };
  },
};
</script>

6. Rotate model

<template>
  <vue3dLoader
    :rotation="rotation"
    @load="onLoad()"
    filePath="/models/collada/elf/elf.dae"
  />
</template>
<script>
export default {
  data() {
    return {
      rotation: {
        x: -Math.PI / 2,
        y: 0,
        z: 0,
      },
    };
  },
  methods: {
    onLoad() {
      this.rotate();
    },
    rotate() {
      requestAnimationFrame(this.rotate);
      this.rotation.z += 0.01;
    },
  },
};
</script>

7. Events

<template>
  <vue3dLoader filePath="/models/ply/Lucy100k.ply" @mousemove="onMouseMove" />
</template>
<script>
export default {
  data() {
    return {
      object: null,
    };
  },
  methods: {
    onMouseMove(event, intersected) {
      if (this.object) {
        this.object.material.color.setStyle("#fff");
      }
      if (intersected) {
        this.object = intersected.object;
        this.object.material.color.setStyle("#13ce66");
      }
    },
  },
};
</script>

8. Loader draco model

Need to download Draco repository storage with local static folder of your project, download url: https://github.com/king2088/vue-3d-loader/blob/master/public/assets/draco.7z

<template>
  <vue3dLoader
    filePath="/models/gltf/LittlestTokyo.glb"
    :cameraPosition="{ x: 10, y: 700, z: 1000 }"
    :enableDraco="true"
    dracoDir="/draco/"
    outputEncoding="sRGB"
  />
</template>

9. More demos code

Click here to see more demo code

Coming soon

• Supports Vue3

Bugs

issues

Thanks

This plugin is inseparable from vue-3d-model