备案控制台
开发者社区 数据库 文章 正文

three.js实现酷炫散点模型

2023-01-15 229
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： three.js实现酷炫散点模型

1.效果图展示

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

bf71f20327ec48dabe69ac4a64d14c8d.gif

image.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.控制球的数量

image.png

4.2 控制外围网格的形状

image.png

4.3 控制初始的形态

image.png

4.4 让其停止切换

image.png

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

image.png

4.6 控制切换动画的种类

image.png

4.7 控制镜头的位移

image.png

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

image.png

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

源码： 

var _createClass = function () {function defineProperties(target, props) {for (var i = 0; i < props.length; i++) {var descriptor = props[i];descriptor.enumerable = descriptor.enumerable || false;descriptor.configurable = true;if ("value" in descriptor) descriptor.writable = true;Object.defineProperty(target, descriptor.key, descriptor);}}return function (Constructor, protoProps, staticProps) {if (protoProps) defineProperties(Constructor.prototype, protoProps);if (staticProps) defineProperties(Constructor, staticProps);return Constructor;};}();function _classCallCheck(instance, Constructor) {if (!(instance instanceof Constructor)) {throw new TypeError("Cannot call a class as a function");}}var Roxik = function () {
  function Roxik() {_classCallCheck(this, Roxik);
    this.models = [];
    this.initialize();
    this.animate();
  }_createClass(Roxik, [{ key: "initialize", value: function initialize()
    {
      this.initializeEngine();
      this.initializeCamera();
      this.initializeLights();
      this.initializeMaterials();
      this.initializeObjects();
      this.initializeFilters();
      this.initializeListeners();
    } }, { key: "initializeEngine", value: function initializeEngine()
    {
      this.scene = new THREE.Scene();
      this.scene.background = new THREE.Color(0xfefefe);
      this.renderer = new THREE.WebGLRenderer({ antialias: true });
      this.renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(this.renderer.domElement);
    } }, { key: "initializeCamera", value: function initializeCamera()
    {
      this.camera = new THREE.PerspectiveCamera(
      55,
      window.innerWidth / window.innerHeight,
      0.001,
      1000);
      this.camera.position.x = 2;
      this.camera.position.y = 2;
      this.camera.position.z = -2;
      this.cameraController = new CameraController();
      this.cameraController.camera = this.camera;
    } }, { key: "initializeLights", value: function initializeLights()
    {
      this.ambientLight = new THREE.DirectionalLight(0x9090aa);
      this.ambientLight.position.set(-10, 10, -10).normalize();
      this.scene.add(this.ambientLight);
      var light = new THREE.HemisphereLight(0xffffff, 0x444444);
      light.position.set(1, 1, 1);
      this.scene.add(light);
    } }, { key: "initializeMaterials", value: function initializeMaterials()
    {
      var colors = [
      0x97350b,
      0x266ea5,
      0x00847f,
      0x2f818e,
      0x08917c,
      0x08917c,
      0x6b458c,
      0x7a4526];
      this.sphereMaterial = [];
      for (var i = 0; i < 8; i++) {
        var mat = new THREE.MeshLambertMaterial({ color: colors[i] });
        this.sphereMaterial.push(mat);
      }
      this.cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xdddddd });
      this.cubeMaterial.wireframe = true;
    } }, { key: "initializeObjects", value: function initializeObjects()
    {
      var bet = 0.7;
      var offset = (8 - 1) * bet * 0.5;
      var geometry = new THREE.IcosahedronBufferGeometry(0.3, 2);
      for (var i = 0; i < 8; i++) {
        for (var j = 0; j < 8; j++) {
          for (var k = 0; k < 8; k++) {
            var m = this.sphereMaterial[Math.floor(Math.random() * 8)];
            var s = new THREE.Mesh(geometry, m);
            s.position.set(i * bet - offset, j * bet - offset, k * bet - offset);
            this.models.push(s);
            this.scene.add(s);
          }
        }
      }
      this.cube = new THREE.CubeGeometry(18, 18, 18, 4, 4, 4);
      this.cubeMesh = new THREE.Mesh(this.cube, this.cubeMaterial);
      this.scene.add(this.cubeMesh);
      this.cameraController.models = this.models;
      this.motionController = new MotionController();
      this.motionController.models = this.models;
      this.motionController.changeScene(this.motionController.CYLINDER);
    } }, { key: "initializeFilters", value: function initializeFilters()
    {} }, { key: "initializeListeners", value: function initializeListeners()
    {
      window.addEventListener("resize", this.updateDimensions.bind(this));
      document.addEventListener("keydown", this.keydownHandler.bind(this));
    } }, { key: "animate", value: function animate()
    {
      requestAnimationFrame(this.animate.bind(this));
      this.cameraController.step();
      this.motionController.step();
      this.renderer.render(this.scene, this.camera);
    } }, { key: "updateDimensions", value: function updateDimensions()
    {
      var width = window.innerWidth;
      var height = window.innerHeight;
      this.renderer.setSize(width, height);
      this.camera.aspect = width / height;
      this.camera.updateProjectionMatrix();
    } }, { key: "keydownHandler", value: function keydownHandler(
    event) {
      var keyCode = event.which;
      switch (keyCode) {
        case 49:
        case 97:
          this.motionController.changeScene(this.motionController.CYLINDER);
          break;
        case 50:
        case 98:
          this.motionController.changeScene(this.motionController.SPHERE);
          break;
        case 51:
        case 99:
          this.motionController.changeScene(this.motionController.CUBE);
          break;
        case 52:
        case 100:
          this.motionController.changeScene(this.motionController.TUBE);
          break;
        case 53:
        case 101:
          this.motionController.changeScene(this.motionController.WAVE);
          break;
        case 54:
        case 102:
          this.motionController.changeScene(this.motionController.GRAVITY);
          break;
        case 55:
        case 103:
          this.motionController.changeScene(this.motionController.ANTIGRAVITY);
          break;}
    } }]);return Roxik;}();var
CameraController = function () {
  function CameraController() {_classCallCheck(this, CameraController);
    this.camera = null;
    this.models = [];
    this.frame = 1000;
    this.sceneLimit = 90;
    this.tm;
    this.target = new THREE.Vector3(0, 0, 0);
    this.cs = 0;
    this.gy = 0;
    this.l = 0;
    this.bl = 6;
    this.ts = 0;
    this.r = 0;
    this.rp = 0.03;
  }_createClass(CameraController, [{ key: "step", value: function step()
    {
      if (++this.frame > this.sceneLimit) {
        this.frame = 0;
        this.sceneLimit = Math.floor(Math.random() * 60 + 30);
        this.tm = this.models[Math.floor(Math.random() * this.models.length)];
        this.ts = 0;
        this.cs = 0;
        this.gy = Math.random() * 8 - 4;
        this.rp = Math.random() * 0.06 - 0.03;
        this.bl = Math.random() * 4 + 7;
      }
      if (this.ts < 0.05) {
        this.ts += 0.005;
      }
      if (this.cs < 0.5) {
        this.cs += 0.005;
      }
      this.target.x += (this.tm.position.x - this.target.x) * this.ts;
      this.target.y += (this.tm.position.y - this.target.y) * this.ts;
      this.target.z += (this.tm.position.z - this.target.z) * this.ts;
      this.camera.lookAt(this.target);
      this.r += this.rp;
      this.l += (this.bl - this.l) * 0.1;
      this.camera.position.x +=
      (Math.cos(this.r) * this.l +
      this.tm.position.x -
      this.camera.position.x) *
      this.cs;
      this.camera.position.y +=
      (this.tm.position.y + this.gy - this.camera.position.y) * this.cs;
      this.camera.position.z +=
      (Math.sin(this.r) * this.l +
      this.tm.position.z -
      this.camera.position.z) *
      this.cs;
    } }]);return CameraController;}();var
MotionController = function () {
  function MotionController() {_classCallCheck(this, MotionController);
    this.CYLINDER = 0;
    this.SPHERE = 1;
    this.CUBE = 2;
    this.TUBE = 3;
    this.WAVE = 4;
    this.GRAVITY = 5;
    this.ANTIGRAVITY = 6;
    this.models = [];
    this.scene = this.CYLINDER;
    this.sceneLimit = 100;
    this.frame = 0;
    this.cutoff = 0;
    this.r = 0.0;
    this.r0 = 0.0;
    this.rp = 0.0;
    this.rl = 0.0;
  }_createClass(MotionController, [{ key: "changeScene", value: function changeScene(
    scene) {var limit = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : -1;
      this.cutoff = 0;
      this.scene = scene;
      this.frame = 0;
      if (limit < 0) {
        this.sceneLimit = Math.floor(Math.random() * 140 + 3);
      } else {
        this.sceneLimit = limit;
      }
      switch (this.scene) {
        case this.CYLINDER:
          this.cylinder();
          break;
        case this.SPHERE:
          this.sphere();
          break;
        case this.CUBE:
          this.cube();
          break;
        case this.TUBE:
          this.tube();
          break;
        case this.WAVE:
          this.wave();
          break;
        case this.GRAVITY:
          this.gravity();
          break;
        case this.ANTIGRAVITY:
          this.antigravity();
          break;}
    } }, { key: "cylinder", value: function cylinder()
    {
      var n = 0;
      var r = Math.PI * 2 / this.models.length;
      var d = r * Math.floor(Math.random() * 40 + 1);
      for (var i = 0; i < this.models.length; i++) {
        var m = this.models[i];
        m.speed = 0;
        m.accel = Math.random() * 0.05 + 0.022;
        m.animate = false;
        m.dest = new THREE.Vector3();
        if (i < this.models.length - 50) {
          m.dest.x = Math.cos(n) * 4;
          m.dest.y = i * 0.008 - (this.models.length - 50) * 0.004;
          m.dest.z = Math.sin(n) * 4;
        } else {
          m.dest.x = Math.random() * 14 - 7;
          m.dest.y = Math.random() * 14 - 7;
          m.dest.z = Math.random() * 14 - 7;
        }
        n = n + d;
      }
    } }, { key: "sphere", value: function sphere()
    {
      var s = 0;
      var c = 0;
      var r = Math.PI * 2 / this.models.length;
      var d = r * Math.floor(Math.random() * 40 + 1);
      var d2 = Math.random() * 5 + 3;
      for (var i = 0; i < this.models.length; i++) {
        var m = this.models[i];
        m.speed = 0;
        m.accel = Math.random() * 0.05 + 0.022;
        m.animate = false;
        m.dest = new THREE.Vector3();
        var d1 = Math.cos(s) * d2;
        if (Math.random() > 0.06) {
          m.dest.x = Math.cos(c) * d1;
          m.dest.y = Math.sin(s) * d2;
          m.dest.z = Math.sin(c) * d1;
        } else {
          m.dest.x = Math.random() * 7 - 7;
          m.dest.y = Math.random() * 7 - 7;
          m.dest.z = Math.random() * 7 - 7;
        }
        s = s + r;
        c = c + d;
      }
    } }, { key: "cube", value: function cube()
    {
      var a = Math.random() * 0.05 + 0.022;
      var n = 0;
      var l = 1;
      while (true) {
        if (l * l * l > this.models.length) {
          l--;
          break;
        }
        l++;
      }
      for (var i = 0; i < l; i++) {
        for (var j = 0; j < l; j++) {
          for (var k = 0; k < l; k++) {
            var m = this.models[n++];
            m.speed = 0;
            m.accel = a;
            m.animate = false;
            m.dest = new THREE.Vector3();
            m.dest.x = i * 0.8 + -(l - 1) * 0.8 * 0.5;
            m.dest.y = j * 0.8 + -(l - 1) * 0.8 * 0.5;
            m.dest.z = k * 0.8 + -(l - 1) * 0.8 * 0.5;
          }
        }
      }
    } }, { key: "tube", value: function tube()
    {
      var a = Math.random() * 0.05 + 0.022;
      var v = 0.02 + Math.random() * 0.025;
      var dx = -v * this.models.length * 0.44;
      var d = 1.2 + Math.random() * 1;
      for (var i = 0; i < this.models.length; i++) {
        var m = this.models[i];
        m.speed = 0;
        m.accel = a;
        m.animate = false;
        m.dest = new THREE.Vector3();
        if (Math.random() > 0.05) {
          m.dest.x = i * v + dx;
          m.dest.y = Math.random() * d - d * 0.5;
          m.dest.z = Math.random() * d - d * 0.5;
        } else {
          m.dest.x = Math.random() * 14 - 7;
          m.dest.y = Math.random() * 14 - 7;
          m.dest.z = Math.random() * 14 - 7;
        }
      }
    } }, { key: "wave", value: function wave()
    {
      var a = Math.random() * 0.05 + 0.022;
      var n = 0;
      var l = Math.floor(Math.sqrt(this.models.length));
      var d = -(l - 1) * 0.55 * 0.5;
      var r = 0;
      var t = Math.random() * 0.3 + 0.05;
      var s = Math.random() * 1 + 1;
      this.r = 0;
      this.r0 = 0;
      this.rl = Math.random() * 1 + 1;
      this.rp = Math.random() * 0.3 + 0.1;
      for (var i = 0; i < l; i++) {
        var ty = Math.cos(r) * s;
        r += t;
        for (var j = 0; j < l; j++) {
          n += 1;
          var m = this.models[n - 1];
          m.speed = 0;
          m.accel = a;
          m.animate = false;
          m.dest = new THREE.Vector3();
          m.dir = new THREE.Vector3();
          m.dir.x = m.dir.y = m.dir.z = 0;
          m.dest.x = i * 0.55 + d;
          m.dest.y = ty;
          m.dest.z = j * 0.55 + d;
        }
      }
      while (n < this.models.length) {
        var m = this.models[n];
        m.speed = 0;
        m.accel = a;
        m.animate = false;
        m.dest = new THREE.Vector3();
        m.dest.x = Math.random() * 14 - 7;
        m.dest.y = Math.random() * 14 - 7;
        m.dest.z = Math.random() * 14 - 7;
        n++;
      }
    } }, { key: "gravity", value: function gravity()
    {
      this.sceneLimit = 60;
      for (var i = 0; i < this.models.length; i++) {
        var m = this.models[i];
        m.dir = new THREE.Vector3();
        m.speed = 0;
        m.accel = 0.5;
        m.animate = false;
        m.dir.y = Math.random() * -0.2;
      }
    } }, { key: "antigravity", value: function antigravity()
    {
      for (var i = 0; i < this.models.length; i++) {
        var m = this.models[i];
        m.speed = 0;
        m.accel = 0.5;
        m.animate = false;
        m.dir = new THREE.Vector3();
        m.dir.x = Math.random() * 0.25 - 0.125;
        m.dir.y = Math.random() * 0.25 - 0.125;
        m.dir.z = Math.random() * 0.25 - 0.125;
      }
    } }, { key: "step", value: function step()
    {
      var m = null;
      switch (this.scene) {
        case this.CYLINDER:
        case this.SPHERE:
        case this.CUBE:
        case this.TUBE:
          for (var i = 0; i < this.cutoff; i++) {
            m = this.models[i];
            if (!m.animate) {
              if (m.speed < 0.8) {
                m.speed = m.speed + m.accel;
              }
              var c0 = m.dest.x - m.position.x;
              var c1 = m.dest.y - m.position.y;
              var c2 = m.dest.z - m.position.z;
              m.position.x = m.position.x + c0 * m.speed;
              m.position.y = m.position.y + c1 * m.speed;
              m.position.z = m.position.z + c2 * m.speed;
              if (
              Math.abs(c0) < 0.05 &&
              Math.abs(c1) < 0.05 &&
              Math.abs(c2) < 0.05)
              {
                m.animate = true;
                m.position.x = m.dest.x;
                m.position.y = m.dest.y;
                m.position.z = m.dest.z;
              }
            }
          }
          var _maxp = Math.floor(this.models.length / 40);
          this.cutoff += _maxp;
          if (this.cutoff > this.models.length) this.cutoff = this.models.length;
          break;
        case this.WAVE:
          var cos = 0;
          var max = Math.floor(Math.sqrt(this.models.length));
          var cc = 0;
          for (var _i = 0; _i < max; _i++) {
            cos = Math.cos(this.r) * this.rl;
            this.r = this.r + this.rp;
            for (var j = 0; j < max; j++) {
              m = this.models[cc++];
              m.dest.y = cos;
            }
          }
          this.r0 += 0.11;
          this.r = this.r0;
          for (var _i2 = 0; _i2 < this.cutoff; _i2++) {
            m = this.models[_i2];
            if (m.speed < 0.5) {
              m.speed += m.accel;
            }
            m.position.x = m.position.x + (m.dest.x - m.position.x) * m.speed;
            m.position.y = m.position.y + (m.dest.y - m.position.y) * m.speed;
            m.position.z = m.position.z + (m.dest.z - m.position.z) * m.speed;
          }
          var _maxp = Math.floor(this.models.length / 40);
          this.cutoff += _maxp;
          if (this.cutoff > this.models.length) this.cutoff = this.models.length;
          break;
        case this.GRAVITY:
          for (var _i3 = 0; _i3 < this.models.length; _i3++) {
            m = this.models[_i3];
            m.position.y = m.position.y + m.dir.y;
            m.dir.y = m.dir.y - 0.06;
            if (m.position.y < -9) {
              m.position.y = -9;
              m.dir.y = m.dir.y * -m.accel;
              m.accel = m.accel * 0.9;
            }
          }
          break;
        case this.ANTIGRAVITY:
          for (var _i4 = 0; _i4 < this.cutoff; _i4++) {
            m = this.models[_i4];
            m.position.x = m.position.x + m.dir.x;
            m.position.y = m.position.y + m.dir.y;
            m.position.z = m.position.z + m.dir.z;
          }
          this.cutoff += 30;
          if (this.cutoff > this.models.length) this.cutoff = this.models.length;
          break;}
      if (++this.frame > this.sceneLimit)
      this.changeScene(Math.floor(Math.random() * 7));
    } }]);return MotionController;}();
var roxik = new Roxik();


文章标签：
JavaScript
数据库
关键词：
JavaScript模型
游客phojfecwcv6ze
目录
相关文章
2019ab
|
1月前
egg.js 24.10sequelize模型-查询单个
egg.js 24.10sequelize模型-查询单个
2019ab
26 1
egg.js 24.10sequelize模型-查询单个
2019ab
|
1月前
|
数据库
egg.js 24.9sequelize模型-批量新增和修改器
egg.js 24.9sequelize模型-批量新增和修改器
2019ab
38 0
egg.js 24.9sequelize模型-批量新增和修改器
2019ab
|
1月前
egg.js 24.13sequelize模型-字段限制排序分页
egg.js 24.13sequelize模型-字段限制排序分页
2019ab
45 1
egg.js 24.13sequelize模型-字段限制排序分页
茶卡盐佑星_
|
2天前
|
JavaScript 前端开发
JavaScript BOM 浏览器对象模型
JavaScript BOM 浏览器对象模型
茶卡盐佑星_
3 0
北城笑笑
|
1月前
|
JavaScript 前端开发 数据可视化
Three.js第2篇，加载glb / gltf模型，Vue加载glb / gltf模型（如何在vue中使用three.js，vue使用threejs加载glb模型）
Three.js 是一个用于在 Web 上创建和显示 3D 图形的 JavaScript 库。它提供了丰富的功能和灵活的 API，使开发者可以轻松地在网页中创建各种 3D 场景、模型和动画效果。可以用来展示产品模型、建立交互式场景、游戏开发、数据可视化、教育和培训等等。这里记录一下如何在Vue项目中使用Three.js
北城笑笑
89 4
Three.js第2篇，加载glb / gltf模型，Vue加载glb / gltf模型（如何在vue中使用three.js，vue使用threejs加载glb模型）
北桥苏
|
1月前
|
前端开发 JavaScript TensorFlow
如何将训练好的Python模型给JavaScript使用？
本文介绍了如何将TensorFlow模型转换为Web格式以实现浏览器中的实际应用。首先，简述了已有一个能够检测扑克牌的TensorFlow模型，目标是将其部署到Web上。接着，讲解了TensorFlow.js Converter的作用，它能将Python API创建的GraphDef模型转化为TensorFlow.js可读取的json格式，用于浏览器中的推理计算。然后，详细说明了Converter的安装、用法及不同输入输出格式，并提供了转换命令示例。最后，文中提到了模型转换后的实践步骤，包括找到导出的模型、执行转换命令以及在浏览器端部署模型的流程。
北桥苏
26 3
众所周知
|
1月前
|
JavaScript 前端开发
JavaScript 提供了多种方法来操作 DOM（文档对象模型）
【5月更文挑战第11天】JavaScript 用于DOM操作的方法包括获取元素（getElementById, getElementsByClassName等）、修改内容（innerHTML, innerText, textContent）、改变属性、添加/删除元素（appendChild, removeChild）和调整样式。此外，addEventListener用于监听事件。注意要考虑兼容性和性能当使用这些技术。
众所周知
20 2
龙大吉
|
1月前
|
前端开发 JavaScript UED
JavaScript 的事件循环机制是其非阻塞 I/O 模型的核心
【5月更文挑战第9天】JavaScript的事件循环机制是其非阻塞I/O的关键，通过单线程的调用栈和任务队列处理异步任务。当调用栈空时，事件循环从任务队列取出一个任务执行，形成循环。异步操作完成后，回调函数进入任务队列，等待被事件循环处理。微任务如Promise回调在每个宏任务结束后执行。此机制确保JavaScript能高效处理异步操作，不阻塞主线程，提供流畅的用户体验。
龙大吉
21 2
程序员-刘华强
|
1月前
|
JavaScript 前端开发
JavaScript DOM 文档对象模型（获取、改变html元素）
JavaScript DOM 文档对象模型（获取、改变html元素）
程序员-刘华强
17 0
1941623231718325
|
1月前
|
JavaScript 大数据 开发者
Node.js的异步I/O模型与事件循环：深度解析
【4月更文挑战第29天】本文深入解析Node.js的异步I/O模型和事件循环机制。Node.js采用单线程与异步I/O，遇到I/O操作时立即返回并继续执行，结果存入回调函数队列。事件循环不断检查并处理I/O事件，通过回调函数通知结果，实现非阻塞和高并发。这种事件驱动编程模型简化了编程，使开发者更专注业务逻辑，为高并发场景提供高效解决方案。
1941623231718325
21 0