|
阅读：4591回复：1
Vue-3D-Model：用简单的方式来展示三维模型为什么做这个组件 我经常听到前端朋友们抱怨，在网页上展示三维模型太麻烦了。但是这方面的需求又有很多，例如做房地产的需要展示户型、卖汽车的需要展示汽车模型等。 在网页上展示三维模型就只能用WebGL技术了（别跟我说Flash和其他非标准插件啦），但是WebGL编程和JS区别太大，最好的方式大概是使用在WebGL基础上封装的库，例如three.js，但是three.js的学习成本也非常高，并且坑非常多。 所以我就开始做这个组件，目的只有一个：用最简单的方式来解决三维模型展示的需求 解决了哪些问题 当一个新手试图用three.js来展示一个模型（这一般是经过了数天的学习以后），他通常不会一开始就得到自己想要的结果。要么模型是一片黑色，或者模型根本就看不到。这里实际上有三个问题：
这些看似简单的问题实际上并不容易解决。即使解决了这些问题，还有更大的BOSS等着你：你可能需要通过鼠标来旋转模型，或者通过滚轮来放大缩小。或者更进一步，你需要知道鼠标点击时，是否点中了模型，点中的是哪个部分。 这些都是听起来就很头疼的问题，要解决他们你至少需要有一定的图形学知识，或者对three.js的各种类了如指掌。现在这些问题都被Vue-3D-Model解决了，如果你已经会使用vue（不会的话可以花几个小时学习一下），那么只需要短短几行代码就可以解决这些问题了:<body><div id="app"><model-obj src="static/model.obj"></model-obj> </div> <script src="vue.js"></script> <script src="vue-3d-model.min.js"></script> <script> new Vue({ el: '#app' }) </script> </body>效果它会自动将模型以合适的大小显示出来，如果模型偏离了中心点也会自动校正。并且直接就可以通过鼠标来旋转和缩放了。这是一个在线的例子(墙内可能加载比较慢)：DEMO 当然，你也可以通过给组件传入参数来手动调节。更详细的使用方式可以在github上看到。 接下来要做的事 目前组件只支持OBJ格式以及three.js的JSON格式，后面马上就会支持dae、stl、fbx等格式的模型了。文档和示例我也会找时间继续补充的，如果有问题或者其他需求，也可以来提issue。作者：hujiulong 链接：https://www.jianshu.com/p/c093ff00ea1b |
|
|
沙发#
发布于：2022-01-25 17:20
Example DEMO [/url]Install using npm npm install vue-3d-model --save Or using script tag for global use <[color=var(--color-prettylights-syntax-entity-tag)]script [color=var(--color-prettylights-syntax-constant)]src="[color=var(--color-prettylights-syntax-string)]https://unpkg.com/vue-3d-model/dist/vue-3d-model.umd.js"></[color=var(--color-prettylights-syntax-entity-tag)]script> Or Download [url=https://unpkg.com/vue-3d-model/dist/vue-3d-model.umd.js]vue-3d-model.js and include it in your html [/url]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.js"></script> <script> new Vue({ el: '#app' }); </script> </body> Documents [url=https://github.com/hujiulong/vue-3d-model#props]props
[/url]events [table=100%,#ffffff,,1][tr][td]event[/td][/tr][tr][td]on-mousedown[/td][/tr][tr][td]on-mousemove[/td][/tr][tr][td]on-mouseup[/td][/tr][tr][td]on-click[/td][/tr][tr][td]on-load[/td][/tr][tr][td]on-progress[/td][/tr][tr][td]on-error[/td][/tr][/table] [url=https://github.com/hujiulong/vue-3d-model#model-format-support]Model Format Support
[/url]Browser Support Modern browsers and IE 11. You can click on [url=http://caniuse.com/#search=webgl]this for more information. [/url]TODO List
[url=https://github.com/hujiulong/vue-3d-model#license]LICENSE MIT |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
