vue-3d-loader

vue-3d-loader

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

简体中文

demo gif

Only supports vue2

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

Insert code in entry file：

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

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
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	-	object position
rotation	object	-	rotation coordinates
cameraPosition	object	{ x: 0, y: 0, z: 0 }	camera position
cameraRotation	object	-	camera rotation
scale	object	{ 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	number	THREE.LinearEncoding	Renderer's output encoding WebGLRenderer OutputEncoding
webGLRendererOptions	object	{ antialias: true, alpha: true }	WebGLRenderer options WebGLRenderer Parameters
showFps	boolean	false	show stats infomation

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 -->
<template>
  <vue3dLoader
    :filePath="filePath"
    :scale="{ x: 0.4, y: 0.4, z: 0.4 }"
    :cameraPosition="{ x: 100, y: 200, z: 30 }"
  ></vue3dLoader>
</template>
<script>
export default {
  data() {
    return {
      filePath: [
        "/models/fbx/Samba Dancing.fbx",
        "models/collada/pump/pump.dae",
      ],
    };
  },
};
</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. 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