{"id":17931074,"url":"https://github.com/king2088/vue-3d-loader","last_synced_at":"2025-04-04T14:10:08.612Z","repository":{"id":41469691,"uuid":"509144787","full_name":"king2088/vue-3d-loader","owner":"king2088","description":"VueJS and threeJS 3d viewer plugin","archived":false,"fork":false,"pushed_at":"2024-04-22T08:32:01.000Z","size":33232,"stargazers_count":258,"open_issues_count":7,"forks_count":43,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-26T16:44:13.592Z","etag":null,"topics":["3d","gltf","threejs","vue","vue3","webgl"],"latest_commit_sha":null,"homepage":"https://king2088.github.io/vue-3d-loader-docs","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/king2088.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-06-30T15:58:01.000Z","updated_at":"2025-03-26T05:32:13.000Z","dependencies_parsed_at":"2023-02-09T02:15:46.242Z","dependency_job_id":"f8920a80-9453-4bdc-ad82-138521e305bd","html_url":"https://github.com/king2088/vue-3d-loader","commit_stats":{"total_commits":129,"total_committers":4,"mean_commits":32.25,"dds":"0.023255813953488413","last_synced_commit":"287b4693785b4ab56c6a04ec373e9c94109b71ab"},"previous_names":[],"tags_count":57,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/king2088%2Fvue-3d-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/king2088%2Fvue-3d-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/king2088%2Fvue-3d-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/king2088%2Fvue-3d-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/king2088","download_url":"https://codeload.github.com/king2088/vue-3d-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247190255,"owners_count":20898702,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["3d","gltf","threejs","vue","vue3","webgl"],"created_at":"2024-10-28T21:19:29.622Z","updated_at":"2025-04-04T14:10:08.593Z","avatar_url":"https://github.com/king2088.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-3d-loader\n\nvueJS + threeJS 3d viewer component.  \n\nsupport .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\n\n[![Version](https://img.shields.io/npm/v/vue-3d-loader.svg)](https://www.npmjs.com/package/vue-3d-loader) [![License](https://img.shields.io/npm/l/vue-3d-loader.svg)](https://www.npmjs.com/package/vue-3d-loader) [![Downloads](https://img.shields.io/npm/dt/vue-3d-loader.svg)](https://www.npmjs.com/package/vue-3d-loader)\n\n[简体中文](./readme_CN.md)\n\nDocument：\u003chttps://king2088.github.io/vue-3d-loader-docs/zh/\u003e\n\ndemo gif\n\n![demo gif image](./demo.gif)\n\nVue3 please install **2.0.0** or later, vue2 please install **1.x.x** version\n\n## Feature support list\n\n- Load a single 3D model\n- Load multiple 3D models simultaneously\n- Load multiple 3D models of different types simultaneously\n- Load Draco gltf models(See API)\n- Supports custom file type(for url without file extensions)\n- Set scene width and height\n- Set up materials and textures\n- Interactive control\n- Mouse event\n- Light\n- Camera position and rotation\n- Add label points\n\n## Install vue-3d-loader\n\n```shell\nnpm i vue-3d-loader -S # npm install vue-3d-loader -save\n```\n\nor\n\n```shell\nyarn add vue-3d-loader\n```\n\n## How to use vue-3d-loader\n\nIf use in global, insert code in entry file：\n\n```js\n/* vue2 */\nimport vue3dLoader from \"vue-3d-loader\";\nVue.use(vue3dLoader);\n\n/* vue3 */\nimport vue3dLoader from \"vue-3d-loader\";\ncreateApp(App).use(vue3dLoader).mount(\"#app\");\n```\n\nIf non-global use, insert code in your vue files:\n\n```js\nimport { vue3dLoader } from \"vue-3d-loader\"; // The vue3dLoader in {...}\n```\n\nUse tags in your components`\u003cvue3dLoader\u003e\u003c/vue3dLoader\u003e`\n\n```vue\n\u003cvue3dLoader\n  :height=\"200\"\n  :showFps=\"true\"\n  :filePath=\"['/fbx/1.fbx', '/obj/2.obj', '/gltf/3.gltf']\"\n  :mtlPath=\"[null, '/obj/2.mtl', null]\"\n  :backgroundColor=\"0xff00ff\"\n\u003e\u003c/vue3dLoader\u003e\n```\n\n## API\n\n### Attributes\n\n\u003ctable\u003e\n\u003ctr\u003e\n  \u003cth\u003eProp\u003c/th\u003e\n  \u003cth style=\"min-width:100px\"\u003eType\u003c/th\u003e\n  \u003cth\u003eDefault\u003c/th\u003e\n  \u003cth\u003eValue\u003c/th\u003e\n  \u003cth\u003eDescription\u003c/th\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd\u003e\n  filePath\n  \u003c/td\u003e\n  \u003ctd\u003estring | array\u003c/td\u003e\n  \u003ctd\u003e-\u003c/td\u003e\n  \u003ctd\u003e\n\n  ```js\n  const filePath = './models/tree.obj'\n  /* or */\n  const filePath = [\n    './models/tree.obj', \n    './models/building.obj'\n  ]\n  ```\n\n  \u003c/td\u003e\n  \u003ctd\u003e\n  \n  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\n  \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd\u003e\n  fileType\n  \u003c/td\u003e\n  \u003ctd\u003estring | array\u003c/td\u003e\n  \u003ctd\u003e-\u003c/td\u003e\n  \u003ctd\u003e\n\n  ```js\n  const fileType = 'obj'\n  /* or */\n  const fileType = ['obj', 'gltf']\n  ```\n\n  \u003c/td\u003e\n  \u003ctd\u003e\n  \n  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.\n  \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd\u003e\n  mtlPath\n  \u003c/td\u003e\n  \u003ctd\u003estring | array\u003c/td\u003e\n  \u003ctd\u003e-\u003c/td\u003e\n  \u003ctd\u003e\n\n  ```js\n  const mltPath = './models/tree.mlt'\n  /* or */\n  const mltPath = [\n    './models/tree.mlt',\n    './models/building.mlt'\n  ]\n  ```\n\n  \u003c/td\u003e\n  \u003ctd\u003e\n\n  Material path, supports multiple materials to be loaded together, set this parameter to an array, you must set **filePath** to an array\n  \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd\u003e\n  textureImage\n  \u003c/td\u003e\n  \u003ctd\u003estring | array\u003c/td\u003e\n  \u003ctd\u003e-\u003c/td\u003e\n  \u003ctd\u003e\n\n  ```js\n  const textureImage = './texture/tree.jpg'\n  /* or */\n  const textureImage = [\n    './texture/tree.jpg',\n    null, \n    './building.png'\n  ]\n  ```\n\n  \u003c/td\u003e\n  \u003ctd\u003e\n\n  jpg/png texture, if is array, **filePath** must be set to an array\n  \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd\u003e\n  width\n  \u003c/td\u003e\n  \u003ctd\u003enumber\u003c/td\u003e\n  \u003ctd\u003eparent element width\u003c/td\u003e\n  \u003ctd\u003e100\u003c/td\u003e\n  \u003ctd\u003e\n  Scene width\n  \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd\u003e\n  height\n  \u003c/td\u003e\n  \u003ctd\u003enumber\u003c/td\u003e\n  \u003ctd\u003eparent element height\u003c/td\u003e\n  \u003ctd\u003e100\u003c/td\u003e\n  \u003ctd\u003e\n  Scene height\n  \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd\u003e\n  position\n  \u003c/td\u003e\n  \u003ctd\u003eobject | array\u003c/td\u003e\n  \u003ctd\u003e{x:0, y:0, z:0}\u003c/td\u003e\n  \u003ctd\u003e\n  \n  ```js\n  const position = {x:0, y:0, z:0}\n  // or\n  const position = [\n    {x:10, y:10, z:10},\n    {x:50, y:50, z:50}\n  ]\n  ```\n\n  \u003c/td\u003e\n  \u003ctd\u003e\n  Model position coordinates, position use array type when filePath is an array\n  \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd\u003e\n  rotation\n  \u003c/td\u003e\n  \u003ctd\u003eobject | array\u003c/td\u003e\n  \u003ctd\u003e{x:0, y:0, z:0}\u003c/td\u003e\n  \u003ctd\u003e\n  \n  ```js\n  const rotation = {x:0, y:0, z:0}\n  // or\n  const rotation = [\n    {x: 10, y:20, z:30},\n    {x: 0, y: 16, z: 20}\n  ]\n  ```\n\n  \u003c/td\u003e\n  \u003ctd\u003e\n  Model rotation coordinates, rotation use array type when filePath is an array\n  \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd\u003e\n  cameraPosition\n  \u003c/td\u003e\n  \u003ctd\u003eobject\u003c/td\u003e\n  \u003ctd\u003e{x:0, y:0, z:0}\u003c/td\u003e\n  \u003ctd\u003e\n  \n  ```js\n  const cameraPosition = {x:0, y:0, z:0}\n  ```\n\n  \u003c/td\u003e\n  \u003ctd\u003e\n  Camera position coordinates\n  \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd\u003e\n  cameraRotation\n  \u003c/td\u003e\n  \u003ctd\u003eobject\u003c/td\u003e\n  \u003ctd\u003e{x:0, y:0, z:0}\u003c/td\u003e\n  \u003ctd\u003e\n  \n  ```js\n  const cameraRotation = {x:0, y:0, z:0}\n  ```\n\n  \u003c/td\u003e\n  \u003ctd\u003e\n  Camera rotation coordinates\n  \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd\u003e\n  scale\n  \u003c/td\u003e\n  \u003ctd\u003eobject | array\u003c/td\u003e\n  \u003ctd\u003e{x:1, y:1, z:1}\u003c/td\u003e\n  \u003ctd\u003e\n  \n  ```js\n  const scale = {x:1, y:2, z:1}\n  // or\n  const scale = [\n    {x:1, y:2, z:1},\n    {x:0.5, y:0.5, z:0.5}\n  ]\n  ```\n\n  \u003c/td\u003e\n  \u003ctd\u003e\n  Model scale, scale use array type when filePath is an array\n  \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd\u003e\n  lights\n  \u003c/td\u003e\n  \u003ctd\u003earray\u003c/td\u003e\n  \u003ctd\u003e[{\n        type: \"AmbientLight\",\n        color: 0xaaaaaa,\n      },\n      {\n        type: \"DirectionalLight\",\n        position: { x: 1, y: 1, z: 1 },\n        color: 0xffffff,\n        intensity: 0.8,\n      }]\u003c/td\u003e\n  \u003ctd\u003e\n  \n  ```js\n  const lights = [\n    { \n      type: \"AmbientLight\", \n      color: \"red\", \n    }, \n    { \n      type: \"DirectionalLight\", \n      position: { x: 100, y: 10, z: 100 }, \n      color: \"green\", \n      intensity: 0.8, \n    }, \n    { \n      type: \"PointLight\", \n      color: \"#000000\", \n      position: { x: 200, y: -200, z: 100 }, \n      intensity: 1 \n    }, \n    { \n      type: \"HemisphereLight\",\n      skyColor: \"#00FF00\",\n      groundColor: \"#000000\",\n      position: { x: 200, y: -200, z: 100 }\n    }\n  ]\n  ```\n\n  \u003c/td\u003e\n  \u003ctd\u003e\n  Lights is array, type AmbientLight | DirectionalLight | PointLight | HemisphereLight\n  \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd\u003e\n  backgroundColor\n  \u003c/td\u003e\n  \u003ctd\u003enumber | string\u003c/td\u003e\n  \u003ctd\u003e0xffffff\u003c/td\u003e\n  \u003ctd\u003e\n  \n  ```js\n  const bgColor = 0xff00ff\n  /* or */\n  const bgColor = 'red'\n  /* or */\n  const bgColor = '#000000'\n  /* or */\n  const bgColor = 'rgba(0, 0, 0, 0.5)'\n  ```\n\n  \u003c/td\u003e\n  \u003ctd\u003e\n  Scene background color\n  \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd\u003e\n  backgroundAlpha\n  \u003c/td\u003e\n  \u003ctd\u003enumber\u003c/td\u003e\n  \u003ctd\u003e1\u003c/td\u003e\n  \u003ctd\u003e\n  \n  ```js\n  const bgAlpha = 0.5\n  ```\n\n  \u003c/td\u003e\n  \u003ctd\u003e\n  Background transparency. value range 0-1\n  \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd\u003e\n  controlsOptions\n  \u003c/td\u003e\n  \u003ctd\u003eobject\u003c/td\u003e\n  \u003ctd\u003e-\u003c/td\u003e\n  \u003ctd\u003e-\u003c/td\u003e\n  \u003ctd\u003e\n\n  Control parameter [OrbitControls Properties](https://threejs.org/docs/#examples/en/controls/OrbitControls)\n  \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd\u003e\n  crossOrigin\n  \u003c/td\u003e\n  \u003ctd\u003estring\u003c/td\u003e\n  \u003ctd\u003eanonymous\u003c/td\u003e\n  \u003ctd\u003eanonymous | use-credentials\u003c/td\u003e\n  \u003ctd\u003e\n  Cross-domain configuration.\n  \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd\u003e\n  requestHeader\n  \u003c/td\u003e\n  \u003ctd\u003eobject\u003c/td\u003e\n  \u003ctd\u003eanonymous\u003c/td\u003e\n  \u003ctd\u003e\n  \n  ```js\n  const headers = { \n    'Authorization': 'Bearer token'\n  }\n  ```\n\n  \u003c/td\u003e\n  \u003ctd\u003e\n  Set request header.\n  \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd\u003e\n  outputEncoding\n  \u003c/td\u003e\n  \u003ctd\u003estring\u003c/td\u003e\n  \u003ctd\u003elinear\u003c/td\u003e\n  \u003ctd\u003elinear or sRGB\u003c/td\u003e\n  \u003ctd\u003e\n\n  linear is LinearEncoding, sRGB is sRGBEncoding (sRGBEncoding can restore material color better).\n  Renderer's output encoding [WebGLRenderer OutputEncoding](https://threejs.org/docs/index.html#api/en/renderers/WebGLRenderer.outputEncoding)\n  \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd\u003e\n  webGLRendererOptions\n  \u003c/td\u003e\n  \u003ctd\u003eobject\u003c/td\u003e\n  \u003ctd\u003e{ antialias: true, alpha: true }\u003c/td\u003e\n  \u003ctd\u003e-\u003c/td\u003e\n  \u003ctd\u003e\n\n  WebGLRenderer options [WebGLRenderer Parameters](https://threejs.org/docs/index.html#api/zh/renderers/WebGLRenderer)\n  \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd\u003e\n  showFps\n  \u003c/td\u003e\n  \u003ctd\u003eboolean\u003c/td\u003e\n  \u003ctd\u003efalse\u003c/td\u003e\n  \u003ctd\u003e-\u003c/td\u003e\n  \u003ctd\u003e\n\n  Show stats infomation\n  \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd\u003e\n  clearScene\n  \u003c/td\u003e\n  \u003ctd\u003eboolean\u003c/td\u003e\n  \u003ctd\u003efalse\u003c/td\u003e\n  \u003ctd\u003e-\u003c/td\u003e\n  \u003ctd\u003eClear scene\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd\u003e\n  parallelLoad\n  \u003c/td\u003e\n  \u003ctd\u003eboolean\u003c/td\u003e\n  \u003ctd\u003efalse\u003c/td\u003e\n  \u003ctd\u003e-\u003c/td\u003e\n  \u003ctd\u003e\n  \n  Enable/disable parallel load models (useful only for multi-model loading). **Use this attribute, the process event will be unpredictable**\n  \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd\u003e\n  labels\n  \u003c/td\u003e\n  \u003ctd\u003earray\u003c/td\u003e\n  \u003ctd\u003e-\u003c/td\u003e\n  \u003ctd\u003e\n  \n  ```js\n  const labels = [\n    {\n      image: \"\", \n      text: \"\", \n      textStyle: { \n        fontFamily: \"Arial\", \n        fontSize: 18, \n        fontWeight: \"normal\", \n        lineHeight: 1, \n        color: \"#ffffff\", \n        borderWidth: 8, \n        borderRadius: 4, \n        borderColor: \"rgba(0,0,0,1)\",\n        backgroundColor: \"rgba(0, 0, 0, 1)\" \n      }, \n      position: {x:0, y:0, z:0}, \n      scale:{x:1, y:1, z:0}, \n      sid: null\n    }\n  ]\n  ```\n\n  \u003c/td\u003e\n  \u003ctd\u003e\n  \n  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](./src/examples/add-label.vue) file\n  \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd\u003e\n  autoPlay\n  \u003c/td\u003e\n  \u003ctd\u003eboolean\u003c/td\u003e\n  \u003ctd\u003etrue\u003c/td\u003e\n  \u003ctd\u003e-\u003c/td\u003e\n  \u003ctd\u003e\n  Play/stop the 3d model animations\n  \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd\u003e\n  enableDraco\n  \u003c/td\u003e\n  \u003ctd\u003eboolean\u003c/td\u003e\n  \u003ctd\u003efalse\u003c/td\u003e\n  \u003ctd\u003e-\u003c/td\u003e\n  \u003ctd\u003e\n\n  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](https://github.com/king2088/vue-3d-loader/blob/master/public/assets/draco.7z) 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 \u003ci\u003edracoDir\u003c/i\u003e parameter. [About draco and threeJS](https://threejs.org/docs/index.html?q=draco#examples/en/loaders/DRACOLoader)\n  \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd\u003e\n  dracoDir\n  \u003c/td\u003e\n  \u003ctd\u003estring\u003c/td\u003e\n  \u003ctd\u003eassets/draco/gltf/\u003c/td\u003e\n  \u003ctd\u003e-\u003c/td\u003e\n  \u003ctd\u003e\n  Draco decryption library default directory, you can modified it.\n  \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd\u003e\n  intersectRecursive\n  \u003c/td\u003e\n  \u003ctd\u003eboolean\u003c/td\u003e\n  \u003ctd\u003efalse\u003c/td\u003e\n  \u003ctd\u003e-\u003c/td\u003e\n  \u003ctd\u003e\n\n  If true, it also checks all descendants. Otherwise it only checks intersection with the object.\n  \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd\u003e\n  enableDamping\n  \u003c/td\u003e\n  \u003ctd\u003eboolean\u003c/td\u003e\n  \u003ctd\u003efalse\u003c/td\u003e\n  \u003ctd\u003e-\u003c/td\u003e\n  \u003ctd\u003e\n\n  Set [enableDamping](https://threejs.org/docs/index.html#examples/zh/controls/OrbitControls.enableDamping) to true to enable damping (inertia), which can be used to give a sense of weight to the controls.\n  \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd\u003e\n  dampingFactor\n  \u003c/td\u003e\n  \u003ctd\u003enumber\u003c/td\u003e\n  \u003ctd\u003e-\u003c/td\u003e\n  \u003ctd\u003e-\u003c/td\u003e\n  \u003ctd\u003e\n\n  The damping inertia used if enableDamping is set to true. [dampingFactor](https://threejs.org/docs/index.html#examples/zh/controls/OrbitControls.dampingFactor)\n  \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd\u003e\n  verticalCtrl\n  \u003c/td\u003e\n  \u003ctd\u003eboolean | object\u003c/td\u003e\n  \u003ctd\u003efalse\u003c/td\u003e\n  \u003ctd\u003e-\u003c/td\u003e\n  \u003ctd\u003e\n\n  true，only enable vertical rotation of the camera\n  \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd\u003e\n  horizontalCtrl\n  \u003c/td\u003e\n  \u003ctd\u003eboolean | object\u003c/td\u003e\n  \u003ctd\u003efalse\u003c/td\u003e\n  \u003ctd\u003e-\u003c/td\u003e\n  \u003ctd\u003e\n\n  true，only enable horizontal rotation of the camera\n  \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd\u003e\n  plyMaterial\n  \u003c/td\u003e\n  \u003ctd\u003estring\u003c/td\u003e\n  \u003ctd\u003eMeshStandardMaterial\u003c/td\u003e\n  \u003ctd\u003e-\u003c/td\u003e\n  \u003ctd\u003e\n\n  Value only support `MeshStandardMaterial` and `MeshBasicMaterial`. For ply model. [MeshStandardMaterial doc](https://threejs.org/docs/#api/en/materials/MeshStandardMaterial).[MeshBasicMaterial doc](https://threejs.org/docs/?q=MeshBasicMaterial#api/en/materials/MeshBasicMaterial).\n  \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd\u003e\n  enableAxesHelper\n  \u003c/td\u003e\n  \u003ctd\u003eboolean\u003c/td\u003e\n  \u003ctd\u003efalse\u003c/td\u003e\n  \u003ctd\u003e-\u003c/td\u003e\n  \u003ctd\u003e\n\n  Enable or show axes\n  \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd\u003e\n  axesHelperSize\n  \u003c/td\u003e\n  \u003ctd\u003enumber\u003c/td\u003e\n  \u003ctd\u003e100\u003c/td\u003e\n  \u003ctd\u003e-\u003c/td\u003e\n  \u003ctd\u003e\n\n  Axes size\n  \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd\u003e\n  enableGridHelper\n  \u003c/td\u003e\n  \u003ctd\u003eboolean\u003c/td\u003e\n  \u003ctd\u003efalse\u003c/td\u003e\n  \u003ctd\u003e-\u003c/td\u003e\n  \u003ctd\u003e\n\n  Enable or show grid\n  \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd\u003e\n  minDistance\n  \u003c/td\u003e\n  \u003ctd\u003efloat\u003c/td\u003e\n  \u003ctd\u003e0\u003c/td\u003e\n  \u003ctd\u003e-\u003c/td\u003e\n  \u003ctd\u003e\n\n  How far you can dolly in.\n  \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd\u003e\n  maxDistance\n  \u003c/td\u003e\n  \u003ctd\u003efloat\u003c/td\u003e\n  \u003ctd\u003eInfinity\u003c/td\u003e\n  \u003ctd\u003e-\u003c/td\u003e\n  \u003ctd\u003e\n\n  How far you can dolly out.\n  \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd\u003epointLightFollowCamera\u003c/td\u003e\n  \u003ctd\u003eboolean\u003c/td\u003e\n  \u003ctd\u003efalse\u003c/td\u003e\n  \u003ctd\u003e-\u003c/td\u003e\n  \u003ctd\u003e\n\n  Point light follow camera.\n  \u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\n### Events\n\n| event                        | description                                                          |\n| ---------------------------- | -------------------------------------------------------------------- |\n| mousedown(event, intersects) | mouse down, intersect: currently intersecting objects                |\n| mousemove(event, intersects) | mouse move, intersect: currently intersecting objects                |\n| mouseup(event, intersects)   | mouse up, intersect: currently intersecting objects                  |\n| click(event, intersects)     | click, intersect: currently intersecting objects                     |\n| load                         | load model event                                                     |\n| process(event, fileIndex)    | loading progress, fileIndex: the index of the currently loaded model |\n| error(event)                 | error event                                                          |\n\n### Example\n\n#### 1. Load a 3D model\n\nsupports dae/fbx/gltf(glb)/obj/ply/stl models\n\n```vue\n\u003c!-- fbx model --\u003e\n\u003cvue3dLoader\n  filePath=\"models/collada/stormtrooper/stormtrooper.dae\"\n\u003e\u003c/vue3dLoader\u003e\n\u003c!-- obj model --\u003e\n\u003cvue3dLoader filePath=\"/obj/1.obj\"\u003e\u003c/vue3dLoader\u003e\n```\n\n#### 2. Loading multiple models in the same scene\n\n```vue\n\u003c!-- \n    Load multiple models of different type,\n    support for setting position, scale,\n    and rotation for each model\n--\u003e\n\u003ctemplate\u003e\n  \u003cdiv class=\"check-box\"\u003e\n    \u003cinput type=\"checkbox\" @change=\"change($event, 'position')\" checked /\u003e Set\n    position\n    \u003cinput type=\"checkbox\" @change=\"change($event, 'rotation')\" checked /\u003e Set\n    rotation\n    \u003cinput type=\"checkbox\" @change=\"change($event, 'scale')\" checked /\u003e Set\n    scale\n  \u003c/div\u003e\n  \u003cvue3dLoader\n    :filePath=\"filePath\"\n    :position=\"position\"\n    :rotation=\"rotation\"\n    :scale=\"scale\"\n    :cameraPosition=\"{ x: -0, y: 0, z: -500 }\"\n  /\u003e\n\u003c/template\u003e\n\u003cscript setup lang=\"ts\"\u003e\nimport { ref } from \"vue\";\nconst filePath = ref();\nfilePath.value = [\n  \"/models/fbx/Samba Dancing.fbx\",\n  \"/models/collada/pump/pump.dae\",\n];\nconst position = ref();\nposition.value = [\n  { x: 0, y: 0, z: 0 },\n  { x: 100, y: 100, z: 100 },\n];\nconst rotation = ref();\nrotation.value = [\n  { x: 0, y: 0, z: 0 },\n  { x: 10, y: 1, z: 1 },\n];\nconst scale = ref();\nscale.value = [\n  { x: 0.4, y: 0.4, z: 0.4 },\n  { x: 0.8, y: 0.8, z: 0.8 },\n];\n\nfunction change(event: any, type: string) {\n  const value = event.target.checked;\n  switch (type) {\n    case \"position\":\n      value\n        ? (position.value = [\n            { x: 0, y: 0, z: 0 },\n            { x: 100, y: 100, z: 100 },\n          ])\n        : (position.value = []);\n      break;\n    case \"rotation\":\n      value\n        ? (rotation.value = [\n            { x: 0, y: 0, z: 0 },\n            { x: 10, y: 1, z: 1 },\n          ])\n        : (rotation.value = []);\n      break;\n    case \"scale\":\n      value\n        ? (scale.value = [\n            { x: 0.4, y: 0.4, z: 0.4 },\n            { x: 0.8, y: 0.8, z: 0.8 },\n          ])\n        : (scale.value = []);\n      break;\n  }\n}\n\u003c/script\u003e\n```\n\n#### 3. Material and texture\n\n```vue\n\u003c!-- obj and mtl material --\u003e\n\u003cvue3dLoader filePath=\"/obj/1.obj\" mtlPath=\"/obj/1.mtl\"\u003e\u003c/vue3dLoader\u003e\n\u003c!-- fbx and png texture --\u003e\n\u003cvue3dLoader filePath=\"/fbx/1.fbx\" textureImage=\"/fbx/1.png\"\u003e\u003c/vue3dLoader\u003e\n```\n\n#### 4. Background color and transparency\n\n```vue\n\u003cvue3dLoader\n  filePath=\"/fbx/1.fbx\"\n  :backgroundAlpha=\"0.5\"\n  backgroundColor=\"red\"\n\u003e\u003c/vue3dLoader\u003e\n```\n\n#### 5. Controls\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv class=\"controls\"\u003e\n    \u003cdiv class=\"buttons\"\u003e\n      \u003c!-- Disable right-click drag --\u003e\n      \u003cbutton @click=\"enablePan = !enablePan\"\u003e\n        {{ enablePan ? \"disable\" : \"enable\" }} translation\n      \u003c/button\u003e\n      \u003c!-- Disable zoom --\u003e\n      \u003cbutton @click=\"enableZoom = !enableZoom\"\u003e\n        {{ enableZoom ? \"disable\" : \"enable\" }} zoom\n      \u003c/button\u003e\n      \u003c!-- Disable rotation --\u003e\n      \u003cbutton @click=\"enableRotate = !enableRotate\"\u003e\n        {{ enableRotate ? \"disable\" : \"enable\" }} rotation\n      \u003c/button\u003e\n    \u003c/div\u003e\n    \u003cvue3dLoader\n      :filePath=\"'/models/collada/elf/elf.dae'\"\n      :controlsOptions=\"{\n        enablePan,\n        enableZoom,\n        enableRotate,\n      }\"\n      :cameraPosition=\"{ x: 0, y: -10, z: 13 }\"\n    /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\u003cscript setup lang=\"ts\"\u003e\n  import { ref } from \"vue\";\n  const enablePan = ref(true);\n  const enableZoom = ref(true);\n  const enableRotate = ref(true);\n\u003c/script\u003e\n```\n\n#### 6. Rotate model\n\n```vue\n\u003ctemplate\u003e\n  \u003cvue3dLoader\n    :rotation=\"rotation\"\n    @load=\"onLoad()\"\n    filePath=\"/models/collada/elf/elf.dae\"\n  /\u003e\n\u003c/template\u003e\n\u003cscript setup lang=\"ts\"\u003e\n  import { ref } from \"vue\";\n  const rotation = ref();\n  rotation.value = {\n    x: -Math.PI / 2,\n    y: 0,\n    z: 0,\n  };\n  function onLoad() {\n    rotate();\n  }\n  function rotate() {\n    requestAnimationFrame(rotate);\n    rotation.value.z -= 0.01;\n  }\n\u003c/script\u003e\n```\n\n#### 7. Events\n\n```vue\n\u003ctemplate\u003e\n  \u003cvue3dLoader filePath=\"/models/ply/Lucy100k.ply\" @mousemove=\"onMouseMove\" /\u003e\n\u003c/template\u003e\n\u003cscript setup lang=\"ts\"\u003e\n  import { ref } from \"vue\";\n  const object = ref(null);\n  function onMouseMove(event: MouseEvent, intersected: any) {\n    if (object.value) {\n      (object.value as any).material.color.setStyle(\"#fff\");\n    }\n    if (intersected) {\n      object.value = intersected.object;\n      (object.value as any).material.color.setStyle(\"#13ce66\");\n    }\n  }\n\u003c/script\u003e\n```\n\n#### 8. Loader draco model\n\nNeed to download Draco repository storage with local static folder of your project, download url: \u003chttps://github.com/king2088/vue-3d-loader/blob/master/public/assets/draco.7z\u003e\n\n```vue\n\u003ctemplate\u003e\n  \u003cvue3dLoader\n    filePath=\"/models/gltf/LittlestTokyo.glb\"\n    :cameraPosition=\"{ x: 10, y: 700, z: 1000 }\"\n    :enableDraco=\"true\"\n    dracoDir=\"/draco/\"\n    outputEncoding=\"sRGB\"\n  /\u003e\n\u003c/template\u003e\n```\n\n#### 9. More demos code\n\n[Click here to see more demo code](https://github.com/king2088/vue-3d-loader/tree/master/src/examples)\n\n### Docker deploy examples\n```shell\n  docker build -t vue/vue-3d-loader .\n  # docker run\n  docker run -p 8010:80 vue/vue-3d-loader\n```\n\n### Coming soon\n\n- [x] Supports Vue3\n\n### Bugs\n\n[issues](https://github.com/king2088/vue-3d-loader/issues)\n\n### Donate\n\n![wxPay](/images/wxpay.png)\n\n![aliPay](/images/alipay.png)\n\n### Thanks\n\nThis plugin is inseparable from [vue-3d-model](https://github.com/hujiulong/vue-3d-model)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fking2088%2Fvue-3d-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fking2088%2Fvue-3d-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fking2088%2Fvue-3d-loader/lists"}