Simple and fast strengthen your apps with 3d.Built with three.js
<template>
<div>
<FbxViewer
fbx="/path/to/your/model.fbx"
:ToplightPosition="{ x: 0, y: 2, z: 0 }"
:TopPointLight="{ color: '#ffffff', intensity: 1, distance: 8 }"
:BottomLightPosition="{ x: 0, y: -2, z: 0 }"
:BottomPointLight="{ color: '#421630', intensity: 1, distance: 10 }"
:ObjColor="'#fefefe'"
:SceneBg="{ color: '#041839', alpha: 0 }"
:animate="{ animate: true, duration: 1000 }"
:distance="{ minDistance: 0.8, maxDistance: 1 }"
:autoRotate="{ value: true, rotateSpeed: 2 }"
:cameraPosition="{ x: 1, y: 1, z: 1 }"
/>
</div>
</template>
<script>
import FbxViewer from 'my-fbx-viewer';
export default {
components: {
FbxViewer
}
};
</script>| Name | Type | Default Value | Description |
|---|---|---|---|
fbx |
String | - | Path to the FBX file to be displayed. |
ToplightPosition |
{ x: number; y: number; z: number } | { x: 0, y: 2, z: 0 } |
Position of the top light in 3D space. |
TopPointLight |
{ color: string; intensity: number; distance: number } | { color: '#ffffff', intensity: 1, distance: 8 } |
Properties of the top point light. |
BottomLightPosition |
{ x: number; y: number; z: number } | { x: 0, y: -2, z: 0 } |
Position of the bottom light in 3D space. |
BottomPointLight |
{ color: string; intensity: number; distance: number } | { color: '#421630', intensity: 1, distance: 10 } |
Properties of the bottom point light. |
LeftLightPosition |
{ x: number; y: number; z: number } | { x: 0, y: -2, z: 0 } |
Position of the left light in 3D space. |
LeftPointLight |
{ color: string; intensity: number; } | { color: '#ffffff', intensity: 1, distance: 10 } |
Properties of the left point light. |
RightLightPosition |
{ x: number; y: number; z: number } | { x: 0, y: -2, z: 0 } |
Position of the right light in 3D space. |
RightPointLight |
{ color: string; intensity: number; } | { color: '#ffffff', intensity: 1, distance: 10 } |
Properties of the right point light. |
ObjColor |
String | '#fefefe' |
Default color of the object in the scene. |
SceneBg |
{ color: string; alpha: number } | { color: '#041839', alpha: 0 } |
Background color of the scene. |
animate |
{ animate: boolean; duration: number } | { animate: true, duration: 1000 } |
Animation settings for the viewer. |
distance |
{ minDistance: number; maxDistance: number } | { minDistance: 0.8, maxDistance: 1 } |
Distance constraints for camera movement. |
autoRotate |
{ value: boolean; rotateSpeed: number } | { value: true, rotateSpeed: 2 } |
Auto-rotation settings for the scene. |
cameraPosition |
{ x: number; y: number; z: number } | { x: 1, y: 1, z: 1 } |
Default position of the camera. |