Three.js精靈模型Sprite模擬樹林效果

精靈模型Sprite模擬樹林效果

本文是Three.js電子書的10.3節

下面通過通過一張背景透明的樹紋理貼圖tree.png作爲精靈模型的紋理貼圖.map模擬一個樹林效果。

精靈源碼

通過循環程序創建足夠多的精靈模型，然後通過javascript隨機函數Math.random()使精靈模型的位置隨機分佈。

如果你想實現更好的樹林效果，也可以使用矩形網格模型Mesh代替精靈模型，主要是場景旋轉的時候，樹的精靈模型平面總是平行於canvas畫布。

/**
 * 精靈創建樹林效果
 */
// 加載樹紋理貼圖
var textureTree = new THREE.TextureLoader().load("tree.png");
// 批量創建表示一個樹的精靈模型
for (let i = 0; i < 100; i++) {
  var spriteMaterial = new THREE.SpriteMaterial({
    map:textureTree,//設置精靈紋理貼圖
  });
  // 創建精靈模型對象
  var sprite = new THREE.Sprite(spriteMaterial);
  scene.add(sprite);
  // 控制精靈大小,
  sprite.scale.set(100, 100, 1); //// 只需要設置x、y兩個分量就可以
  var k1 = Math.random() - 0.5;
  var k2 = Math.random() - 0.5;
  // 設置精靈模型位置，在xoz平面上隨機分佈
  sprite.position.set(1000 * k1, 50, 1000 * k2)
}

把一張草地貼圖作爲一個矩形網格模型的紋理貼圖模擬樹林一片草地的效果，注意對紋理進行陣列，草地貼圖像素寬高較小，矩形平面網格模型區域較大。

/**
 * 創建一個草地地面
 */
var geometry = new THREE.PlaneGeometry(1000, 1000); //矩形平面
// 加載草地紋理貼圖
var texture = new THREE.TextureLoader().load("grass.jpg");
// 設置紋理的重複模式
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
// uv兩個方向紋理重複數量
texture.repeat.set(10, 10);
var material = new THREE.MeshLambertMaterial({
  color: 0x777700,
  // map:texture,
});
var mesh = new THREE.Mesh(geometry, material); //網格模型對象Mesh
scene.add(mesh); //網格模型添加到場景中
mesh.rotateX(-Math.PI/2);