地图拉伸api ExtrudeBufferGeometry
通过three.js的几何体ExtrudeBufferGeometry可以拉伸一个轮廓,这样的话,通过ExtrudeBufferGeometry可以实现一个立体的拉伸地图效果。
注意拉伸高度要参考地图包围盒尺寸,或者说...
yekong
2年前 (2023-01-25)
喜欢
克隆.clone()和复制.copy() 是threejs很多对象都具有的方法,比如三维向量对象Vector3、 网格模型Mesh、几何体、材质。
克隆.clone()
克隆.clone()简单说就是复制一个和原对象一样的新对象,下面以三维向量对象Vector3给大家举例,其他的...
yekong
2年前 (2023-01-24)
喜欢
添加资源
model.add(gltf.scene)
移除资源
移除的资源不会渲染出来。
model.remove(gltf.scene)
资源移除后需要释放资源,threejsGPU内存释放
...
yekong
2年前 (2023-01-23)
喜欢
web3d项目开发中,threejs场景渲染过后,移出场景显存占用仍然存在。为了减少不必要的资源占用,需要释放资源。
在移出模型后,需要释放模型占用的资源
// 从场景中移出數据不再渲染 不在占用gltf.scene需要的GPU资源占用
model.remove(gltf.sc...
yekong
2年前 (2023-01-23)
喜欢
web3d项目开发中,再渲染gltf文件时,为了减少文件的大小,一般选择glb,然后再使用zip进行压缩。以节省带宽.
打开Blender选择文件找到导出选择gltf点击.
选择.glb
然后点击导出就可以了。
导出后再压缩原本10M大小的文件变成了3.3M.
threej...
yekong
2年前 (2023-01-23)
喜欢
问题
gltf模型加载后和建模师做出来的效果差别很大
解决办法
根据threejs里提供的关于GLTFLoader文档来看,需要对纹理进行配置
纹理中包含的颜色信息(.map, .emissiveMap, 和 .specularMap)在glTF中总是使用sRGB颜色空间,而顶点...
yekong
2年前 (2023-01-23)
喜欢
版本
0.123.0,使用0.143版本时会报computeFlatVertexNormals方法不存在
效果
演示地址
threejs实现4棱锥效果
延伸
threejs 在3d地图上标注四棱锥效果
项目代码
var scene = new THREE.Scene()
var...
yekong
2年前 (2023-01-22)
喜欢
通过Box3的学习使用,我们很快就可以找到地图的中心点,通过controls.target.set来将中心点设置为地图的中心点,达到地图在中心的效果。
<!--渲染河北地图-->
<template>
<div class="home...
yekong
2年前 (2023-01-22)
喜欢
问题
渲染出的中国地图没有在坐标中心。
解决方案
使用包围盒获取地图的中心,调整相机的lookAt坐标
创建包围盒
// 地图mapGroup的包围盒计算
var box3 = new THREE.Box3();//创建一个包围盒
// .expandByObject()方法:...
yekong
2年前 (2023-01-22)
喜欢
threejs 在渲染模型的时候需要调整相机的位置以更好的显示模型,这时候可能会需要模型的中心点,以及模型的尺寸, 使用Box3可以获取到网格模型的尺寸以及中心点
// 地图mapGroup的包围盒计算
var box3 = new THREE.Box3();//创建一个包围盒
...
yekong
2年前 (2023-01-22)
喜欢