Question

我试图将water2.js材料应用到一个我无法解释的长表面上，发生了一种奇怪的不规则现象。当我启动我的应用程序时，水被正确呈现（见截图1）。

玩家向前移动了很多，突然之间水变成了你在截屏2中看到的东西。

我无法解释为什么或如何发生，因为它完全按照我想要的方式开始。以前有人偶然发现了这个吗？如何防止它变成场景背景的这个固体镜像？

DevBrowser： Chrome65
Threejs： r91

示例代码

使用three.js示例中的这三个脚本

<script src="js/objects/Reflector.js"></script>
<script src="js/objects/Refractor.js"></script>
<script src="js/objects/Water2.js"></script>

如下所示：https://threejs.org/examples/webgl_water.html

＆＃13;

var splines = new THREE.CatmullRomCurve3( [
	new THREE.Vector3( -10, 0, 10 ),
	new THREE.Vector3( -5, 5, 5 ),
	new THREE.Vector3( 0, 0, 0 ),
	new THREE.Vector3( 5, -5, 5 ),
	new THREE.Vector3( 10, 0, 10 )
] );

//my curve is generated through waypoints so I inserted the standard curve as a stand in

    
var waterGeo = new THREE.TubeBufferGeometry(splines, 100, 4, 8, false);

var water = new THREE.Water( waterGeo, {
          color: 0xffffff,
          scale: 1,
          flowDirection: new THREE.Vector2( 1, 0 ),
          textureWidth: 1024,
          textureHeight: 1024
      } );

scene.add(water);

＆＃13;

例2
我重新创造了一种类似的效果，在一台相机转动后，水变黑，不再反光
此处的工作示例： http://staging.onewavestudios.com/waterexample/

＆＃13;

    //skybox
        var path = "assets/skybox/";
        var format = ".jpg";
        var skymaterials = [
        path + "ft" + format,
        path + "bk" + format,
        path + "up" + format,
        path + "dn" + format,
        path + "rt" + format,
        path + "lf" + format
        ];
        var skybox = new THREE.CubeTextureLoader().load(skymaterials);
        skybox.format = THREE.RGBFormat;

    //scene setup
        var scene = new THREE.Scene();
        scene.background = skybox;
    
    //camera
    var camera = new THREE.PerspectiveCamera(45,window.innerWidth / window.innerHeight,0.1,1000);
        camera.position.set( 20, 0, 25 );
		camera.lookAt( scene.position );
        scene.add(camera);

    //lights
        var ambientLight = new THREE.AmbientLight( 0xbbffff, 0.5 );
        scene.add(ambientLight);

    //objects
        //box1 - representation for the arms in my scene
        var geometry = new THREE.BoxGeometry( 10, 5, 5 );
        var material = new THREE.MeshLambertMaterial( { color: 0xbada55, envMap: skybox, reflectivity: 0.1 } );
        material.shadowSide = THREE.DoubleSide;
        material.side = THREE.DoubleSide;
		var cube = new THREE.Mesh( geometry, material );
        cube.position.y += 8;
        cube.position.z += 5;
		scene.add( cube );

        var splines = new THREE.CatmullRomCurve3([
            new THREE.Vector3(-10, 0, 10),
            new THREE.Vector3(-5, 5, 5),
            new THREE.Vector3(0, 0, 0),
            new THREE.Vector3(5, -5, 5),
            new THREE.Vector3(10, 0, 10)
        ]);
        //my original curve is generated through waypoints so I inserted the standard curve as a stand in

        //waterbody
        var waterGeo = new THREE.TubeBufferGeometry(splines, 100, 4, 8, false);
        var water = new THREE.Water(waterGeo, {
            color: 0xffffff,
            scale: 1,
            flowDirection: new THREE.Vector2(1, 0),
            textureWidth: 1024,
            textureHeight: 1024
        });
        scene.add(water);

        //waterslide - representation
        var material2 = new THREE.MeshLambertMaterial( { color: 0xffffff, envMap: skybox, reflectivity: 0.8 } );
        material2.shadowSide = THREE.DoubleSide;
        material2.side = THREE.DoubleSide;
        var container = new THREE.Mesh( waterGeo, material2 );
        container.position.y -= 5;
		scene.add( container );

    //renderer
        renderer = new THREE.WebGLRenderer();
		renderer.setPixelRatio( window.devicePixelRatio );
		renderer.setSize( window.innerWidth, window.innerHeight );
        document.body.appendChild( renderer.domElement );
        animate();

    //render
        function animate() {
                camera.rotation.z += 0.005;
				requestAnimationFrame( animate );
				render();
			}
			function render() {
				renderer.render( scene, camera );
			}

＆＃13;

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>TubeWater Example</title>

    <style>
        body {
            margin: 0;
        }

        canvas {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/91/three.js"></script>
<script src="https://raw.githubusercontent.com/mrdoob/three.js/master/examples/js/objects/Water2.js"></script>
<script src="https://raw.githubusercontent.com/mrdoob/three.js/master/examples/js/objects/Reflector.js"></script>
<script src="https://raw.githubusercontent.com/mrdoob/three.js/master/examples/js/objects/Refractor.js"></script>
<body>
</body>
</html>

＆＃13;

Answer 1

我要验证@ Mugen87在说什么

THREE.Water旨在与平面几何形状一起使用。对于内部使用的THREE.Reflector和THREE.Refractor也是如此

在将Refractor应用到球形物体上时，我得到了相同/类似的工件。在我的情况下（可能是你的），当场景启动并且相机的视角不必计算折射几何体后面的任何物体时，着色器看起来很好，只要我移动相机的同时它背后有其他几何形状，它重复几何形状的黑色轮廓，并保留在场景的其余部分的视线范围内。所以我想的是原因是当计算折射的光线，如果光线从视线撞击几何体的背面，则会发生这种伪影。我想指出我自己并不是专家和学习三个人，所以由于我可能无法完全传达我的输入，我已经使用你的方案创建了一个插图。 / p>

<强> 原因： Possible cause of artifact

因此，针对您的情况的可能解决方案可能如下：

可能的解决方案： Possible solution illustration

所以通过基本上创建一个＆＃34;半＆＃34;着色器的平面只需要计算1个侧面就可以达到理想的效果，但是要注意多少曲线放在带有水的几何形状上。避免这些背面可见。

另请注意，从技术上讲，您不会在此处创建动态模拟，因此几何图形不必从根本上正确＆＃34;正确＆＃34;。因此，通过执行以下操作，您可以减少渲染器计算不必要的内容的需要。所以你可以让你的水几何形状突出你的幻灯片的墙壁:(不知道紫色几何形状是什么意思，但看起来像一张幻灯片，大声笑）

Possible Geometry Setup

threejs water2改变反射状态

1 个答案: