Question

使用three.js我想创造一个明亮的光线照射到球体中心的效果。

使用THREE.lensflare（）我得到一个很好的光，但是一旦我把它放在一个球体中，它就会消失。我为renderOrder尝试了不同的值，但无济于事。

我的JSFiddle在这里：http://jsfiddle.net/blwoodley/ds8ydm4t/8/

您可以通过简单地注释掉我将球体网格添加到场景的线条来确认镜头光晕是否正常工作（第33行）。

R71。

var SCREEN_WIDTH = window.innerWidth - 100;
var SCREEN_HEIGHT = window.innerHeight - 100;

var camera, scene, _planeMesh;
var canvasRenderer, webglRenderer;

var container, mesh, geometry, plane;

container = document.createElement('div');
document.body.appendChild(container);
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 1, 100000);
camera.position.set( 380, 80, 100 );
var spotLight = new THREE.SpotLight( 0xffffff );
spotLight.position.set( 180, 160, 0 );
var grid = new THREE.Mesh( new THREE.PlaneGeometry( 10000, 10000 ),
                                   new THREE.MeshBasicMaterial( { color: 0xaaaaaa } ) );
var grid = new THREE.GridHelper(400, 40);
//grid.rotation.x = -1.57;
grid.position.y = -20;
scene.add(grid);       

scene.add(spotLight);

camera.lookAt( scene.position );
var transparentmaterial = new THREE.MeshLambertMaterial( {
    color: 0xaaaa00,
    shading: THREE.SmoothShading,
    opacity: .5, transparent: true } );

var sphereGeo = new THREE.SphereGeometry( 32.0, 32, 16 );
var mesh = new THREE.Mesh( sphereGeo,transparentmaterial);
scene.add(mesh);

addLight(scene,0.55, 0.9, 0.5,0,0,0);

// RENDERER
webglRenderer = new THREE.WebGLRenderer({antialias: true, alpha: true });
webglRenderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
webglRenderer.domElement.style.position = "relative";
webglRenderer.setClearColor( 0x000000 );

container.appendChild(webglRenderer.domElement);
animate();

function addLight(scene, h, s, l, x, y, z ) {
        THREE.ImageUtils.crossOrigin = '';
        var textureFlare0 = THREE.ImageUtils.loadTexture('https://s3.amazonaws.com/jsfiddle1234/lensflare0.png');

    var light = new THREE.PointLight( 0xffffff, 1.5, 10 );
    light.color.setHSL( h, s, l );
    light.position.set( x, y, z );
    scene.add( light );
    light = light;

    var flareColor = new THREE.Color( 0xffffff );
    flareColor.setHSL( h, s, l + 0.5 );

    var lensFlare = new THREE.LensFlare( textureFlare0, 200, 0.0, THREE.AdditiveBlending, flareColor );

    lensFlare.position.copy( light.position );
    var lensFlare = lensFlare;

    scene.add( lensFlare );

}   


function animate() {
    requestAnimationFrame(animate);
    render();
}

function render() {
    webglRenderer.render(scene, camera);
}

Answer 1

镜头光晕最后渲染 - 在透明物体之后。

问题是由于深度测试，镜头光晕未呈现。

问题的一个解决方案是在渲染透明球体时防止深度写入：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 150 60">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0" stop-color="#FFE89C" stop-opacity="1"/>
      <stop offset="0.2" stop-color="#FFE192" stop-opacity="1"/>
      <stop offset="0.4" stop-color="#ffd47a" stop-opacity="1"/>
      <stop offset="0.6" stop-color="#ffc967" stop-opacity="1"/>
      <stop offset="0.8" stop-color="#febd52" stop-opacity="1"/>
      <stop offset="1" stop-color="#fdba4c" stop-opacity="1"/>
    </linearGradient>
  </defs>

  <text fill="url(#grad1)" x="75" y="50" text-anchor="middle"font-size="40">50</text>
</svg>

更新小提琴：http://jsfiddle.net/ds8ydm4t/10/

另一个解决方案是有两个场景和两个渲染过程 - 在第一次传递后清除深度缓冲区。（How to change the zOrder of object with Threejs?）

three.js r.71

three.js：透明物体内的lensflare

1 个答案: