three.js从入门到精通系列教程050 - 制作波浪图形

最新推荐文章于 2025-03-02 22:58:54 发布

原创最新推荐文章于 2025-03-02 22:58:54 发布 · 683 阅读

10 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #开发语言 #ecmascript #数字孪生 #前端

three.js从入门到精通系列教程专栏收录该内容

52 篇文章

订阅专栏

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>three.js从入门到精通系列教程050 - 制作波浪图形</title>
    <script src="ThreeJS/three.js"></script>
    <script src="ThreeJS/jquery.js"></script>
</head>

<body>
    <center id="myContainer"></center>
    <script>
        //创建渲染器
        var myRenderer = new THREE.WebGLRenderer({ antialias: true });
        myRenderer.setSize(window.innerWidth, window.innerHeight);
        myRenderer.setClearColor('white', 1.0);
        $("#myContainer").append(myRenderer.domElement);
        var myCamera = new THREE.PerspectiveCamera(45,
            window.innerWidth / window.innerHeight, 1, 2000);
        myCamera.position.set(263.89, 266.78, 327.33);
        myCamera.lookAt(new THREE.Vector3(0, 0, 0));
        var myScene = new THREE.Scene();
        myScene.add(new THREE.AmbientLight(0xcccccc, 0.6));
        var myPointLight = new THREE.PointLight(0xffffff);
        myPointLight.position.set(0, 160, 0);
        myScene.add(myPointLight);
        //创建波浪图形(或使用ParametricBufferGeometry)
        var myGeometry = new THREE.ParametricGeometry(function (u, v, target) {
            var r = 50;
            var x = Math.sin(u) * r;
            var z = Math.sin(v / 2) * 2 * r;
            var y = (Math.sin(u * 4 * Math.PI) + Math.cos(v * 2 * Math.PI)) * 2.8;
            target.set(x, y, z).multiplyScalar(5);
        }, 200, 200);
        var myMaterial = new THREE.MeshPhongMaterial({
            color: 0xff3399, side: THREE.DoubleSide
        });
        var myWaveMesh = new THREE.Mesh(myGeometry, myMaterial);
        myWaveMesh.position.y = 130;
        myScene.add(myWaveMesh);
        //渲染波浪图形
        animate();
        function animate() {
            myRenderer.render(myScene, myCamera);
            requestAnimationFrame(animate);
        }
    </script>
</body>

</html>