three.js learning function usage 3

23. Controlling animation through json objects

  1. //SphereGeometry  
  2.                 var sphereGeometry = new THREE.SphereGeometry( 5, 32, 32 );  
  3.                 var material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );  
  4.                 var sphereMesh = new THREE.Mesh( sphereGeometry, material );  
  5.                   
  6.                 //Setup animation  
  7.                 sphereMesh.animation = {  
  8.                     "name"      : "Action",  
  9.                     "fps"       : 25,  
  10.                     "length"    : 2.0,   
  11.                     "hierarchy" : [  
  12.                         {  
  13.                             "parent" : -1, //root  
  14.                             "keys"   : [  
  15.                                 {  
  16.                                     "time":0,  
  17.                                     "pos" :[0,0,0],  
  18.                                     "rot" :[0,0,0],  
  19.                                     "scl" :[1,1,1]  
  20.                                 },  
  21.                                 {  
  22.                                     "time":1.0,  
  23.                                     "pos" :[30,0,0]  
  24.                                 }  
  25.                                 ,  
  26.                                 {  
  27.                                     "time":2.0,  
  28.                                     "pos" :[0,0,0]  
  29.                                 }  
  30.                             ]  
  31.                         }  
  32.                     ]  
  33.                 };  
  34.                 //Defining json objects  
  35.                 ensureLoop( sphereMesh.animation );  
  36.                 //Hold loop function definition assigns the next action to the previous action  
  37.                 THREE.AnimationHandler.add( sphereMesh.animation );  
  38.                 //Add animation listener  
  39.                 var sphereMeshAnimation = new THREE.Animation( sphereMesh, sphereMesh.animation.name )  
  40.                 //Define animated objects  
  41.                 sphereMeshAnimation.play();  
  42.                 //Animation playback  
  43.                 scene.add( sphereMesh );  
Protection function definition

  1. var ensureLoop = function( animation ) {  
  2.   
  3.                 for ( var i = 0; i < animation.hierarchy.length; i ++ ) {  
  4.             
  5.                     var obj = animation.hierarchy[ i ];  
  6.   
  7.                     var first = obj.keys[ 0 ];  
  8.                     var last = obj.keys[ obj.keys.length - 1 ];  
  9.   
  10.                     last.pos = first.pos;  
  11.                     last.rot = first.rot;  
  12.                     last.scl = first.scl;  
  13.   
  14.                 }  
  15.   
  16.             };  
Also called in the render function

var delta = clock.getDelta();

THREE.AnimationHandler.update( delta );


24 flycontrols

  1. controls = new THREE.FlyControls( camera );  
  2.   
  3.                 controls.movementSpeed = 1000;  
  4.                 controls.domElement = container;  
  5.                 controls.rollSpeed = Math.PI / 24;  
  6.                 controls.autoForward = false;  
  7.                 controls.dragToLook = false;  

Twenty five three.js also supports or simulation. It's like a blockhouse


XXVI add fog to the scene

  1. scene = new THREE.Scene();  
  2.                 scene.fog = new THREE.FogExp2( 0xcccccc, 0.002/*The smaller the fog concentration, the rarer it is*/ );  

27 control the scene with mouse

  1. controls = new THREE.OrbitControls( camera );  
  2.                 controls.addEventListener( 'change', render );//Change function as parameter "change" seems to be internal. Change to change1 control will fail  

XXVIII control the lens according to the path
  1. controls = new THREE.PathControls( camera );  
  2.   
  3.                 controls.waypoints = [ [ -500, 0, 0 ], [ 0, 200, 0 ], [ 500, 0, 0 ] ];  
  4.                 //Some points are passed in. The camera will walk in sequence according to the order of points. Go back to the origin and continue walking  
  5.                 controls.duration = 28  
  6.                 //The smaller the camera, the faster it moves  
  7.                 controls.useConstantSpeed = true;  
  8.                 //controls.createDebugPath = true;  
  9.                 //controls.createDebugDummy = true;  
  10.                 controls.lookSpeed = 0.06;//Mouse control lens observation point speed  
  11.                 controls.lookVertical = true;//Allow mouse to control the observation point to move up and down  
  12.                 controls.lookHorizontal = true;//... move left and right  
  13.                 controls.verticalAngleMap = { srcRange: [ 0, 2 * Math.PI ], dstRange: [ 1.1, 3.8 ] };  
  14.                 controls.horizontalAngleMap = { srcRange: [ 0, 2 * Math.PI ], dstRange: [ 0.3, Math.PI - 0.3 ] };  
  15.                 controls.lon = 180;//Seems to affect the speed of mouse control  
  16.   
  17.                 controls.init();  
  18. controls.animation.play();  


In the render function, you need to call controls.update(delta); var delta = clock.getDelta(); var clock = new THREE.Clock();


29. Mouse lock object

  1. controls = new THREE.PointerLockControls( camera );  
  2.                 scene.add( controls.getObject() );  
  3.   
  4.                 ray = new THREE.Raycaster();//To detect the collision between the controls object and the scene object  
  5.                 ray.ray.direction.set( 0, -1, 0 );//Set collision direction  
  6. var objects  = [];                    
  7. objects.push( mesh );  
  8. function animate() {  
  9.   
  10.                 requestAnimationFrame( animate );  
  11.   
  12.                 //  
  13.   
  14.                 controls.isOnObject( false );//First, set no collision to the object  
  15.   
  16.                 ray.ray.origin.copy( controls.getObject().position );  
  17.                 ray.ray.origin.y -= 10;//Are these two getting the initial position?  
  18.   
  19.                 var intersections = ray.intersectObjects( objects );//Collision object pass in parameters  
  20.   
  21.                 if ( intersections.length > 0 ) {  
  22.   
  23.                     var distance = intersections[ 0 ].distance;  
  24.   
  25.                     if ( distance > 0 && distance < 10 ) {  
  26.   
  27.                         controls.isOnObject( true );//It seems that if this is true, the camera will stop, which means it collides with the object  
  28.   
  29.                     }  
  30.   
  31.                 }  
  32.   
  33.                 controls.update( Date.now() - time );//Update the location of the camera by time  
  34.   
  35.                 renderer.render( scene, camera );  
  36.   
  37.                 time = Date.now();  
  38.   
  39.             }  

Thirty dynamic modification matrix method (from misc lookat example)

  1. var geometry = new THREE.CylinderGeometry( 0, 10, 100, 3 );//Any geometry  
  2. geometry.applyMatrix(new THREE.Matrix4().makeRotationFromEuler(new THREE.Euler(-Math.PI/2, Math.PI,0)));  
  3. //euler should return a vector with the origin pointing to the parameter. The first three parameters are x y z in radians, and then they are transferred into the applyMatrix of geometry. The geometry is pointed to the direction of the vector through the rotation method of matrix 4, which is used to initialize the direction of the object  
  4. scene.matrixAutoUpdate = false;//Change to manual matrix modification  
  5. for ( var i = 1, l = scene.children.length; i < l; i ++ ) {  
  6. scene.children[ i ].lookAt( sphere.position );//object.lookat the input vector can make the object rotate  
  7.                 }  
31 use of sound

  1. var Sound = function ( sources, radius, volume ) {  
  2.   
  3.                 var audio = document.createElement( 'audio' );//New audio element  
  4.   
  5.                 for ( var i = 0; i < sources.length; i ++ ) {  
  6.   
  7.                     var source = document.createElement( 'source' );  
  8.                     source.src = sources[ i ];  
  9.   
  10.                     audio.appendChild( source );//Create a new source element and add it to the audio element  
  11.   
  12.                 }  
  13.   
  14.                 this.position = new THREE.Vector3();  
  15.   
  16.                 this.play = function () {  
  17.   
  18.                     audio.play();//play  
  19.                       
  20.                 }  
  21.   
  22.                 this.update = function ( camera ) {  
  23.   
  24.                     var distance = this.position.distanceTo( camera.position );  
  25.   
  26.                     if ( distance <= radius ) {  
  27.   
  28.                         audio.volume = volume * ( 1 - distance / radius );//Use volume to control the volume  
  29.   
  30.                     } else {  
  31.   
  32.                         audio.volume = 0;  
  33.   
  34.                     }  
  35.   
  36.                 }  
  37.   
  38.             }  

XXXII FirstPersonControls.js

  1. controls = new THREE.FirstPersonControls( camera );  
  2.   
  3.                 controls.movementSpeed = 70;  
  4.                 controls.lookSpeed = 0.05;  
  5.                 controls.noFly =false;//What's the use of this  
  6.                 controls.lookVertical = true;//Set whether to allow the camera to move up and down < pre code ﹣ snippet ﹣ id = "323814" snippet ﹣ file ﹣ name = "blog ﹣ 19 ﹣ 10 ﹣ 9537" name="code" class = "JavaScript" > controls.handleResize(); / / used to execute when window size changes  
  7. var delta = clock.getDelta(),  
  8.                     time = clock.getElapsedTime() * 5;  
  9.   
  10.                 controls.update( 0.02 );//The smaller the parameter, the faster the lens moves. What is the setting=  
  11. </pre><br>  
  12. <pre></pre>  
  13. <p></p>  
  14. <p><br>  
  15. </p>  
  16. <p><br>  
  17. </p>  
  18. <pre></pre>  
  19. <p>Thirty-three test geometry Points and faces of</p>  
  20. <p></p>  
  21. <p></p>  
  22. <pre code_snippet_id="323814" snippet_file_name="blog_20140519_11_7192039" name="code" class="javascript">      <script src="js/UVsUtils.js"></script>  
  23. function test(name, geometry) {  
  24. <span style="white-space:pre">              </span>var d = document.createElement('div');  
  25. <span style="white-space:pre">              </span>d.innerHTML = '<br><br>' + name + '<br>';  
  26. <span style="white-space:pre">              </span>d.appendChild(THREE.UVsDebug(geometry));//Passing in the geometry object returns a canvas drawn geometry structure  
  27. <span style="white-space:pre">              </span>document.body.appendChild(d);  
  28. <span style="white-space:pre">          </span>}  
  29. </pre><br>  
  30. <p><br>  
  31. </p>  
  32. <p>Thirty-four webglrederer3 </p>  
  33. <p><span style="white-space:pre"></span><script src="js/renderers/WebGLRenderer3.js"></script><br>  
  34. </p>  
  35. <p><span style="white-space:pre"></span>renderer = new THREE.WebGLRenderer3( { contextAttributes: { antialias: false /*Anti-Aliasing */ } } );</p>  
  36. <p>//Is it better to provide parameter setting properties</p>  
  37. <p><br>  
  38. </p>  
  39. <p>Thirty-five Shader usage</p>  
  40. <p><br>  
  41. </p>  
  42. <pre code_snippet_id="323814" snippet_file_name="blog_20140519_12_2066845" name="code" class="javascript">var uniforms = { texture:  { type: "t", value: clothTexture } };  
  43.                 var vertexShader = document.getElementById( 'vertexShaderDepth' ).textContent;//Set the id value in the script tag. Then getelementbyid  
  44.                 var fragmentShader = document.getElementById( 'fragmentShaderDepth' ).textContent;  
  45.   
  46.                 // cloth mesh  
  47.   
  48.                 object = new THREE.Mesh( clothGeometry, clothMaterial );  
  49.                 object.position.set( 0, 0, 0 );  
  50.                 object.castShadow = true;  
  51.                 object.receiveShadow = true;  
  52.                 scene.add( object );  
  53.   
  54.                 object.customDepthMaterial = new THREE.ShaderMaterial( { uniforms: uniforms, vertexShader: vertexShader, fragmentShader: fragmentShader } );//Add shaders to  
  55. <p><br>  
  56. </p>  
  57. <p><br>  
  58. </p>  
  59. Thirty-six  buffergeometry usage  
  60. <p></p>  
  61. <p>Probably a new one buffergeometry Initialize array first Assigning values to an array   </p>  
  62. <p>Load before running..Faster post load processing</p>  
  63. <p><br>  
  64. </p>  
  65. <p></p>  
  66. <pre code_snippet_id="323814" snippet_file_name="blog_20140519_13_7813703" name="code" class="javascript">var triangles = 160000;  
  67.   
  68.                 var geometry = new THREE.BufferGeometry();  
  69.   
  70.                 geometry.addAttribute( 'index', Uint16Array, triangles * 3, 1);  
  71.                 geometry.addAttribute( 'position', Float32Array, triangles * 3, 3 );  
  72.                 geometry.addAttribute( 'normal', Float32Array, triangles * 3, 3 );  
  73.                 geometry.addAttribute( 'color', Float32Array, triangles * 3, 3 );//Add property should be similar to initialization without value  
  74.   
  75.                 // break geometry into  
  76.                 // chunks of 21,845 triangles (3 unique vertices per triangle)  
  77.                 // for indices to fit into 16 bit integer number  
  78.                 // floor(2^16 / 3) = 21845  
  79.   
  80.                 var chunkSize = 21845;//Overall size?  
  81.   
  82.                 var indices = geometry.attributes.index.array;  
  83.   
  84.                 for ( var i = 0; i < indices.length; i ++ ) {  
  85.   
  86.                     indices[ i ] = i % ( 3 * chunkSize );//Get index array  
  87.   
  88.                 }  
  89.   
  90.                 var positions = geometry.attributes.position.array;  
  91.                 var normals = geometry.attributes.normal.array;  
  92.                 var colors = geometry.attributes.color.array;  
  93.   
  94.                 var color = new THREE.Color();  
  95.   
  96.                 var n = 800, n2 = n/2;  // triangles spread in the cube  
  97.                 var d = 12, d2 = d/2;   // individual triangle size  
  98.   
  99.                 var pA = new THREE.Vector3();  
  100.                 var pB = new THREE.Vector3();  
  101.                 var pC = new THREE.Vector3();  
  102.   
  103.                 var cb = new THREE.Vector3();  
  104.                 var ab = new THREE.Vector3();  
  105.   
  106.                 for ( var i = 0; i < positions.length; i += 9 ) {  
  107.   
  108.                     // positions  
  109.   
  110.                     var x = Math.random() * n - n2;  
  111.                     var y = Math.random() * n - n2;  
  112.                     var z = Math.random() * n - n2;  
  113.   
  114.                     var ax = x + Math.random() * d - d2;  
  115.                     var ay = y + Math.random() * d - d2;  
  116.                     var az = z + Math.random() * d - d2;  
  117.   
  118.                     var bx = x + Math.random() * d - d2;  
  119.                     var by = y + Math.random() * d - d2;  
  120.                     var bz = z + Math.random() * d - d2;  
  121.   
  122.                     var cx = x + Math.random() * d - d2;  
  123.                     var cy = y + Math.random() * d - d2;  
  124.                     var cz = z + Math.random() * d - d2;  
  125.   
  126.                     positions[ i ]     = ax;  
  127.                     positions[ i + 1 ] = ay;  
  128.                     positions[ i + 2 ] = az;  
  129.   
  130.                     positions[ i + 3 ] = bx;  
  131.                     positions[ i + 4 ] = by;  
  132.                     positions[ i + 5 ] = bz;  
  133.   
  134.                     positions[ i + 6 ] = cx;  
  135.                     positions[ i + 7 ] = cy;  
  136.                     positions[ i + 8 ] = cz;  
  137.   
  138.                     // flat face normals  
  139.   
  140.                     pA.set( ax, ay, az );  
  141.                     pB.set( bx, by, bz );  
  142.                     pC.set( cx, cy, cz );  
  143.   
  144.                     cb.subVectors( pC, pB );  
  145.                     ab.subVectors( pA, pB );  
  146.                     cb.cross( ab );  
  147.   
  148.                     cb.normalize();  
  149.   
  150.                     var nx = cb.x;  
  151.                     var ny = cb.y;  
  152.                     var nz = cb.z;  
  153.   
  154.                     normals[ i ]     = nx;  
  155.                     normals[ i + 1 ] = ny;  
  156.                     normals[ i + 2 ] = nz;  
  157.   
  158.                     normals[ i + 3 ] = nx;  
  159.                     normals[ i + 4 ] = ny;  
  160.                     normals[ i + 5 ] = nz;  
  161.   
  162.                     normals[ i + 6 ] = nx;  
  163.                     normals[ i + 7 ] = ny;  
  164.                     normals[ i + 8 ] = nz;  
  165.   
  166.                     // colors  
  167.   
  168.                     var vx = ( x / n ) + 0.5;  
  169.                     var vy = ( y / n ) + 0.5;  
  170.                     var vz = ( z / n ) + 0.5;  
  171.   
  172.                     color.setRGB( vx, vy, vz );  
  173.   
  174.                     colors[ i ]     = color.r;  
  175.                     colors[ i + 1 ] = color.g;  
  176.                     colors[ i + 2 ] = color.b;  
  177.   
  178.                     colors[ i + 3 ] = color.r;  
  179.                     colors[ i + 4 ] = color.g;  
  180.                     colors[ i + 5 ] = color.b;  
  181.   
  182.                     colors[ i + 6 ] = color.r;  
  183.                     colors[ i + 7 ] = color.g;  
  184.                     colors[ i + 8 ] = color.b;  
  185.   
  186.                 }  
  187.   
  188.                 geometry.offsets = [];  
  189.   
  190.                 var offsets = triangles / chunkSize;  
  191.   
  192.                 for ( var i = 0; i < offsets; i ++ ) {  
  193.   
  194.                     var offset = {  
  195.                         start: i * chunkSize * 3,  
  196.                         index: i * chunkSize * 3,  
  197.                         count: Math.min( triangles - ( i * chunkSize ), chunkSize ) * 3  
  198.                     };  
  199.   
  200.                     geometry.offsets.push( offset );  
  201.   
  202.                 }  
  203.   
  204.                 geometry.computeBoundingSphere();</pre><br>  
  205. <br>  
  206. <br>  
  207. <p></p>  
  208.                       

Tags: Javascript JSON

Posted on Sun, 03 May 2020 16:55:31 -0700 by kumschick