vue + threejs 实现场景环境贴图,模型高光显示效果 <template> <div class="modelsBox"> <div class="modelsBox_wrapper"></div> <div class="opara-pannel"> <div> </div> <div> 三维坐标点信息 <!-- <p>{{point3d}}<...
vue + threejs实现导入blender动画并控制其播放 <template><div class="modelsBox"> <div class="modelsBox_wrapper"></div> <div class="opara-pannel" @click.stop> <div> <button @click="playAnimate(idx)" v-for="(v, idx) in this.animations" :key="i...
vue+threejs 精灵模型Sprite模拟下雨效果 <template><div class="rain-box_wrapper"> <div class="modelsBox_wrapper"></div></div></template><script>import { webglOBJ } from '@/utils/webGL/webGL.js';import TWEEN from '@tweenjs/tween.js';export defa.
vue+threejs 实现鼠标点击三维空间的模型点,相机平滑聚焦到对应的模型。 <template><div class="modelsBox"> <div class="modelsBox_wrapper" v-if="f"></div> <div :id="`sign${idx + 1}`" style="position: absolute;" v-for="(v, idx) in labels" :key="idx"> <div class="sign" :uuid="v.uuid"...
vue + threejs 给3D模型添加label标签(dom的方式) webGL.js封装的代码。const THREE = window.THREE;// webGL对象配置export const webglOBJ = { renderDom: null, Scene: null, // 场景 camera: null, // 摄像头 renderer: null, // 渲染器 senceAdd (objList = []) { objList.forEach(v => { webglOBJ.Scene...
vue项目中封装websock并使用 import { randomString } from '@/utils/index.js';import router from '@/router/index.js';// ws配置信息export const webSocket = { ws: null, // ws实例 recTime: 5 * 1000, // 重连刷新时间 webSocketTime: null, // 定时请求发送心跳包id reconnentTime: null, // 唱失败从重连id par.
vue实现百度地图打点自定义div显示内容 <template><div class="bmap-layout"> <tipsBar/> <div class="unit" v-if="mapType == 'heat'"> <div class="unitItem"> <span class="text">锅炉房:</span> <span class="isNum">{{dataSys.guoLuF...
vue 实现高德地图搜索地址获取经纬度 <template> <div class="map-search_wrapper" id="bmapSearch"> <div class="header"> 需要查询的地址: <el-tooltip class="item" effect="dark" :content="textTip" placement="top" :value="isshowTip" manual> <el-input .
vue使用G6绘制树形图 <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.1/build/g6.js"></script> <script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script> <script src="https://gw.alipayobject.
earthSdk加载3D模型数据显示例子 <template> <div class="earthSdk" id="earthContainer"></div></template><script>export default { data () { return {}; }, mounted () { this.mapInt(); }, methods: { mapInt () { const XE = wi...
vue实现高德地图多边形绘制电子围栏 <template> <div class="index"> <el-button type="primary" @click="drawRectangle">绘制多边形</el-button> <el-button type="primary" @click="editRectangle">编辑多边形</el-button> <el-button type="primary" @click="d...