THREE.js代码备份——webgl - geometry - dynamic(模拟海浪，通过时间（毫秒）来控制平面点的运动模拟海浪，鼠标控制写在另外的js中)...

最新推荐文章于 2023-02-11 22:35:43 发布

baiwenghuai8165

最新推荐文章于 2023-02-11 22:35:43 发布

阅读量264

点赞数

原文链接：http://www.cnblogs.com/ForRickHuan/p/5750629.html

版权

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>three.js webgl - geometry - dynamic</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style>
        body {
            color: #61443e;
            font-family:Monospace;
            font-size:13px;
            text-align:center;

            background-color: #aaccff;
            margin: 0px;
            overflow: hidden;
        }

        #info {
            color: #ffffff;
            position: absolute;
            top: 0px; width: 100%;
            padding: 5px;
        }

        a {

            color: yellow;
        }

        #oldie {
            background:rgb(0,0,50) !important;
            color:#fff !important;
        }

    </style>
</head>
<body>

<div id="container"></div>
<div id="info"><a href="http://threejs.org" target="_blank">three.js</a> - dynamic geometry demo - webgl<br />(left click: forward, right click: backward)</div>

<script src="../build/three.js"></script>

<script src="js/controls/FirstPersonControls.js"></script>

<script src="js/Detector.js"></script>
<script src="js/libs/stats.min.js"></script>

<script>

    if ( ! Detector.webgl ) {

        Detector.addGetWebGLMessage();
        document.getElementById( 'container' ).innerHTML = "";

    }

    var container, stats;

    var camera, controls, scene, renderer;

    var mesh, texture, geometry, material;

    var worldWidth = 128, worldDepth = 128,
            worldHalfWidth = worldWidth / 2, worldHalfDepth = worldDepth / 2;

    var clock = new THREE.Clock();

    init();
    animate();

    function init() {

        container = document.getElementById( 'container' );

        camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 20000 );
        camera.position.y = 200;

        controls = new THREE.FirstPersonControls( camera );

        controls.movementSpeed = 500;
        controls.lookSpeed = 0.1;

        scene = new THREE.Scene();
        scene.fog = new THREE.FogExp2( 0xaaccff, 0.0007 );

        geometry = new THREE.PlaneGeometry( 20000, 20000, worldWidth - 1, worldDepth - 1 );
        geometry.rotateX( - Math.PI / 2 );

        for ( var i = 0, l = geometry.vertices.length; i < l; i ++ ) {

            geometry.vertices[ i ].y = 35 * Math.sin( i / 2 );

        }

        var texture = new THREE.TextureLoader().load( "textures/water.jpg" );
        texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
        texture.repeat.set( 7, 7 );   //7x7张纹理图拼凑

        material = new THREE.MeshBasicMaterial( { color: 0x006699, map: texture } );

        mesh = new THREE.Mesh( geometry, material );
        scene.add( mesh );

        renderer = new THREE.WebGLRenderer();
        renderer.setClearColor( 0xaaccff );
        renderer.setPixelRatio( window.devicePixelRatio );
        renderer.setSize( window.innerWidth, window.innerHeight );

        container.innerHTML = "";

        container.appendChild( renderer.domElement );

        stats = new Stats();
        container.appendChild( stats.dom );

        //

        window.addEventListener( 'resize', onWindowResize, false );

    }

    function onWindowResize() {

        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();

        renderer.setSize( window.innerWidth, window.innerHeight );

        controls.handleResize();

    }

    //

    function animate() {

        requestAnimationFrame( animate );

        render();
        stats.update();

    }

    function render() {

        var delta = clock.getDelta(),   //所消耗的时间，即当前时间与开始时间之差，单位为毫秒
                time = clock.getElapsedTime() * 10;

        for ( var i = 0, l = geometry.vertices.length; i < l; i ++ ) {

            geometry.vertices[ i ].y = 35 * Math.sin( i / 5 + ( time + i ) / 7 );

        }

        mesh.geometry.verticesNeedUpdate = true;

          controls.update( delta );  //鼠标控制事件单独写了一个js，一样需要addEventListener
        renderer.render( scene, camera );

    }

</script>

</body>
</html>

转载于:https://www.cnblogs.com/ForRickHuan/p/5750629.html

baiwenghuai8165

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
THREE.js代码备份——webgl - geometry - dynamic(模拟海浪，通过时间（毫秒）来控制平面点的运动模拟海浪，鼠标控制写在另外的js中)...

HTML:<!DOCTYPE html><html lang="en"><head> <title>three.js webgl - geometry - dynamic</title> <meta charset="utf-8"> <meta name="view...
复制链接

扫一扫