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

最新推荐文章于 2024-08-09 08:08:55 发布

素描本里的男子

最新推荐文章于 2024-08-09 08:08:55 发布

阅读量7.8k

点赞数 3

分类专栏： vue 文章标签： vue-3d-model 三维模型

原文链接：https://github.com/hujiulong/vue-3d-model

版权

vue 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

vue-3d-model

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

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

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

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>

<!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