纹理贴图就是通过threejs将图片贴在threejs创建的几何模型上面。创建纹理贴图模型需要大概以下几步
1.纹理加载器加载纹理
2.创建球形几何体
3.创建材质将纹理加入进去
4.创建网格模型将几何体和材质加入进去
5.创建场景将模型加入到场景中
demo地址
纹理贴图3d...
yekong
2年前 (2023-02-03)
喜欢
threejs完成3d地球渲染后,接下来在地球上根据经纬度进行标记,首先取个坐标比如北京经纬度116.404844,39.917813,然后利用js经纬度坐标转球面坐标方法转换坐标。
演示实例
threejs 3d地球地图北京渲染坐标点
获取坐标
首先要将经纬度转为3d球形坐标...
yekong
2年前 (2023-02-03)
喜欢
之前学习了threejs 通过纹理贴图渲染一个地球效果,学会如何渲染一个地球的效果,今天要学习3d地球如何和经纬度坐标对应。
演示实例
threejs 3d地球与经纬度的对应演示实例
通过图片我们可以知道球面和经纬度的大概关系。
接下来我们来在球面上指定位置绘制一个小球,为接下...
yekong
2年前 (2023-02-03)
喜欢
3d可视化案例 厂房开发时,客户又有新的需求要求点击特定模型隐藏模型显示模型下的子模型。
一开始是点击后进行高亮显示,如图是点击后显示为蓝色,现在有两个地方下面是有子模型的,所以要求点击后模型隐藏以便于显示子模型
处理前
处理后
上面的模型隐藏,显示出下面的子模型。点击其他模型...
yekong
2年前 (2023-01-30)
喜欢
今天查看以前的项目的时候,发现视频监控智能分析系统登录页底部有一个波浪图,不过当时还没接触过3d也没见过类似的效果,就没有去实现,今天看到了就想到threejs相关的页面见到过类似的效果,于是想着拿过来完善一下页面。让页面效果更丰富。
效果演示地址
vue数据大屏视频监控智能分析...
yekong
2年前 (2023-01-30)
喜欢
threejs 3d地球效果学习,今天学习通过纹理贴图渲染一个地球效果,最终实现大屏3D地球可视化实例的效果。
效果演示
threejs 通过纹理贴图渲染一个地球效果
代码
通过纹理加载器textureLoader加载贴图,通过SphereBufferGeometry创建一个球...
yekong
2年前 (2023-01-29)
喜欢
通过设置纹理的重复模式来实现图片复用达到草坪的效果。
演示效果
草地效果
代码
/**
* 创建一个草地地面
*/
var geometry = new THREE.PlaneGeometry(1000, 1000); //矩形平面
// 加载草地纹理贴图
var text...
yekong
2年前 (2023-01-28)
喜欢
通过批量创建表示一个树的精灵模型,来达到树林的效果。
演示效果
树林效果
代码
var that = this
/**
* 创建场景对象Scene
*/
var scene = new THREE.Scene();
/**
* 精灵创建树林效果
*/
// 加载树纹...
yekong
2年前 (2023-01-27)
喜欢
add()方法参数3和4数据类型:数字
格式:add(控制对象,对象具体属性,其他参数)
其他参数,可以一个或多个,数据类型也可以不同,gui会自动根据参数形式,自动生成对应的交互界面。
参数3和参数4,分别是一个数字,交互界面是一个鼠标可以拖动的拖动条,可以在一个区间改变属性的...
yekong
2年前 (2023-01-26)
喜欢
.name() 方法
改变标签名称
.add()创建的交互界面,会默认显示所改变属性的名字,为了通过交互界面更好理解你改变的某个对象属性,你可以通过.name()方法改变gui生成交互界面显示的内容。
gui.add(lineGroup.position, 'x', 0,...
yekong
2年前 (2023-01-26)
喜欢