WebGL/Threejs瀑布水流粒子效果

webgl瀑布效果

初始化场景

function init () {

   scene = new THREE.Scene();
   camera =  new THREE.PerspectiveCamera (45, scr.w / scr.h, 0.1, 10000);

   renderer = new THREE.WebGLRenderer ({ antialias: true });
   renderer.gammaInput = true;
   renderer.gammaOutput = true;
   renderer.setClearColor (new THREE.Color (0xffffff, 1.0));
   renderer.setSize (scr.w, scr.h);

   /* Camera positioning and pointing it to the center of the scene.  */
   camera.position.x = -waterfall.startX * 2;
   camera.position.y = waterfall.h * 4;
   camera.position.z = waterfall.h * 4;
   /* Look at the center of the scene.  */
   camera.lookAt (0, 0, 0);

   /* Add the output of the renderer to the html element.  */
   document.getElementById("WebGL-output").appendChild
               (renderer.domElement);

   /* Camera mouse controls.  */
   cameraControls = new THREE.OrbitAndPanControls (camera,
                  renderer.domElement);
   cameraControls.target.set (0,0,0);

   /* Sun light.  */
   var sunLight = new THREE.DirectionalLight (0x0f0f0f, 100.0);
   sunLight.position.set (-riverOutput.startX, 64000,
            riverOutput.dimZ + 20).normalize();
   scene.add (sunLight);

   /* Fog. */
   scene.fog = new THREE.FogExp2( 0x2f2f2f, 0.00050 );

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

}

 

模型场景创建

webgl瀑布效果

function createTreeTrunk () {

   var treeTrunkGeometry, treeTrunkMaterial, treeTrunkTex;


   treeTrunkGeometry = new THREE.CylinderGeometry (treeTrunkStruct.radius,
                     treeTrunkStruct.radius,
                     treeTrunkStruct.height,
                     100, 100, false);
   treeTrunkTex = applyTex ("textures/treeTrunkTex.jpg", 1, 1);
   treeTrunkMaterial = new THREE.MeshBasicMaterial ({ map: treeTrunkTex });
   treeTrunk = new THREE.Mesh (treeTrunkGeometry, treeTrunkMaterial);

   treeTrunk.position.x = treeTrunkStruct.posX;
   treeTrunk.position.y = treeTrunkStruct.posY;
   treeTrunk.position.z = treeTrunkStruct.posZ;

   treeTrunk.rotation.x = (treeTrunkStruct.rotX * Math.PI) / 180.0;
   treeTrunk.rotation.z = (treeTrunkStruct.rotZ * Math.PI) / 180.0;

   treeTrunk.visible = false;

   scene.add (treeTrunk);

}

function createLake (dimX, dimY, posX, posY, posZ, rotX) {
   var lLake, lLakeGeometry, lLakeMaterial, lLakeTex;

   lLakeGeometry = new THREE.PlaneGeometry (dimX, dimY);
   lLakeTex = applyTex ("textures/water.jpg", 50, 50);
   lLakeMaterial = new THREE.MeshBasicMaterial ({ color:0x00005f,
                         side: THREE.DoubleSide,
                         map:lLakeTex });
   lLake = new THREE.Mesh (lLakeGeometry, lLakeMaterial);

   lLake.position.x = posX;
   lLake.position.y = posY;
   lLake.position.z = posZ;

   lLake.rotation.x = (rotX * Math.PI) / 180.0;

   scene.add (lLake);
}