Three.js 光柱效果、树、草 两个矩形交叉

Question

你如果想在 Three.js 创建一个光柱效果，希望通过很简单的方式在场景中模拟一棵树或一棵草，可以通过 Three.js 的矩形平面几何体 PlaneGeometry 创建一个网格模型，然后把一个背景透明的 .png 格式图片作为矩形网格模型的纹理贴图。

// 创建一个矩形几何体
var plane = new THREE.PlaneGeometry(50,200)
var material = new THREE.MeshPhongMaterial({
  //设置矩形网格模型的纹理贴图(光柱特效、树或草等你想要表达效果对应背景透明纹理贴图)
    map: textureLoader.load('light.png'),
    // 双面显示
    side: THREE.DoubleSide,
    // 开启透明效果，否则颜色贴图map的透明不起作用
    transparent: true,
});
var mesh = new THREE.Mesh(plane, material);

为了增强立体效果，可以创建两个矩形网格模型然后90度交叉即可

// 矩形网格1
var mesh1 = new THREE.Mesh(plane, material);
// 克隆网格模型mesh1，并旋转90度
var mesh2 = mesh1.clone().rotateY(Math.PI/2)
var groupMesh= new THREE.Group()
groupMesh.add(mesh1,mesh2)