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()

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！