如何在 three.js 中创建海浪？

Question

我在 three.js 中制造海浪，但是当我在 web 浏览器上运行它时，它只显示白屏。

我用来创建海浪的代码是：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>My first three.js app</title>
        <style>
            body { margin: 0; }
        </style>
    </head>
    <body>
        
        <script src="https://cdn.jsdelivr.net/npm/three@0.143/build/three.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/three@0.143/examples/js/controls/OrbitControls.js"></script> 
        <script src="https://cdn.jsdelivr.net/npm/three@0.143/examples/js/objects/Water.js"></script>   
        <script>


            const scene = new THREE.Scene();
            const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
            camera.position.set( 0, 0, 50 );
            camera.lookAt( 0, 0, 0 );
            

            const renderer = new THREE.WebGLRenderer();
            renderer.setSize( window.innerWidth, window.innerHeight );
            document.body.appendChild( renderer.domElement );

            
            const WaterGeometry = new THREE.PlaneGeometry( 45, 45 );
            const texture = new THREE.TextureLoader().load( 'https://i.imgur.com/mK9cHLq.jpeg' );
            const material = new THREE.MeshBasicMaterial( { map: texture, side: THREE.DoubleSide } );           
            const controls = new THREE.OrbitControls( camera, renderer.domElement );
            const params = {
                color: '#ffffff',
                scale: 4,
                flowX: 1,
                flowY: 1
            };


                water = new THREE.Water( WaterGeometry, material, {
                    color: params.color,
                    scale: params.scale,
                    flowDirection: new THREE.Vector2( params.flowX, params.flowY ),
                    textureWidth: 1024,
                    textureHeight: 1024
                } );



            controls.update();

            scene.add( water );

            function animate() 
            {
                requestAnimationFrame( animate );

                water.rotation.x += 0.00;
                water.rotation.y += 0.00;
                water.rotation.z += 0.01;

                renderer.render( scene, camera );
            };

            animate();
        </script>
    </body>
</html>

我哪里搞砸了？ 我现在看到的只是慢慢旋转的黑色方块。

我感谢您的所有反馈。 如何修复此错误？

谢谢！

Answer 1

你的进口搞砸了。 像这样尝试：

<script src="https://cdn.jsdelivr.net/npm/three@0.143/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.143/examples/js/controls/OrbitControls.js"></script> 
<script src="https://cdn.jsdelivr.net/npm/three@0.143/examples/js/objects/Water.js"></script>

请记住，切勿从不同的来源和版本导入three.js文件。

如何在 three.js 中创建海浪？

问题描述

1 个解决方案

解决方案1
2 2022-08-12 08:54:44

如何在 three.js 中创建海浪？

问题描述

1 个解决方案

解决方案1 2 2022-08-12 08:54:44

解决方案1
2 2022-08-12 08:54:44