自定义 gltf 模型上的海洋着色器

Posted 2023-03-16

【中文标题】自定义 gltf 模型上的海洋着色器

【英文标题】：Ocean shader on a custom gltf model

【发布时间】：2021-11-25 05:36:38

【问题描述】：

我有一个 3D 模型，我想对其应用海洋着色器。 我想结合“着色器/海洋”和“加载器/gltf”示例场景。 我想在我的自定义 3D 模型上看到海洋着色器，由于我的知识很少，我很抱歉。

            const waterMat = new THREE.MeshStandardMaterial(color: 0xff0000);

                const loader = new GLTFLoader().setPath( 'models/gltf/DamagedHelmet/glTF/' );
                loader.load( 'DamagedHelmet.gltf', function ( gltf ) 

                    gltf.scene.traverse( function ( child ) 

                        if ( child.isMesh ) 

                        waterGeo = child;

                        

                     );

                    water = new Water(
                        waterGeo,
                        
                            textureWidth: 512,
                            textureHeight: 512,
                            waterNormals: new THREE.TextureLoader().load( 'textures/waternormals.jpg', function ( texture ) 

                                texture.wrapS = texture.wrapT = THREE.RepeatWrapping;

                             ),
                            sunDirection: new THREE.Vector3(),
                            sunColor: 0xffffff,
                            waterColor: 0x001e0f,
                            distortionScale: 3.7,
                            fog: scene.fog !== undefined
                        
                    );  

                    water.rotation.x = - Math.PI / 2;

                    scene.add( water );

【参考方案1】：

你必须换水 = new Water(waterGeo,the some code you have) to new Water(waterGeo.geometry,the some code you have)