Robust 3D Object Viewer Component With Vue And Three.js

Install & Download:

# Yarn
$ yarn add vue-3d-loader
# NPM
$ npm install vue-3d-loader

Description:

The vue-3d-loader is a Vue.js component that combines the capabilities of Three.js to provide a robust 3D viewer. It supports a wide range of 3D model formats, including .dae, .fbx, .gltf, .glb, .obj, .ply, .stl, and .json.

The component allows for loading multiple 3D models simultaneously, including models of different types, and supports Draco glTF models. Additionally, it provides features like custom file type support, scene width and height adjustment, material and texture setup, interactive control, mouse events, lighting, camera position and rotation, and label point addition.

How to use it:

1. To use the ‘vue-3d-loader’ plugin, you can either use it globally or locally in your Vue.js project. For global use, simply import the plugin in your entry file and use the 'Vue.use()' or 'createApp().use()' method to register it. For non-global use, import the plugin in your Vue file and use it in your component.

// global
import vue3dLoader from "vue-3d-loader";
createApp(App).use(vue3dLoader).mount('#app');
// local
import { vue3dLoader } from "vue-3d-loader";

2. Here’s an example of how you can use the vue3dLoader component. In this example, the component is set to a height of 200 pixels, with the fps counter enabled. It loads three different 3D models (.fbx, .obj, and .gltf) simultaneously, with one of the models (.obj) using an external material file (.mtl). The background color is set to a specific hexadecimal value.

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

3. All possible component props.

filePath: string | string[];
// file type is the 3d model(s) file extension, is used for filePath(remote url) without file name extensions
fileType?: string | string[];
width?: number;
height?: number;
position?: coordinates | coordinates[];
rotation?: coordinates | coordinates[];
scale?: coordinates | coordinates[];
lights?: object[];
cameraPosition?: coordinates;
cameraRotation?: coordinates;
cameraUp?: coordinates;
cameraLookAt?: coordinates;
backgroundColor?: number | string;
backgroundAlpha?: number;
controlsOptions?: object;
crossOrigin?: string;
requestHeader?: object;
outputEncoding?: encode;
webGLRendererOptions?: object;
mtlPath?: string | string[];
showFps?: boolean;
textureImage?: string | string[];
clearScene?: boolean;
parallelLoad?: boolean;
labels?: object[];
autoPlay?: boolean;
enableDraco?: boolean;
dracoDir?: string;
intersectRecursive?: boolean;
enableDamping?: boolean;
dampingFactor?: number;
verticalCtrl?: boolean | controlsValue;
horizontalCtrl?: boolean | controlsValue;
plyMaterial?: plyMaterial;
enableAxesHelper?: boolean;
axesHelperSize?: number;
enableGridHelper?: boolean;
minDistance?: number; 
maxDistance?: number;
pointLightFollowCamera?: boolean;

4. Event handlers.

  • @mousedown(mouseEvent, intersects)
  • @mousemove(mouseEvent, intersects)
  • @mouseup(mouseEvent, intersects)
  • @click(mouseEvent, intersects)
  • @process(event, fileIndex)
  • @error(event)
  • @load()

Preview:

Robust 3D Object Viewer Component With Vue And Thress.js

Add Comment