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

【问题标题】：Ocean shader on a custom gltf model自定义 gltf 模型上的海洋着色器
【发布时间】：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 );

【问题讨论】：

标签： three.js shader gltf

【解决方案1】：

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

【讨论】：