![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
数据可视化
weixin_47563457
这个作者很懒,什么都没留下…
展开
-
一个小时入门three.js
1、下载Threejs-master 文件 链接:https://pan.baidu.com/s/1_Ix8TiOScypNcQe3BIl5vA 提取码:rrks下载最后一个R102版本;解压后得到打卡examples文件夹任意打卡一个htmlexamples文件夹中的html文件是与官网上的示例一一对应的;找到和需求差不多的html;将里面的代码移植到vue或react项目里就OK了...原创 2021-08-23 19:02:22 · 713 阅读 · 0 评论 -
three.js加载压缩过的gltf模型
一般来说建模师会给前端一个三维模型;然后剩下的工作就要前端来做了// 首先你需要安装组件npm install import-three-examplesnpm install three在react 或 vue中如下import * as THREE from 'three'import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'import { DRACOLoader } from 'three/examples原创 2021-08-23 18:47:54 · 413 阅读 · 0 评论 -
babylonjs 水面展示模型
1、核电站在水上所以要求要做这个;怕被告所以实例不方便展示;效果如下图闲言少叙代码如下var createScene = function (engine) { var scene = new BABYLON.Scene(engine); // Camera var camera = new BABYLON.ArcRotateCamera("Camera", 3 * Math.PI / 2, Math.PI / 2.5, 50, BABYLON.Vector3.Zero(),原创 2021-08-23 17:27:19 · 743 阅读 · 0 评论 -
BABYLONJS镜头动画
1、最近做核电站的镜头控制;产品要求切换镜头的时候要有个过渡动画;这种简单的东西也没啥好讲的;直接上效果由于做的核电站项目担心被公式起诉;所以搞了类似的东西展示效果;图书馆(镜头切换)[link](http://3dmad.online.fr/WebGL/Library_Interactive_Map_Mtp/index.html)2、核心代码 var speed1 = 45; var speed2 = 45; var frameCount = 200; //Anim原创 2021-08-23 17:24:07 · 856 阅读 · 0 评论 -
自定义时间滑块
1、前几个月产品给了同事个需求,模仿海康威视的摄像头监控模块;同事搞了三周不出来;没办法最后只有我亲自出马;废话不说了,效果如下:1、滑块个数不限制;2、鼠标落下产生滑块;可以自由拖拽控制位置和长度;3、滑块位置限制由前后滑块或时间条的极值确定(0:00 - 24:00)(ps:因为好几个月了最近为了面试提高身价才勉为其难写的;服务器没开所以效果大概如下图;想看具体效果自己开个vue-element-admin 复制粘贴上去;另外打个广告有偿解决前端数据可视化问题;包括不限于:echarts、ba原创 2021-08-23 16:19:05 · 813 阅读 · 1 评论 -
vue全屏某个dom元素(包括退出全屏、监听)
vue全屏某个dom元素(包括退出全屏、监听)1、话不多说直接上源码左上角的图标是随着DOM 元素是否全屏而改变的用isFullscreen来监听DOM是否全屏<template> <div id="button" style="background-color: red;width: 200px;height: 200px;"> <!-- <el-button v-if="!isFullscreen" type="primary" class="b原创 2021-01-10 23:10:13 · 1793 阅读 · 4 评论 -
echarts自定义X轴、Y轴间距
echarts自定义X轴、Y轴间距1、自定义间距1、自定义间距最近做一个项目,要求x、y 轴间距自定义,因为项目数据X轴为时间轴、Y轴为对数数据轴,由于x轴的时间轴各段时间点返回密度不均匀,所以一开始用interval ,官网上splitLine只能用控制点的间距来调节x轴间距(interval),但是如果每个时间段的点数目不均匀就无法到达等间距的效果,后来我灵机一动隐藏axisLabel,用marklabel 画出间距 ,这种方法就可以自定义所有分割线的间距和样式。...原创 2021-01-10 22:58:14 · 14130 阅读 · 2 评论