- 2024-06-19threejs纹理平铺实现地面效果
constgeometry=newTHREE.PlaneGeometry(20000,20000);//纹理贴图加载器TextureLoaderconsttexLoader=newTHREE.TextureLoader();//.load()方法加载图像，返回一个纹理对象Textureconstrenderer=newTHREE.WebGLRenderer();consttexture=texL
- 2024-06-13前端菜鸡流水账日记 -- 各类网站（持续更新版）
哈喽大家，这篇文章主要是打算用来放一些我们平时用的到的连接之类的，大多数都是我自己收藏了的，现在和之后如果有新增都会放到这里，持续更新的~~~~（各种类型的都有）------------------------------------------------------------------------------------------------------------
- 2024-06-11学习ThreeJS
创建第一个应用 使用ThreeJS进行编程的时候，都是在调用newThree().XXX来实现方法，让我们先根据官方文档创建一个demohttps://threejs.org/docs/index.html#manual/zh/introduction/Creating-a-scene那我们需要什么东西才能让这个场景build起来呢？一个相机（camera），一般是使
- 2024-05-30三维前端开发项目中Threejs的THREEScene函数详解
THREE.Scene函数用于创建一个场景对象。大家好！艾斯视觉作为在IT行业中负责ui设计和前端开发环节的服务商很高兴能在这里与大家共同探讨学习：场景是Three.js中所有图形元素的容器，它可以包含相机、光源、几何体、材质等。创建场景对象的基本语法如下：constscene=newTHREE.S
- 2024-05-28前端菜鸡流水账日记 -- threejs和cesium
哈喽哇大家，今天来点不一样的，主要是因为今天没有后台系统的修改，所作的修改是在以cesium为基础的项目上，用threejs渲染一个模型，并且可以具有显示/隐藏的功能，那下边就让我们来看看怎么实现的把~--------------------------------------------------------------------------------
- 2024-05-20threejs饼图
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/><title>Cake</title>
- 2024-05-01threejs 几何体的本质 顶点
几何体的线框模式，一个正方平面最少可以由4个顶点组成，两个三角形组成（公用了2个顶点，使用了索引创建顶点属性）。//导入threejsimport*asTHREEfrom"three";import{OrbitControls}from"three/examples/jsm/controls/OrbitControls.js";//引入dat.gui.js的一个类GU
- 2024-05-01threejs - js库 gui 的使用 调试开发3D效果
//导入threejsimport*asTHREEfrom"three";import{OrbitControls}from"three/examples/jsm/controls/OrbitControls.js";//引入dat.gui.js的一个类GUIimport{GUI}from'three/addons/libs/lil-gui.module.min.js';//创建场景scene
- 2024-04-27threejs 浏览器窗口resize变化 自适应 html 全屏
全屏：画布全屏和body页面全屏；//导入threejsimport*asTHREEfrom"three";import{OrbitControls}from"three/examples/jsm/controls/OrbitControls.js";//创建场景sceneconstscene=newTHREE.Scene();//console.log(scene,'scene');//
- 2024-04-25threejs 父元素 相对位置 position 网格对象
设置position都是相对于父元素的位置设置的//导入threejsimport*asTHREEfrom"three";import{OrbitControls}from"three/examples/jsm/controls/OrbitControls.js";//创建场景sceneconstscene=newTHREE.Scene();//console.log(scene,'scene'
- 2024-04-21threejs - 渲染第一个3D场景 - 旋转的正方体
1.安装threejs&使用2.创建三要素 场景scene相机camera渲染器render 3.场景newTHREE.Scene() 相机分为2种 1.透视相机2.正交相机 渲染器的使用 把canvas标签渲染到body页面document.body.appendChild(renderer.doLement); // 渲染canvasre
- 2024-04-10threejs——开发一款塔防游戏
前言完成效果gif图较大，耐心等待，源码见文末为了上班摸鱼合理的玩游戏，我写了一个3d塔防游戏，其中功能包含动画、敌人运动、放置武器、升级武器、销毁武器、动态检测等功能。请动动小手，点赞收藏，这就发车~目录结构思维导图具体功能和思路如下有了这个思维导图，就可以
- 2024-04-08three.js零基础入门超全超细的教程整理（一）
事情是这样的：有一天我干完活看技术文章发现了three.js诶！这玩应挺有意思盘盘于是第一天找教程上官网初上手第二天找案例渲模型试VR第三天捋文档然后来活了没时间捋了下面是集百家精华教程的整理总结涉及到教程方面有加源作者和地址超详细的教程：http://ww
- 2024-03-24threejs（一）
一、Threejs简介Three.js是一款运行在浏览器中的3D引擎，你可以在网页中创建和显示动画的3D计算机图形。它是一个开源项目，其目标是创建一个易于使用，轻量级，可移植的3D库。Three.js以WebGL为基础，封装了底层的WebGLAPI，提供了更简洁易用的3DAPI接口，让开发者能够更方便地创建和显示3D
- 2024-03-18Threejs 车场景案例
效果如下：本来上传视频的，视频还在审核中，通过之后可以看看各位大佬进来关注下：技术：使用threejs框架体系开发，需要具体的源码关注回复："车“即可获取下载地址谢谢，不光有这个场景，还有更多的场景在持续免费的更新中，谢谢支持！
- 2024-03-18vue3+threejs新手从零开发卡牌游戏（二）：初始化场景
在删掉初始化中一些没用的代码后，在views目录下新建game文件夹，在里面新建一个index.vue，这里就当成游戏的主入口。目录结构如下：下面开始尝试创建场景：一、添加一个div作为threejs的画布对象，之后整个的主要游戏开发内容全在这一个div中（实际threejs会渲染成canvas），并调整样式铺满
- 2024-03-13Threejs实现模型对接音乐节奏
昨天看到一个网站是2维的柱形图随着音乐节奏起伏，我突然想到二维形状可以起伏，三维应该也可以，最终原理应该都是将音乐频谱分解为数据，通过数据的切换不断地改变图形的形状来实现，因为找了分析音乐频谱的源码，解析完，再通过threejs的动画实现了3D场景下的模型随着音乐
- 2024-02-20threejs 如何设置自己想要的初始角度和大小
threejs在渲染完模型后，一般初始的大小和角度并不合我们的心意，这就需要我们手动调整了，但是手动调整又不好控制精度。 开启相机控件threejs渲染的模型大小和角度是由相机决定的，所以我们只需要调整相机就可以了，然后获取相机位置信息写入到初始化的数据中就可以了。要调整相
- 2024-02-02ThreeJs实现简单的动画
上一节实现可用鼠标控制相机的方式实现动态效果，但很多时候是需要场景自己产恒动态效果，而不是通过鼠标拖动，此时引入一个requestAnimationFrame方法，它实际上是通过定时任务的方式，每隔一点时间改变场景中内容后重新渲染一遍，间隔时间短的话视觉上就显示出连续的动画效果，Js本身也自带定
- 2024-01-13GIS融合之路（二）CesiumJS和ThreeJS深度缓冲区整合
在这篇文章开始前再次重申一下，山海鲸并没有使用ThreeJS引擎。但由于ThreeJS引擎使用广泛，下文中直接用ThreeJS同CesiumJS的整合方案代替山海鲸中3D引擎和CesiumJS整合。系列传送门：山海鲸可视化：GIS融合之路（一）技术选型CesiumJS/loaders.gl/iTowns?文章开始之前大家可以看下这个视
- 2024-01-13GIS融合之路（一）技术选型CesiumJS/loaders.gl/iTowns
大家好，我是山海鲸的技术负责人。今天来和大家分享一下山海鲸可视化在数字孪生系统当中对GIS系统的整合之路，大家可以移步视频教程中看一下目前的整合效果。【山海鲸可视化GIS系统】第六课GIS与数字孪生_哔哩哔哩熟悉山海鲸的朋友应该知道，山海鲸可视化在3.0之后，在软件内部整合了
- 2024-01-07Threejs——十四、关于深度冲突、重叠、以及加载模型进度条效果实现（附完整代码）
深度冲突两个模型重叠的模型，通过浏览器旋转预览，会发现模型旋转的时候会发生闪烁。这种情况，主要是两个模型重合，电脑分不清谁在前谁在后，这种情况，可以理解为深度冲突Z-fighting。functionaddBox(){constgeometry=newTHREE.BoxGeometry(10,10,10);//材质constmater
- 2023-12-28初见threejs
threejs底层封装了强大的webGL技术，让开发者们可以开箱即用（其实也并非开箱即用，还是挺麻烦的
- 2023-12-22ThreeJS纯记录用
缝合了ThreeJS，然后地图缝合了Cesium，缝的版本又老，不更新成新版本，功能比ThreeJS和Cesium都弱，想调用Cesium原生方法，嘿，没门，封死了。价格贵的要死。你咨询技术支持他首先就会问你买会员了没。SVIP一年一万，买了毛用没有，技术支持并不会因此变得专业，问就是刷新，问就是用Chrome，问就是清空缓
- 2023-12-17Threejs利用着色器编写动态飞线特效
一、导语动态飞线特效是可视化数据地图中常见的需求之一，鼠标点击的区块作为终点，从其他区块飞线至点击区块，附带颜色变换或者结合粒子动画二、分析利用创建3点来构成贝塞尔曲线，形成线段利用着色器材质来按照线段以及时间点变化来变化线段的颜色形成动画三、上基础代码//贝塞尔曲线