<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue-3D-Model</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-3d-model/dist/vue-3d-model.umd.js"></script>
</head>
<body>
<div id="app">
<model-obj src="example/models/obj/LeePerrySmith.obj"></model-obj>
</div>
</body>
</html>
<script>
new Vue({ el: '#app' });
</script>
在线预览地址vue-3d-model js在线预览obj,dae,ply,json,fbx,stl,gltf格式的3D文件
效果：
例子使用了.obj 3D文件格式，自带了截图和旋转功能，其他的3D格式只需要切换一个vue的模板标签即可。具体标签格式如下：
<!-- obj -->
<section v-if="false">
<template>
<model-obj src="3d-model/obj/LeePerrySmith.obj"/>
</template>
</section>
<!-- obj + mtl -->
<section v-if="false">
<template>
<model-obj
src="3d-model/obj+mtl/male/male.obj"
mtl="3d-model/obj+mtl/male/male.mtl"
/>
</template>
</section>
<!-- json -->
<section v-if="false">
<template>
<model-three src="3d-model/json/scene.json"/>
</template>
</section>
<!-- fbx -->
<section v-if="false">
<template>
<model-fbx src="3d-model/fbx/dancing.fbx" />
</template>
</section>
<!-- stl -->
<section v-if="false">
<template>
<model-stl src="3d-model/stl/colored.stl" />
</template>
</section>
<!-- dae -->
<section v-if="false">
<template>
<model-collada src="3d-model/dae/elf/elf.dae" />
</template>
</section>
<!-- dae -->
<section v-if="false">
<template>
<model-ply src="3d-model/ply/海豚.ply" />
</template>
</section>
<!-- gltf -->
<section>
<template>
<model-gltf src="3d-model/gltf/小黄鸭/Duck.gltf" />
</template>
</section>
可支持obj,dae,ply,json,fbx,stl,gltf等格式的3D文件格式显示。只需要单页面html即可集成，非常方便。
2007
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
