三.JS 更新相机会破坏着色器？

Question

我正在从 https://github.com/stemkoski/stemkoski.github.com/blob/master/Three.js/Bubble.html 复制气泡着色器，但代码已过时，并且示例会折射其背后的任何内容：

我的是黑色的。我在 animate() 中收到的警告（以及我相信的问题所在）：

animate() {
    this.controls.update();

    this.renderer.render(this.scene, this.camera);

    this.sphere.visible = false;
    //this.refractSphereCamera.updateCubeMap( this.renderer, this.scene );
    this.refractSphereCamera.update();
    this.sphere.visible = true;

    //this.renderer.render( this.scene, this.camera );
    requestAnimationFrame(this.animate.bind(this));
  }

this.refractSphereCamera.updateCubeMap( this.renderer, this.scene ); 是控制台给我的原始行：

THREE.CubeCamera：.updateCubeMap() 现在是 .update()。

这是实际的着色器/球体：

this.refractSphereCamera = new THREE.CubeCamera( 0.1, 5000, 512 );
    this.scene.add( this.refractSphereCamera );

    var fShader = THREE.FresnelShader;

    var fresnelUniforms =
    {
        "mRefractionRatio": { type: "f", value: 1.02 },
        "mFresnelBias":     { type: "f", value: 0.1 },
        "mFresnelPower":    { type: "f", value: 2.0 },
        "mFresnelScale":    { type: "f", value: 1.0 },
        "tCube":            { type: "t", value: this.refractSphereCamera.renderTarget } //textureCube
    };

    // create custom material for the shader
    var customMaterial = new THREE.ShaderMaterial(
    {
        uniforms:       fresnelUniforms,
        vertexShader:   fShader.vertexShader,
        fragmentShader: fShader.fragmentShader
    }   );

    var sphereGeometry = new THREE.SphereGeometry( 100, 64, 32 );
    this.sphere = new THREE.Mesh( sphereGeometry, customMaterial);
    this.sphere.position.set(0, 50, 100);
    this.scene.add(this.sphere);

    this.refractSphereCamera.position.set(this.sphere.position);

我可以将一个纹理立方体输入到着色器中，它可以工作，但我不仅希望天空盒，而且希望球体后面的所有对象都发生折射。这里有什么问题？

如果我更改为 .update()，一切都会变黑

其他警告是：

THREE.WebGLRenderer.setTextureCube：不要使用立方体渲染目标作为 纹理。请改用他们的 .texture 属性。

Answer 1

尝试将您的.far 增加到 5,001 或 10,000。该示例似乎将天空盒渲染为场景内的立方体，如果您的相机剪辑为 5,000 并且立方体的大小相同，那么很可能它只是被剪辑在您的相机后面。