Three.js---精灵模型、粒子系统、几何体对象、曲线、三维建模、文字

最新推荐文章于 2024-08-06 17:31:38 发布

宝藏男孩们的锦鲤搬砖工

最新推荐文章于 2024-08-06 17:31:38 发布

阅读量767

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_37542119/article/details/108577761

版权

本文介绍了Three.js中的精灵模型和粒子系统，详细讲解了如何创建和应用精灵，以及如何实现粒子系统的动态效果。此外，还探讨了几何体对象、曲线、三维建模技术，包括CurvePath、TubeGeometry、LatheGeometry、ShapeGeometry和ExtrudeGeometry等，并展示了如何利用这些技术创建复杂的形状和文字渲染。

摘要由CSDN通过智能技术生成

精灵模型、粒子系统

精灵模型：本质可以当作是三维场景中一个模型的标签，标签上可以显示一个写模型的信息。
和网格对象一样，需要创建材质对象，但不需要创建精灵模型对象。本质上精灵模型对象内部封装了一个平面矩形几何体PlaneGeometry，这个矩形平面始终平行于Canvas画布。

ps:颜色贴图map最好通过函数的形式引入。

    function getTexture() {
   
    	return new THREE.TextureLoader().load('sprite.png');
    //return texture;
    }    
   //创建精灵材质对象
    var spriteMaterial = new THREE.SpriteMaterial({
   
        rotation:Math.PI/4,
    	color: 0xff00f0,
    	map: getTexture()
    })    // 创建精灵模型对象，不需要几何体geometry参数    
    var sprite = new THREE.Sprite(spriteMaterial);
    scene.add(sprite);    // 控制精灵大小，比如可视化中精灵大小表征数据大小    
    sprite.scale.set(10, 10, 1);  只需要设置x、y两个分量就可以

粒子系统：本质是大量精灵模型对象的集合。 比如说森林是树木的集合。
具体粒子系统可以通过外部json文件循环生成，也可以通过其他循环生成随机数的方式得到。
eg1:模拟城市数据

// 加载一个背景透明的圆形贴图，矩形精灵显示为圆形效果
var texture = new THREE.TextureLoader().load("sprite.png");
// 创建组对象，包含所有精灵对象
let group = new THREE.Group();
// 文件加载对象
var loader = new THREE.FileLoader().setResponseType('json');
// 加载PM2.5数据
loader.load('数据.json', function(data) {
   
  //遍历数据
  data.forEach(elem => {
   
    // 精灵材质
    var spriteMaterial = new THREE.SpriteMaterial({
   
      map: texture, //设置精灵纹理贴图
      transparent: true,
      opacity: 0.5,
    });
    // 创建精灵模型对象
    var sprite = new THREE.Sprite(spriteMaterial);
    group.add(sprite);
    // 控制精灵大小   使用PM2.5大小设置精灵模型的大小
    // 注意适当缩放pm2.5大小,以便得到更好的显示效果
    var k = elem.value / 200
    sprite.scale.set(k, k, 1);
    //获得城市坐标设置精灵模型对象的位置
    sprite.position.set(elem.coordinate[0], elem.coordinate[1], 0)
  });
  // 中国城市坐标整体的几何中心不在坐标原点，需要适当的平移
  group.position