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); }