标签:threejs

threejs

threejs 实现地图轮廓的拉伸 学习笔记

threejs 实现地图轮廓的拉伸 学习笔记
地图拉伸api ExtrudeBufferGeometry 通过three.js的几何体ExtrudeBufferGeometry可以拉伸一个轮廓,这样的话,通过ExtrudeBufferGeometry可以实现一个立体的拉伸地图效果。 注意拉伸高度要参考地图包围盒尺寸,或者说...

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

threejs

threejs 克隆.clone()和复制.copy() 学习笔记

threejs 克隆.clone()和复制.copy() 学习笔记
克隆.clone()和复制.copy() 是threejs很多对象都具有的方法,比如三维向量对象Vector3、 网格模型Mesh、几何体、材质。 克隆.clone() 克隆.clone()简单说就是复制一个和原对象一样的新对象,下面以三维向量对象Vector3给大家举例,其他的...

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

threejs

threejs GPU内存释放.dispose() 学习笔记

threejs GPU内存释放.dispose() 学习笔记
web3d项目开发中,threejs场景渲染过后,移出场景显存占用仍然存在。为了减少不必要的资源占用,需要释放资源。 在移出模型后,需要释放模型占用的资源 // 从场景中移出數据不再渲染 不在占用gltf.scene需要的GPU资源占用 model.remove(gltf.sc...

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

threejs

使用Blender导出glb格式文件

使用Blender导出glb格式文件
web3d项目开发中,再渲染gltf文件时,为了减少文件的大小,一般选择glb,然后再使用zip进行压缩。以节省带宽. 打开Blender选择文件找到导出选择gltf点击. 选择.glb 然后点击导出就可以了。 导出后再压缩原本10M大小的文件变成了3.3M. threej...

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

threejs

threejs实现4棱锥效果 学习笔记

threejs实现4棱锥效果 学习笔记
版本 0.123.0,使用0.143版本时会报computeFlatVertexNormals方法不存在 效果 演示地址 threejs实现4棱锥效果 延伸 threejs 在3d地图上标注四棱锥效果 项目代码 var scene = new THREE.Scene() var...

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

threejs

threejs 渲染河北地图轮廓

threejs 渲染河北地图轮廓
通过Box3的学习使用,我们很快就可以找到地图的中心点,通过controls.target.set来将中心点设置为地图的中心点,达到地图在中心的效果。 <!--渲染河北地图--> <template> <div class="home...

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

threejs

threejs 使用Box3获取网格模型的尺寸以及中心点

threejs 使用Box3获取网格模型的尺寸以及中心点
threejs 在渲染模型的时候需要调整相机的位置以更好的显示模型,这时候可能会需要模型的中心点,以及模型的尺寸, 使用Box3可以获取到网格模型的尺寸以及中心点 // 地图mapGroup的包围盒计算 var box3 = new THREE.Box3();//创建一个包围盒 ...

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