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>
												


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

    
								
  1. THREE.js代码备份——webgl - scene animation（通过加载json文件来加载动画和模型）
		
    <!DOCTYPE html> <html lang="en"> <head> <title>three.js webgl - sc ...
    
		
    2. 
						
  2. THREE.js代码备份——webgl - custom attributes [lines]（自定义字体显示、控制字图的各个属性）
		
    <!DOCTYPE html> <html lang="en"> <head> <title>three.js webgl - cu ...
    
		
    3. 
						
  3. THREE.js代码备份——webgl - materials - cube refraction [balls](以上下左右前后6张图片构成立体场景、透明球体效果)
		
    <!DOCTYPE html> <html lang="en"> <head> <title>three.js webgl - ma ...
    
		
    4. 
						
  4. THREE.js代码备份——canvas - geometry - earth(球体贴纹理)
		
    <!DOCTYPE html> <html lang="en"> <head> <title>three.js canvas - g ...
    
		
    5. 
						
  5. THREE.js代码备份——线框cube、按键、鼠标控制
		
    <!DOCTYPE html> <html lang="en"> <head> <title>three.js canvas - g ...
    
		
    6. 
						
  6. THREE.js代码备份——canvas - lines - colors(希尔伯特曲线3D、用HSL设置线颜色)
		
    <!DOCTYPE html> <html lang="en"> <head> <title>three.js canvas - l ...
    
		
    7. 
						
  7. THREE.js代码备份——canvas_lines(随机点、画线)
		
    <!DOCTYPE html> <html lang="en"> <head> <title>three.js canvas - l ...
    
		
    8. 
						
  8. THREE.js代码备份——canvas_ascii_effect(以AscII码显示图形)
		
    <!DOCTYPE html> <html lang="en"> <head> <title>three.js - ASCII Ef ...
    
		
    9. 
						
  9. 浏览器控制台js代码与后台不同步
		
    原因:浏览器会缓存js 如果是将js代码直接通过<script>标签插入jsp页面中则不存在这个问题 在加载页面的时候会重新加载js代码 如果直接将js代码以文件的形式引入,那么每次在修改 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. RDLC报表总结
			
    这2天纠结的报表基本上已近完成大部分功能.现在总结一下自己近期的学习成果 首先制作微软RDLC报表由以下三部分构成:1.制作自己的DateSet集合(就是报表的数据集):2.制作自己的报表文件.rdl ...
    
			
    2. 
						
  2. 苹果iOS手机后门的”诊断功能论“不攻自破
			
    7月23日.苹果公司公布公告,题为"iOS:About diagnostic capabilities"("iOS:关于诊断功能").当中声称:iOS offe ...
    
			
    3. 
						
  3. 输入两个整数n 和m，从数列1，2，3.......n 中任意取几个数,  使其和等于m ,要求将当中全部的可能组合列出来
			
    中兴面试题之中的一个.难度系数中. 题目描写叙述例如以下:输入两个整数n 和m,从数列1,2.3.......n 中任意取几个数, 使其和等于m ,要求将当中全部的可能组合列出来. 逻辑分析: 1.比 ...
    
			
    4. 
						
  4. Ubuntu 12.04 LTS 无法进入桌面环境
			
    今天开机后,在登陆的时候,进入了登陆界面(选择用户,输入密码的那个界面),输入正确的密码后屏幕跳转了一下,但是很快又回到了登陆界面.然后我就尝试以guest [访客]的身份登陆,发现进入了桌面系统.  ...
    
			
    5. 
						
  5. NYOJ   330  一个简单的数学题【数学题】
			
    /* 题目大意:求解1/n; 解题思路:写一个输出小数的算法 关键点:怎样处理小数点循环输出 解题人:lingnichong 解题时间:2014-10-18 09:04:22 解题体会:输出小数的算法 ...
    
			
    6. 
						
  6. Intellij IDEA报错：Could not save application settings: java.io.IOException: java.lang.AssertionError: Unexpected content storage modificat
			
    Question: i have a message saying "Could not save application settings: java.io.IOException: ja ...
    
			
    7. 
						
  7. 【Ubuntu】无法挂载磁盘
			
    我的电脑分了三个分区,A,B,C,其中A和B是Windows盘,C是ubuntu系统盘 某日发现A ,B盘没法进入了,在文件管理器中点一下,没有反应.于是右击盘符,点击挂载,跳出错误信息: (划重点) ...
    
			
    8. 
						
  8. javascript设置和获取cookie的方法
			
    设置cookie的方法,和获取cookie的方法例如以下 设置cookie document.cookie="name="+value; //获取cookie当中index是coo ...
    
			
    9. 
						
  9. Linux/Android多点触摸协议【转】
			
    本文转载自: 链接点击打开链接 关于Linux多点触摸协议大家可以参考kernel中的文档:https://www.kernel.org/doc/Documentation/input/multi-t ...
    
			
    10. 
						
  10. JSP页面规格化
			
    http://doc.okbase.net/%E4%BA%BA%E7%94%9F%E9%9A%BE%E5%BE%97%E7%B3%8A%E6%B6%82/archive/123084.html htt ...
    
			
    11.