线条波动示例

更多有趣示例 尽在 知屋安砖社区

示例

HTML

<canvas id="app-main"></canvas>
 

<script type="x-shader/x-vertex" id="vertexshader">

</script>
<script type="x-shader/x-fragment" id="fragmentshader">

</script>





<!-- Fork me on GitHub ribbon -->
<a href="https://github.com/xizon/uix-kit" target="_blank"><img style="position: absolute; top: 0; right: 0; border: 0; z-index: 9999" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>

CSS

		body {
			margin: 0;
		}

JS

( function( $ ) {
"use strict";
  
    $( function() {
		
        var sceneSubjects = []; // Import objects and animations dynamically

		var MainStage = function() {
			

			var $window                   = $( window ),
				windowWidth               = window.innerWidth,
				windowHeight              = window.innerHeight,
				rendererCanvasID          = 'app-main';


			// Generate one plane geometries mesh to scene
			//-------------------------------------	
			var camera,
				scene,
                controls,
				light,
				renderer,
                material;

			
			// shaders
			var vertex       = document.getElementById( 'vertexshader' ).textContent,
				fragment     = document.getElementById( 'fragmentshader' ).textContent;
            

            var clock = new THREE.Clock(), time = 0;
            
            
            var simplex = new SimplexNoise();
            var conf = {
                    tubeRadius: 3,
                    resY: 10,
                    resX: 4,
                    noiseCoef: 50,
                    timeCoef: 50,
                    mouseCoef: 50,
                    heightCoef: 20,
                    lightIntensity: 1
                };
            var objects = [], noiseConf = {};
            

			function init() {
		
				
				//=================
				//camera
				camera = new THREE.PerspectiveCamera( 60, windowWidth / windowHeight, 1, 10000 );
				camera.position.set( 0, 0, 100 );
				camera.lookAt(new THREE.Vector3(0, 0, 0));

                
                
				//=================
				//Scene
				scene = new THREE.Scene();

				
				//=================
				//Lights
                var plight = new THREE.PointLight(0xffffff, 0.5, 1000);
                plight.position.set(0, 0, 0);
                scene.add(plight);

                light = new THREE.PointLight(0x1b6cff, 1, 500);
                light.position.set(0, 0, 0);
                scene.add(light);
				


				//=================
				//WebGL Renderer		
				renderer = new THREE.WebGLRenderer( { 
										canvas   : document.getElementById( rendererCanvasID ), //canvas
										alpha    : true, 
										antialias: true 
									} );
				renderer.setSize( windowWidth, windowHeight );
				renderer.shadowMap = true;
				renderer.shadowMapSoft = true;
        
			
			

				//controls
				controls = new THREE.OrbitControls( camera, renderer.domElement );
				controls.autoRotate = false;
				controls.autoRotateSpeed = 0.5;
				controls.rotateSpeed = 0.5;
				controls.zoomSpeed = 1.2;
				controls.panSpeed = 0.8;
				controls.enableZoom = false;
				controls.target.set(0, 0, 0 );
				controls.update();			
                

				//=================
                //--- initialize objects
                updateNoise();
                var nx = Math.round(windowWidth / conf.resX) + 1;
                var ny = Math.round(windowHeight / conf.resY) + 1;           
            
                for (var j = 0; j < ny; j++) {
                    
                    var x, y, l, noise;
                    x        = - windowWidth / 2;
                    y        = -windowHeight / 2 + j * conf.resY;
                    l        = windowWidth;
                    noise    = noiseConf;
                    

                    var segments = nx;
                    var radius   = conf.tubeRadius;
                    var color    = 0x24f59e; 
                    var radialSegments = 8;
                    var curve = new CustomCurve(x, y, l, noise);
                    
                    var geometry = new THREE.TubeBufferGeometry(curve, segments, radius, radialSegments, false);
                    var material = new THREE.MeshStandardMaterial({
                        color: color,
                        metalness: 1
                    });
                    var tube = new THREE.Mesh(geometry, material); 
                    
                    //set attributes to this object
                    tube.curve = curve;
                    tube.segments = segments;
                    tube.radius = radius;
                    tube.radialSegments = radialSegments;
                    tube.frames = {
                                        tangents: tube.geometry.tangents, 
                                        normals: tube.geometry.normals, 
                                        binormals: tube.geometry.binormals
                                    };
                    tube.pArray = tube.geometry.attributes.position.array;
                    tube.nArray = tube.geometry.attributes.normal.array;
                    tube.P = new THREE.Vector3();
                    tube.normal = new THREE.Vector3();         
                    
                    

                    //---
                    console.log( tube );
                    objects.push(tube);
                    scene.add(tube);
                }
                
                
            
                
				//=================
				// Fires when the window changes
				window.addEventListener( 'resize', onWindowResize, false );

			}

            
			function render() {
	
				requestAnimationFrame( render );

				//To set a background color.
				renderer.setClearColor( 0x000000 );	
                
                var delta = clock.getDelta();
                
                time += clock.getDelta();
//                camera.position.x = Math.sin(time * .1) * 150;
//                camera.position.z = Math.cos(time * .1) * 150;
//                
                
                //push objects
                /*
                @Usage: 

                    function CustomObj( scene ) {

                        var elements = new THREE...;
                        scene.add( elements );

                        this.update = function( time ) {
                            elements.rotation.y = time*0.003;
                        }
                    }       

                    sceneSubjects.push( new CustomObj( MainStage.getScene() ) );  
                */
                for( var i = 0; i < sceneSubjects.length; i++ ) {
                    sceneSubjects[i].update( clock.getElapsedTime()*1 );  
                }
        	
               
				//Animate objects
                updateNoise();
                for (var m = 0; m < objects.length; m++) {
                    var $obj = objects[m];
        
                    //update segment
                    for (var i = 0; i <= $obj.segments; i++) {
                        $obj.P = $obj.curve.getPointAt(i / $obj.segments, $obj.P);
                       
                        var N = $obj.frames.normals[i];
                        var B = $obj.frames.binormals[i];

                        for (var j = 0; j <= $obj.radialSegments; j++) {
                            var v = (j / $obj.radialSegments) * Math.PI * 2;
                            var sin = Math.sin(v);
                            var cos = -Math.cos(v);
                            $obj.normal.x = cos * N.x + sin * B.x;
                            $obj.normal.y = cos * N.y + sin * B.y;
                            $obj.normal.z = cos * N.z + sin * B.z;
                            $obj.normal.normalize();

                            var index = (i * ($obj.radialSegments + 1) + j) * 3;
                            var moveSpeed = Math.sin(time * .1) * 150;

                            $obj.nArray[index] = $obj.normal.x + moveSpeed;
                            $obj.nArray[index + 1] = $obj.normal.y + moveSpeed;
                            $obj.nArray[index + 2] = $obj.normal.z + moveSpeed;
                            $obj.pArray[index] = $obj.P.x + $obj.radius * $obj.normal.x;
                            $obj.pArray[index + 1] = $obj.P.y + $obj.radius * $obj.normal.y;
                            $obj.pArray[index + 2] = $obj.P.z + $obj.radius * $obj.normal.z;

                        }
                    }

                    $obj.geometry.attributes.position.needsUpdate = true;
                    $obj.geometry.attributes.normal.needsUpdate = true; 
                    
                    
                }  
                
                
                
				//update camera and controls
				controls.update(); 
                
            
                //render the scene to display our scene through the camera's eye.
				renderer.render( scene, camera );


			}

           
			function onWindowResize() {
				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();
				renderer.setSize( window.innerWidth, window.innerHeight );
			}      
            //------
            function updateNoise() {
                noiseConf.coef = conf.noiseCoef * 0.00012;
                noiseConf.height = conf.heightCoef;
                noiseConf.time = Date.now() * conf.timeCoef * 0.00002;
            }
            
            //------
            function CustomCurve(x, y, l, noise) {
              THREE.Curve.call(this);
              this.x = x;
              this.y = y;
              this.l = l;
              this.noise = noise;
              this.yn = this.y * this.noise.coef;
            }

            CustomCurve.prototype = Object.create(THREE.Curve.prototype);
            CustomCurve.prototype.constructor = CustomCurve;

            CustomCurve.prototype.getPoint = function(t) {
              var x = this.x + t * this.l;
              var xn = x * this.noise.coef;
              var noise1 = simplex.noise2D(
                xn + this.noise.time + this.noise.mouseX / 2,
                this.yn - this.noise.time + this.noise.mouseY / 2
              );
              var noise2 = simplex.noise2D(this.yn + this.noise.time, xn - this.noise.time);
              var z = noise2 * this.noise.height;
              var y = this.y + noise1 * this.noise.height;
              return new THREE.Vector3(x, y, z);
            }; 
            
      
            
            
			// 
			//-------------------------------------	
			return {
				init                : init,
				render              : render,
				getRendererCanvasID : function () { return rendererCanvasID; },
				getScene            : function () { return scene; },
				getCamera           : function () { return camera; } 
			};


		}();
		// 
		MainStage.init();
		MainStage.render()
    } );  
} ) ( jQuery );