npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vue-3d-previewer

v0.0.5

Published

Vue 3d viewer based on threeJS

Downloads

5

Readme

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

demo gif image

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)
  • Supports custom file type(for url without file extensions)
  • 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

| prop | type | default | description | | -------------------- | ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | filePath | string | array | - | File path, supports multiple files to be loaded together, note: If each file corresponds to a material, you need to set the material mtlPath as an array. The same is true for image textures, which need to be set to textureImage as an array | | fileType | string | array | - | File type is the 3d model(s) file extension, is used for filePath(http url) without file extensions. Is used together with filePath. If filePath is an array, this parameter must be an array.| | mtlPath | string | array | - | .material path, supports multiple materials to be loaded together, set this parameter to an array, you must set filePath to an array | | textureImage | string | array | - | jpg/png texture, if is array, filePath must be set to an array | | width | number | - | width | | height | number | - | height | | position | object | array | - | object position | | rotation | object | array | - | rotation coordinates | | cameraPosition | object | { x: 0, y: 0, z: 0 } | camera position | | cameraRotation | object | - | camera rotation | | scale | object | array | { x: 1, y: 1, z: 1 } | scale the model | | lights | array | [{type: "AmbientLight",color: 0xaaaaaa,},{type: "DirectionalLight",position: { x: 1, y: 1, z: 1 },color: 0xffffff,intensity: 0.8,}] | lights is array, type AmbientLight and DirectionalLight | | backgroundColor | number | string | 0xffffff | background color supports number/hex/rgb. like 0xffffff/#f00/rgb(255,255,255) | | backgroundAlpha | number | 1 | Background transparency (range 0-1) | | controlsOptions | object | - | control parameter OrbitControls Properties | | crossOrigin | string | anonymous | Cross-domain configuration. The value is anonymous or use-credentials | | requestHeader | object | - | set request header. example: { 'Authorization: Bearer token' } | | outputEncoding | string | linear | The value is linear or sRGB. Renderer's linear is LinearEncoding, sRGB is sRGBEncoding (sRGBEncoding can restore material color better). Renderer's output encoding WebGLRenderer OutputEncoding | | webGLRendererOptions | object | { antialias: true, alpha: true } | WebGLRenderer options WebGLRenderer Parameters | | showFps | boolean | false | show stats infomation | | clearScene | boolean | false | clear scene | | parallelLoad | boolean | false | enable/disable parallel load models (useful only for multi-model loading). Use this attribute, the process event will be unpredictable | | labels | object | {image: "", text: "", textStyle: { fontFamily: "Arial", fontSize: 18, fontWeight: "normal", lineHeight: 1, color: "#ffffff", borderWidth: 8, borderRadius: 4, borderColor: "rgba(0,0,0,1)",backgroundColor: "rgba(0, 0, 0, 1)" }, position: {x:0, y:0, z:0}, scale:{x:1, y:1, z:0}, sid: null} | Add an image/text label and set image to display the image label. Set text to display text labels. Text styles can be set using textStyle. For examples, see the examples/add-label.vue file | | autoPlay | boolean | true | auto paly animations | | enableDraco | boolean | false | Load the Gltf Draco model, you need to enable Draco decryption. After the Draco decryption library is enabled, you need to download Draco decryption library and put it into the default directory assets. The default directory is assets/draco/gltf/. If you want to change the default draco directory, use dracoDir parameter. About draco and threeJS | | dracoDir | string | assets/draco/gltf/ | Draco decryption library default directory, you can modified it. | | intersectRecursive | boolean | false | If true, it also checks all descendants. Otherwise it only checks intersection with the object. | | verticalCtrl | boolean | object| false | true,only enable vertical rotation of the camera| | horizontalCtrl | boolean | object| false | true,only enable horizontal rotation of the camera| |plyMaterial|string|MeshStandardMaterial|Value only support MeshStandardMaterial and MeshBasicMaterial. For ply model. MeshStandardMaterial doc. MeshBasicMaterial doc.| | enableAxesHelper | boolean | false | Enable axes | | axesHelperSize | number | 100 | Axes size | | enableGridHelper | boolean | false | Enable grid | | minDistance | float | 0 | How far you can dolly in | | maxDistance | float | Infinity | How far you can dolly out |

Events

| event | description | | ---------------------------- | -------------------------------------------------------------------- | | mousedown(event, intersects) | mouse down, intersect: currently intersecting objects | | mousemove(event, intersects) | mouse move, intersect: currently intersecting objects | | mouseup(event, intersects) | mouse up, intersect: currently intersecting objects | | click(event, intersects) | click, intersect: currently intersecting objects | | load | load model event | | process(event, fileIndex) | loading progress, fileIndex: the index of the currently loaded model | | error(event) | error event |

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

  • [x] Supports Vue3

Bugs

issues

Thanks

This plugin is inseparable from vue-3d-model