使用EffectComposer时不会清除画布

时间:2013-01-21 15:25:22

标签: three.js

直接使用WebGLRenderer时,背景将自动清除为白色。但是,使用EffectComposer时,背景将被清除为黑色。

以下是一个示例:http://jsfiddle.net/wereHamster/Lt2DX/。场面显示在白色背景的一个红色立方体。如果您注释掉第41行并取消注释第42行(启用EffectComposer),画布将在黑色背景上显示一个红色立方体。

以下是代码:

# A simple scene with a red cube in the center.
scene = new THREE.Scene

camera = new THREE.PerspectiveCamera 75, 200/200, 0.01, 1000
camera.position.z = 5
scene.add camera

geometry = new THREE.CubeGeometry 1, 1, 1
material = new THREE.MeshBasicMaterial { color: 0xFF0000 }
scene.add (mesh = new THREE.Mesh geometry, material)


# The barebone WebGL renderer.
renderer = new THREE.WebGLRenderer
renderer.setSize 200, 200
$('body').append renderer.domElement


# Composer with two passes, RenderPass and ShaderPass.
composer   = new THREE.EffectComposer renderer

renderPass = new THREE.RenderPass scene, camera
composer.addPass renderPass

shaderPass = new THREE.ShaderPass THREE.CopyShader
shaderPass.renderToScreen = true
composer.addPass shaderPass


# The main animation loop.
animate = ->
    requestAnimationFrame animate

    mesh.rotation.x += 0.01
    mesh.rotation.y += 0.01


    # If we use the composer to render the scene then the
    # background is black instead of white.

    renderer.render scene, camera
    #composer.render 0.1


animate()

1 个答案:

答案 0 :(得分:4)

THREE.RenderPass有其他参数

renderPass = new THREE.RenderPass scene, camera, null, new THREE.Color().setHex( 0xffffff ), 0

此外,renderer默认情况下背景为明白而非白色。你看到的是身体颜色。

小提琴:http://jsfiddle.net/Lt2DX/36/