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. 函数式语言（functional language）定义、函数式语言的种类以及为什么函数式语言会流行起来的学习笔记
			
    一.什么是函数式语言?       函数式语言一类程序设计语言,是一种非冯·诺伊曼式的程序设计语言.函数式语言主要成分是原始函数.定义函数和函数型.这种语言具有较强的组织数据结构的能力,可以把某一数据 ...
    
			
    2. 
						
  2. @ResponseBody 返回json字符串的核心类是org.springframework.http.converter.json.MappingJacksonHttpMessageConverter，它使用了Jackson 这个开源的第三方类库。主要是以下两个jar包：jackson-core-asl-1.6.4.jar；jackson-mapper-asl-1.6.4.jar
			
    @ResponseBody 返回json字符串的核心类是org.springframework.http.converter.json.MappingJacksonHttpMessageConvert ...
    
			
    3. 
						
  3. 问答：怎样规划CSS 中 的命名方式 怎样看待 CSS 中 BEM 的命名方式？
			
    好多盆友 非常纠结 css命名规则 怎么弄,还没起步就被绊住了.那么今天蝈蝈就针对这个问题来讨论一下 没什么技术 含量.但却对效率开发至关重要的 "问题". 下文是一些知乎大神的个 ...
    
			
    4. 
						
  4. JAVA 并发编程-线程池（七）
			
    线程池的作用: 线程池作用就是限制系统中运行线程的数量. 依据系统的环境情况.能够自己主动或手动设置线程数量,达到运行的最佳效果:少了浪费了系统资源,多了造成系统拥挤效率不高.用线程池控制线程数量,其 ...
    
			
    5. 
						
  5. [Vue] Setup custom keyCode
			
    Vue provide some shortcut methods: @mousemove.stop is comparable to e.stopPropogation() @mousemove.p ...
    
			
    6. 
						
  6. VB的程序如何破解
			
    VB的程序,不会告诉你这个VB写的,但是从界面来看就很像VB,一般是单文件的EXE,然后软件还比较小(早期的傻瓜式软件写的东西)   比如说我们想要知道这个"手动采集"按钮干了什么 ...
    
			
    7. 
						
  7. unity3d-23种设计模式全解析
			
    http://www.jianshu.com/nb/4161593 2016.08.03 09:26 字数 1203 阅读 584评论 0喜欢 14 希望大家能共同学习,交流 谢谢支持zero(QQ: ...
    
			
    8. 
						
  8. Solr基础教程之solrconfig.xml（三）
			
    前面介绍过schema.xml的一些配置信息,本章介绍solrconfig.xml的配置,以及怎样安装smartcn分词器和IK分词器,并介绍主要的查询语法. 1. solr配置solrconfig. ...
    
			
    9. 
						
  9. 字节数组byte[]和整型,浮点型数据的转换——Java代码
			
    近期在写C++ socket和java socket之间的通信程序,涉及到整数浮点数的传输.须要从字节数组还原数据,查了一些资料.总结例如以下 1.       整数和浮点数的机器表示 在机器内部.不 ...
    
			
    10. 
						
  10. apt --fix-broken install
			
    1 自动修复安装出现broken的package 但是,如果还是失败的话,就需要手动进行干预了.
    
			
    11.