three.js 光锥

 

走到后面，发现其实好多效果都是贴图实现的，光锥也不例外，

实现原理是通过两个相互垂直的平面+渐变贴图实现的

 

    let texture = new THREE.TextureLoader().load('./lightray_yellow.jpg'),
        material = new THREE.MeshBasicMaterial({
            map: texture,
            transparent: true,
            depthTest: false,
            side: THREE.DoubleSide,
            blending: THREE.AdditiveBlending
        }),
        geometry = new THREE.PlaneGeometry(10, 50),
        plane1 = new THREE.Mesh(geometry, material)

   //z方向
    let plane2 = plane1.clone()
    scene.add(plane1)

    scene.add(plane2)
    plane1.rotation.x=-Math.PI //将平面立起来
    plane2.rotation.x=-Math.PI  //将平面立起来
    plane1.rotation.y=Math.PI/2 //旋转90°
    plane1.position.set(0,25,0)
    plane2.position.set(0,25,0)


    function animate()
    {
        controls.update();
        renderer.render( scene, camera );
        requestAnimationFrame( animate );


    }
    animate()