干饭两斤半
这个作者很懒,什么都没留下…
展开
-
Cesium(二)相机旋转拉近地图视角,加载geoJson数据,鼠标事件
效果图代码<template> <div id="cesiumContainer"> <!-- <ProjectButton style="z-index: 1"></ProjectButton> --> <LeftChart style="z-index: 1"></LeftChart> <RightAlert style="z-index: 1"></RightAler原创 2021-02-01 11:23:39 · 1024 阅读 · 1 评论 -
Cesiumjs(一)原生cesiumjs集成进入vue框架
cesiumjs简介Cesium是国外一个基于JavaScript编写的使用WebGL的地图引擎。Cesium支持3D,2D,2.5D形式的地图展示,可以自行绘制图形,高亮区域,并提供良好的触摸支持,且支持绝大多数的浏览器和mobile。cesiumjs集成进入vue项目,webpack配置webpack.base.config.js文件a.配置cesium的Source文件夹路径b.在output块儿中配置sourcePrefixc.配置alias块儿d.在model块儿中配置unknow原创 2021-02-01 09:41:32 · 1979 阅读 · 0 评论 -
threejs学习(十五)glb/gltf格式模型文件压缩--gltf-pipeline
由Richard Lee和Cesium团队用来优化glTF的工具https://github.com/CesiumGS/gltf-pipelinecesium团队是专注gis开发的将glTF转换为glb(并反向)将缓冲区/纹理保存为嵌入文件或单独文件将glTF 1.0模型转换为glTF 2.0应用Draco网格压缩使用npm全局安装gltf-pipeline工具npm install -g gltf-pipelinegltf-pipeline相关命令# 将glTF转换为glbgl原创 2021-03-15 17:24:53 · 3146 阅读 · 0 评论 -
threejs学习(十四)----uv贴图实现偏移动画
UV贴图用通俗易懂的例子来描述就是;把一张展开的世界地图包裹到一个球体上,让这个球体成为一个地球仪;threejs实现UV动画本例直接从模型中取出uv纹理贴图;进行offset;也可以通过代码构建纹理,进行贴图;实现动画// .....................// 加载模型代码 loader.load("/static/belt2.glb", function (gltf) { meshList = gltf.scene.children; //原创 2021-02-01 12:00:33 · 2073 阅读 · 0 评论 -
threejs学习(十三)相机缓动效果;
这种效果相机缓慢移动到另一位置,而不是相机位置直接改变;给用户一种更良好的体验;此效果需要导入 threejs的tweenjs包;import { TWEEN } from "three/examples/jsm/libs/tween.module.min.js"; // tween 缓动动画 // oldp 相机原位置position // oldT 原控制器位置 // newP 相机新位置 // newT 控制器新位置moveCamera(oldP, ol原创 2021-02-01 11:46:29 · 1710 阅读 · 1 评论 -
threejs学习(十二)后处理通道,outline模型边框高亮
效果如下代码initComposer() { // 初始化效果编辑器 composer = new EffectComposer(this.renderer); }, initRenderPass() { // 渲染通道配置 renderPass = new RenderPass(this.scene, this.camera); composer.addPass(renderPass); }, initOutli原创 2021-02-01 11:38:07 · 2432 阅读 · 0 评论 -
threejs学习(十一)非全屏canvas下,射线拾取坐标错位问题
问题在非全屏状态下,使用射线进行模型拾取,如果按照官方例子来做,会出现屏幕坐标转换三维坐标有误差,导致拾取模型错误;非全屏canvas解决方案需要重新计算鼠标点击坐标位置 spriteClick: function (event) { event.preventDefault(); // 鼠标转换三维坐标 // this.mouse.x = (event.clientX / document.getElementById("other").offset原创 2021-01-28 10:55:07 · 1124 阅读 · 1 评论 -
threejs学习(十)threejs添加mousedown和mouseup事件无效
看到网上说是普通js版本和vue项目之间存在不同;普通的引入threejs可以使用mousedown和mouseup触发事件;但是vue项目无法使用这两个事件,得用pointerdown和pointerup事件pointerdown属性也是原生js属性// 鼠标按下事件document.addEventListener('pointerdown', this.spriteClick, false);参考文章地址windown属性:pointerdown...原创 2021-01-28 10:42:26 · 1348 阅读 · 3 评论 -
threejs学习(九)-- threejs生成的canvas鼠标点击会有黑色边框出现问题解决
现象如图我看网上有的人说用:this.renderer.domElement.removeAttribute("tabindex")但是这会取消键盘事件;其实这个黑框很好解决;需要从css样式上来解决这个问题css有个outline样式;是元素轮廓;看下菜鸟教程的对该属性描述所以解决threejs生成的canvas的黑边框问题,用如下代码即可this.renderer.domElement.style.outline = "none"...原创 2020-12-18 13:58:27 · 1271 阅读 · 0 评论 -
threejs学习(八)-- raycaster拾取物体
threejs中可以通过raycaster来拾取与射线相交的物体;具体的概念可以搜搜其他博客看看mouseClick: function() { // 添加鼠标点击事件 document.addEventListener( 'click', this.spriteClick, false ); // 初始化射线 this.raycaster = new THREE.Raycaster(); // 初始化鼠标二维向量 this.mou原创 2020-11-23 17:00:28 · 875 阅读 · 0 评论 -
threejs学习(七)--解决2个sprite遮挡问题
场景:这里的场景是,一个sprite作为背景图,一个sprite作为文字;实现一个类似tip这样的功能。要实现这个功能,有一个问题,就是解决文字的sprite会被背景图的sprite所遮挡的问题;这个问题可以通过render(渲染器)的sortObjects属性来解决; // 使渲染顺序改为,先加入场景的先渲染 this.renderer.sortObjects = false; //----------省略一万行代码------------ // 此处的plane是一个透明平面mesh,用于原创 2020-11-23 16:51:03 · 3255 阅读 · 0 评论 -
threejs学习(六)--canvas绘制饼状图
首先看看canvas中如何划圆形;看下面这张图,很好的解释了canvas中的圆形绘制方式上图,我们可以知道,canvas的圆形其实是用弧线绘制的;饼状图代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2020-11-20 10:55:18 · 821 阅读 · 0 评论 -
threejs学习(五)--canvas入门学习
前言最近项目中使用到了threejs中的sprite组件;为了更好实现sprite组件的界面效果;以及我们在h5中绘制图表,都需要用到canvas这个标签;所以需要对canvas有较为深入的学习;canvas是一个HTML5的标签,这个标签可以被浏览器渲染为画布;canvas只是一个容器;这个容器可以装在2d(let ctx = canvas.getContext(“2d”)),也可以装在3D(let ctx = canvas.getContext(“webgl”));这个容器没有绘图功能,canva原创 2020-11-20 10:12:17 · 2374 阅读 · 0 评论 -
threejs学习--vue-cli集成threejs后,加载gltf模型FPS很低问题解决(四)
vue集成threejs后,web页面加载模型之后,FPS值在10以下;查阅资料是因为;声明的部分threejs的对象不可以放在data中;否则就会帧数特别低;以下为修改之后代码<template> </template><script> import * as THREE from "three"; import {GLTFLoader} from "three/examples/jsm/loaders/GLTFLoader"; i原创 2020-11-18 13:17:41 · 2387 阅读 · 6 评论 -
threejs学习-使用loader加载gltf文件(三)
首先,threejs中loader包下有多个工具可以加载建模文件;此处以gltf文件为例;加载代码片段 function initModel() { //辅助工具 // 三维坐标系 var helper = new THREE.AxesHelper(50); scene.add(helper); var loader = new GLTFLoader(); loader.load("/static/原创 2020-11-17 09:55:34 · 3447 阅读 · 7 评论 -
threejs学习-vue项目集成threejs(二)
1.threejs最新版本很好的支持了模块化,其各种扩展包在jsm包下作了模块化支持;以下为引入方式// 1.安装threejs依赖// npm install three// ****注意此处的控制器和加载器引入的jsm包下的js而非js包下;此处导入错误会报错import * as THREE from 'three';import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'; // 控制器import原创 2020-11-16 13:49:55 · 1353 阅读 · 0 评论 -
threejs学习(一)
前言threejs是一个web前端3D开源组件库,很好的支持各种web3D场景学习之前最好了解一些3D绘图软件中的元素;例如相机概念;灯光概念;网格模型概念等等;因为Threejs中有这些对应元素的对象;理解这些对象的作用,才能更快更深入的学习threejs;代码控制模型动画轨迹(主要requestAnimationFrame函数)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8原创 2020-11-10 10:45:03 · 442 阅读 · 0 评论