文章/答案/技术大牛

发布

社区首页 >问答首页 >三water2改变反射状态

问三water2改变反射状态
EN

Stack Overflow用户

提问于 2018-04-20 15:53:53

回答 1查看 1.2K关注 0票数 0

有一个奇怪的不规律发生在我试图实现水2.js材料在一个长的表面，我无法解释。当我启动我的应用程序，水呈现正确(见屏幕截图1)。

->water showing correctly

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

->water not showing correctly

我无法解释为什么或如何发生，因为它的开始，完全按照我的意愿。以前有人偶然发现过这个吗？我怎样才能阻止它变成我的场景背景的坚实镜子呢？

DevBrowser：Chrome65

Threej：r91

示例代码

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

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

如图所示：water.html

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

Example2

我重新创造了一个类似的效果，在一个相机转动后，水变黑了，不会再反射了。

工作示例： http://staging.onewavestudios.com/waterexample/

    //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 );
			}

<!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>

three.js

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-04-22 05:10:45

我要验证@Mugen87的意思

THREE.Water用于平面几何图形。对于内部使用的THREE.Reflector和THREE.Refractor也是如此

在将折射器应用到球面对象上时，我得到了相同的/类似的工件。在我的情况下(可能也是你的)，当场景开始时，相机的视角不需要计算折射几何背后的任何物体，阴影看起来就很好，只要我移动相机，当它后面有其他几何图形的时候，它就会重复几何图形的黑色轮廓，并在场景的其余部分保持在这条视线中。所以我想的原因是，当光线计算折射时，如果光线从视线击中几何图形的背面，那么这个伪影就会发生。我想指出的是，我自己并不是专家和学习三人，因此，由于可能的机会，我还没有传达我的意见，理想情况下，我已经创建了一个例子，使用您的场景。

原因： 人工制品的可能原因

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

可能的解决方案： 可能的解决方案说明

因此，从本质上说，创建一个“半”平坦的脸，只需计算一个侧面，你就可以达到你想要的效果，但是要注意你在几何图形上放置了多少“水”，以避免那些背面可见。

另外，请记住，在技术上，您不是在这里创建动态模拟，所以几何不一定要从根本上“正确”。因此，通过这样做，您减少了渲染器计算一些不需要的东西的需求。所以你可以让你的水几何图形像这样突出你的滑梯的墙壁：(不知道紫色几何图形是什么意思，但在我看来像是幻灯片)

可能的几何设置

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/49945509

复制

相似问题

问三water2改变反射状态
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问三water2改变反射状态EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问三water2改变反射状态
EN