vue-3d-model:一个展示三维模型的 Vue 组件

vue-3d-model

vue.js 3D model viewer component, based on threejs, inspired by model-tag

一个展示三维模型的Vue组件,支持模型操作和模型点击事件,能自动缩放模型到合适大小并校正偏移,支持多种格式的模型。

vue-3d-model:一个展示三维模型的 Vue 组件_第1张图片

Example

DEMO

Install

using npm

npm install vue-3d-model --save

Or using script tag for global use

<script src="https://unpkg.com/vue-3d-model/dist/vue-3d-model.min.js"></script>

Or Download vue-3d-model.min.js and include it in your html

Usage

<template>
    <model-obj src="example/models/obj/LeePerrySmith.obj"></model-obj>
</template>
<script>
    import { ModelObj } from 'vue-3d-model'

    export default {
        components: { ModelObj }
    }
</script>

Or

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <div id="app">
        <model-obj src="example/models/obj/LeePerrySmith.obj"></model-obj>
    </div>
    <script src="vue.js"></script>
    <script src="vue-3d-model.min.js"></script>
    <script>
        new Vue({
            el: '#app'
        })
    </script>
</body>

Documents

props

prop type default example
src string - './exapmle.obj'
width number - 300
height number - 300
position object { x: 0, y: 0, z: 0 } { x: 100, y: 20, z: -10 }
rotation object { x: 0, y: 0, z: 0 } { x: Math.PI / 2, y: 0, z: - Math.PI / 4 }
scale object { x: 1, y: 1, z: 1 } { x: 2, y: 2, z: 3 }
lights array -  
backgroundColor number/string 0xffffff 0xffffff/'#f00'/'rgb(255,255,255)'
backgroundAlpha number 1 0.5
controllable boolean true true/false

events

event
on-mousedown
on-mousemove
on-mouseup
on-click
on-load
on-progress
on-error

Model Format Support

model format component tag
obj
json
stl
dae
ply
gltf(2.0)

Browser Support

Modern browsers and IE 11.

You can click on this for more information

TODO List

  • Support for more model formats
  • Animation
  • Post-processing

LICENSE

MIT

查看原文: vue-3d-model:一个展示三维模型的 Vue 组件

你可能感兴趣的:(vue)