为什么做这个组件

我经常听到前端朋友们抱怨，在网页上展示三维模型太麻烦了。但是这方面的需求又有很多，例如做房地产的需要展示户型、卖汽车的需要展示汽车模型等。

在网页上展示三维模型就只能用WebGL技术了（别跟我说Flash和其他非标准插件啦），但是WebGL编程和JS区别太大，最好的方式大概是使用在WebGL基础上封装的库，例如three.js，但是three.js的学习成本也非常高，并且坑非常多。

所以我就开始做这个组件，目的只有一个：用最简单的方式来解决三维模型展示的需求

解决了哪些问题

当一个新手试图用three.js来展示一个模型（这一般是经过了数天的学习以后），他通常不会一开始就得到自己想要的结果。要么模型是一片黑色，或者模型根本就看不到。这里实际上有三个问题：

  1. 建模软件或软件配置的区别，导致模型尺寸的单位不统一，需要手动调节参数放大或者缩小
  2. 模型可能偏移了中心点，导致可视范围内看不到模型
  3. 没有给模型合适的光照

这些看似简单的问题实际上并不容易解决。即使解决了这些问题，还有更大的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
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

Vue-3D-Model：用简单的方式来展示三维模型的更多相关文章

  1. vue组件通信的几种方式

    最近用vue开发项目,记录一下vue组件间通信几种方式 第一种,父子组件通信 一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Child.vue 2.Child ...

  2. vue.js最最最最简单实例

    vue.js最最最最简单实例 一.总结 一句话总结: 1.vue.js实现实现数据的双向绑定用的是什么标记? 双大括号:比如{{message}} 2.vue数据循环输出的标记是什么? 用的是标签的v ...

  3. WPF 3D model - Sphere, Cone, and Cylinder

    原文:WPF 3D model - Sphere, Cone, and Cylinder   Extending Visual3D - Sphere, Cone, and Cylinder http: ...

  4. Vue中组件间通信的方式

    Vue中组件间通信的方式 Vue中组件间通信包括父子组件.兄弟组件.隔代组件之间通信. props $emit 这种组件通信的方式是我们运用的非常多的一种,props以单向数据流的形式可以很好的完成父 ...

  5. 总结Vue第一天：简单介绍、基本常用知识、辅助函数

    总结Vue第一天:简单介绍.基本常用知识.辅助函数 中文官网:https://cn.vuejs.org/v2/guide/syntax.html 遇到不熟悉的可以先看一下官网,然后再看一下一些别人写的 ...

  6. ShapeNet： An Information-Rich 3D Model Repository 阅读笔记

    ShapeNet: An Information-Rich 3D Model Repository 注:本论文只是讲述数据库建立方法 摘要 ShapeNet是一个有丰富注释的大型形状存储库,由对象的3 ...

  7. java最简单的方式实现httpget和httppost请求

    java实现httpget和httppost请求的方式多种多样,个人总结了一种最简单的方式,仅仅需几行代码,就能够完美的实现. 此处须要用到两个jar包,httpclient-4.3.1.jar.ht ...

  8. Make3D Convert your image into 3d model

    Compiling and Running Make3D on your own computer source: http://make3d.cs.cornell.edu/code_linux.ht ...

  9. 以最简单的方式讲HashMap

      以最简单的方式讲HashMap HashMap可以说是面试中最常出现的名词,这次头条的一面,第一个问的问题就是HashMap.所以就让我们来探讨下HashMap吧. 实验环境:JDK1.8 首先先 ...

随机推荐

  1. 认识JWT(转)

    1. JSON Web Token是什么 JSON Web Token (JWT)是一个开放标准(RFC 7519),它定义了一种紧凑的.自包含的方式,用于作为JSON对象在各方之间安全地传输信息.该 ...

  2. Java并发编程实战 第13章 显式锁

    接口Lock的实现类: ReentrantLock, ReentrantReadWriteLock.ReadLock, ReentrantReadWriteLock.WriteLock Reentra ...

  3. linux上开启和分析mysql慢查询日志

    本人qq群也有许多的技术文档,希望可以为你提供一些帮助(非技术的勿加). QQ群:   281442983 (点击链接加入群:http://jq.qq.com/?_wv=1027&k=29Lo ...

  4. DirectX屏幕捕获和输出视频

    #include <Windows.h> #include <mfapi.h> #include <mfidl.h> #include <Mfreadwrit ...

  5. SSH开发环境整合

    第一步:Spring开发环境搭建 1.1: 添加配置文件和相应spring-3.2-core.Jar 核心包 配置文件 <?xml version="1.0" encodin ...

  6. k-means伪代码

    1.初始化k个簇中心. 2.更新所有样本点簇归属:样本点到哪个簇中心点最近就属于哪个簇. 3.重新计算每个簇的中心点(直到簇中心点不再变化或达到更新最大次数) #k-means伪代码 import n ...

  7. 【crontab】误删crontab及其恢复

    中秋节快到了,首先祝自己中秋快乐. 昨天下午六点,心里正想着加完一个crontab就可以下班了.本来想执行 crontab -e的,没想到手一抖就输入了crontab ,然后就进入了下面这个样子.

  8. weblogic 10c and 12c 打补丁

    https://pan.baidu.com/s/17IaK1SYwHxwt-CRb0zDqXw

  9. 消息队列之--Kafak

    序言 消息丢失如何解决? 解耦 异步 并行 Docker安装Kafak 1.下载镜像 # zookeeper镜像 docker pull wurstmeister/zookeeper # kafka镜 ...

  10. CF Round #576 (Div. 2) Matching vs Independent Set

    链接:Click here 题目意思:给你一个图,有3n个点,m条边,求是否有n条匹配边或n个独立点,其中匹配为没有公共点,独立为不相连 Solution: 考虑每个点对于第一种情况,最多只能贡献一次 ...