通过批量创建表示一个树的精灵模型，来达到树林的效果。

演示效果

树林效果

代码

var that = this
/**
 * 创建场景对象Scene
 */
var scene = new THREE.Scene();
/**
 * 精灵创建树林效果
 */
  // 加载树纹理贴图
var textureTree = new THREE.TextureLoader().load("tree/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 point = new THREE.PointLight(0xffffff);
point.position.set(400, 200, 300); //点光源位置
scene.add(point); //点光源添加到场景中
//环境光
var ambient = new THREE.AmbientLight(0x888888);
scene.add(ambient);
/**
 * 透视投影相机设置
 */
var width = window.innerWidth; //窗口宽度
var height = window.innerHeight; //窗口高度
/**透视投影相机对象*/
var camera = new THREE.PerspectiveCamera(60, width / height, 1, 1000);
camera.position.set(200, 300, 200); //树上面观察
// camera.position.set(200, 30, 200); //树下面观察
camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
/**
 * 创建渲染器对象
 */
var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height); //设置渲染区域尺寸
renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色

// 渲染函数
function render() {
  renderer.render(scene, camera); //执行渲染操作
  requestAnimationFrame(render);//请求再次执行渲染函数render，渲染下一帧
}

render();
//创建控件对象  相机对象camera作为参数   控件可以监听鼠标的变化，改变相机对象的属性
var controls = new OrbitControls(camera, renderer.domElement);
that.$refs.canvasGLTF.appendChild(renderer.domElement)