标签:threejs

threejs

threejs 创建纹理贴图 学习笔记

threejs 创建纹理贴图 学习笔记
纹理贴图就是通过threejs将图片贴在threejs创建的几何模型上面。创建纹理贴图模型需要大概以下几步 1.纹理加载器加载纹理 2.创建球形几何体 3.创建材质将纹理加入进去 4.创建网格模型将几何体和材质加入进去 5.创建场景将模型加入到场景中 demo地址 纹理贴图3d...

yekong 2年前 (2023-02-03) 喜欢

threejs

threejs根据经纬度在3d地球上渲染圆点 学习笔记

threejs根据经纬度在3d地球上渲染圆点 学习笔记
threejs完成3d地球渲染后,接下来在地球上根据经纬度进行标记,首先取个坐标比如北京经纬度116.404844,39.917813,然后利用js经纬度坐标转球面坐标方法转换坐标。 演示实例 threejs 3d地球地图北京渲染坐标点 获取坐标 首先要将经纬度转为3d球形坐标...

yekong 2年前 (2023-02-03) 喜欢

threejs

threejs 3d地球与经纬度的对应演示实例

threejs 3d地球与经纬度的对应演示实例
之前学习了threejs 通过纹理贴图渲染一个地球效果,学会如何渲染一个地球的效果,今天要学习3d地球如何和经纬度坐标对应。 演示实例 threejs 3d地球与经纬度的对应演示实例 通过图片我们可以知道球面和经纬度的大概关系。 接下来我们来在球面上指定位置绘制一个小球,为接下...

yekong 2年前 (2023-02-03) 喜欢

threejs

threejs 点击隐藏模型显示模型下的子模型

threejs 点击隐藏模型显示模型下的子模型
3d可视化案例 厂房开发时,客户又有新的需求要求点击特定模型隐藏模型显示模型下的子模型。 一开始是点击后进行高亮显示,如图是点击后显示为蓝色,现在有两个地方下面是有子模型的,所以要求点击后模型隐藏以便于显示子模型 处理前 处理后 上面的模型隐藏,显示出下面的子模型。点击其他模型...

yekong 2年前 (2023-01-30) 喜欢

threejs

threejs 实现波浪的动画效果

threejs 实现波浪的动画效果
今天查看以前的项目的时候,发现视频监控智能分析系统登录页底部有一个波浪图,不过当时还没接触过3d也没见过类似的效果,就没有去实现,今天看到了就想到threejs相关的页面见到过类似的效果,于是想着拿过来完善一下页面。让页面效果更丰富。 效果演示地址 vue数据大屏视频监控智能分析...

yekong 2年前 (2023-01-30) 喜欢

threejs

threejs实现草地效果 学习笔记

threejs实现草地效果 学习笔记
通过设置纹理的重复模式来实现图片复用达到草坪的效果。 演示效果 草地效果 代码 /** * 创建一个草地地面 */ var geometry = new THREE.PlaneGeometry(1000, 1000); //矩形平面 // 加载草地纹理贴图 var text...

yekong 2年前 (2023-01-28) 喜欢

threejs

threejs 实现树林效果 学习笔记

threejs 实现树林效果 学习笔记
通过批量创建表示一个树的精灵模型,来达到树林的效果。 演示效果 树林效果 代码 var that = this /** * 创建场景对象Scene */ var scene = new THREE.Scene(); /** * 精灵创建树林效果 */ // 加载树纹...

yekong 2年前 (2023-01-27) 喜欢

threejs

gui.js库(下拉菜单、单选框)

gui.js库(下拉菜单、单选框)
add()方法参数3和4数据类型:数字 格式:add(控制对象,对象具体属性,其他参数) 其他参数,可以一个或多个,数据类型也可以不同,gui会自动根据参数形式,自动生成对应的交互界面。 参数3和参数4,分别是一个数字,交互界面是一个鼠标可以拖动的拖动条,可以在一个区间改变属性的...

yekong 2年前 (2023-01-26) 喜欢

threejs

gui.js库(颜色、命名、步长、事件)

gui.js库(颜色、命名、步长、事件)
.name() 方法 改变标签名称 .add()创建的交互界面,会默认显示所改变属性的名字,为了通过交互界面更好理解你改变的某个对象属性,你可以通过.name()方法改变gui生成交互界面显示的内容。 gui.add(lineGroup.position, 'x', 0,...

yekong 2年前 (2023-01-26) 喜欢