three.js实现酷炫散点模型

﹏ヽ暗。殇╰゛Y 2023-09-27 12:01 12阅读 0赞

**目录**

1.效果图展示

2.功能

3.使用步骤

第一步

第二步

第三步

4.使用技巧说明

4.1.控制球的数量

4.2 控制外围网格的形状

4.3 控制初始的形态

4.4 让其停止切换

4.5 设置切换每种形态的顺序

4.6 控制切换动画的种类

4.7 控制镜头的位移

4.8 控制镜头的方向（和上面不要混淆，这个不是位移是方向）

源码：

--------------------

### 1.效果图展示 ###

> 由于文件大小限制，仅能展示少部分特效，本文中共7中变换，如球体，立方体，管道，波浪，反重力，重力等效果。

![bf71f20327ec48dabe69ac4a64d14c8d.gif][]

![cb686de885694c0a8409e865d197c4c1.gif][]

![8d71a27463ce4a38b3b91553ce54a9c9.png][]

--------------------

### 2.功能 ###

> 项目需求是基于数据库分析出来的离散相关性的散点图，主要是为了追求良好的展示效果。
> 
> 使用了three.js编写的。我是用的vue2,源码放在最后。

--------------------

### 3.使用步骤 ###

--------------------

#### 第一步 ####

> 网上找到three.js源码，放到public目录下，在index.html中引入

public/index.html中的body中放入以下代码
    <script type="text/javascript">
          document.write(
            unescape("%3Cscript src='./static/js/three.js'%3E%3C/script%3E")
          );
     </script>

#### 第二步 ####

> 将文章末尾的实现以上功能的源码放入项目中（任意位置）

#### 第三步 ####

> 在.vue文件中使用

<template>
      <div class="demo">
        <div id="ff3"></div>
      </div>
    </template>
    
    <script>
    const fd = () => {
      setTimeout(() => {
        import('./main02')
      }, 100)
    }
    
    export default {
      inject: ['reload'],
      data () {
        return {
        }
      },
      mounted () {
        fd()
      },
      beforeDestroy () {
        this.$router.go(0)
      }
    
    }
    </script>

至此，完成，如果需要three.js源码的可以留言邮箱。

--------------------

### 4.使用技巧说明 ###

#### 4.1.控制球的数量 ####

![18d2ecf5485b40cc9b7ca61e274a2686.png][]

#### 4.2 控制外围网格的形状 ####

![068cff21ab074e60a34902c2d3b6b637.png][]

#### 4.3 控制初始的形态 ####

![8fb43a31e53f4dc58fd06ca7650f70cd.png][]

#### 4.4 让其停止切换 ####

![f6722322750a4def932cc7fa91573eef.png][]

#### 4.5 设置切换每种形态的顺序 ####

![804291076c59484f8a07b58387c9aa80.png][]

--------------------

#### 4.6 控制切换动画的种类 ####

![d2c10677ca39418c95d095c28e1c04c0.png][]

### 4.7 控制镜头的位移 ###

![3f274d7a56fe42ab9168b1df4149833b.png][]

#### 4.8 控制镜头的方向（和上面不要混淆，这个不是位移是方向） ####

![af755cd2684c4dfabc2559b1e52831d4.png][]

暂时就想到这些，three.js的使用不想正经写代码，他是有着固定的结构，只需修修改改即可。如有问题可评论区交流

--------------------

### 源码： ###

[bf71f20327ec48dabe69ac4a64d14c8d.gif]: https://img-blog.csdnimg.cn/bf71f20327ec48dabe69ac4a64d14c8d.gif
[cb686de885694c0a8409e865d197c4c1.gif]: https://img-blog.csdnimg.cn/cb686de885694c0a8409e865d197c4c1.gif
[8d71a27463ce4a38b3b91553ce54a9c9.png]: https://img-blog.csdnimg.cn/8d71a27463ce4a38b3b91553ce54a9c9.png
[18d2ecf5485b40cc9b7ca61e274a2686.png]: https://img-blog.csdnimg.cn/18d2ecf5485b40cc9b7ca61e274a2686.png
[068cff21ab074e60a34902c2d3b6b637.png]: https://img-blog.csdnimg.cn/068cff21ab074e60a34902c2d3b6b637.png
[8fb43a31e53f4dc58fd06ca7650f70cd.png]: https://img-blog.csdnimg.cn/8fb43a31e53f4dc58fd06ca7650f70cd.png
[f6722322750a4def932cc7fa91573eef.png]: https://img-blog.csdnimg.cn/f6722322750a4def932cc7fa91573eef.png
[804291076c59484f8a07b58387c9aa80.png]: https://img-blog.csdnimg.cn/804291076c59484f8a07b58387c9aa80.png
[d2c10677ca39418c95d095c28e1c04c0.png]: https://img-blog.csdnimg.cn/d2c10677ca39418c95d095c28e1c04c0.png
[3f274d7a56fe42ab9168b1df4149833b.png]: https://img-blog.csdnimg.cn/3f274d7a56fe42ab9168b1df4149833b.png
[af755cd2684c4dfabc2559b1e52831d4.png]: https://img-blog.csdnimg.cn/af755cd2684c4dfabc2559b1e52831d4.png