threejs实现canvas三维瀑布动画效果代码-html代码-BFW代码库

threejs实现canvas三维瀑布动画效果代码

代码语言：html

所属分类：三维

代码描述：threejs实现canvas三维瀑布动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        body {
      margin:0
    }
    #canvas {
      background:#248079;
    }
    </style>

</head>

<body>

    <canvas id="canvas"></canvas>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.109.js"></script>
    <script>
        /* DaTouWang URL: www.datouwang.com */
    var scene = new THREE.Scene();
    var h = window.innerHeight,
        w = window.innerWidth;
    var aspectRatio = w / h,
        fieldOfView = 25,
        nearPlane = .1,
        farPlane = 1000; 
    var camera = new THREE.PerspectiveCamera(
        fieldOfView,
        aspectRatio,
        nearPlane,
        farPlane);
    var renderer = new THREE.WebGLRenderer({canvas:canvas,alpha: true, antialias: true});
    renderer.setSize( w, h );
    renderer.shadowMapEnabled = true;
    renderer.shadowMap.type = THREE.PCFSoftShadowMap;
    document.body.appendChild( renderer.domElement );
    
    
    camera.position.set(-5,6,8);
    // camera.position.set(0,0,8); // front
    // camera.position.set(-10,.2,0); //left
    // camera.position.set(0,10,0); //top
    // camera.position.y=4;
    
    camera.lookAt(new THREE.Vector3(0,0,0));
    
    //Ambient light
    var light = new THREE.AmbientLight( 0xffffff ,.5);
    
    var shadowLight = new THREE.DirectionalLight(0xffffff, .5);
    shadowLight.position.set(200, 200, 200);
    shadowLight.castShadow = true;
    
    var backLight = new THREE.DirectionalLight(0xffffff, .2);
    backLight.position.set(-100, 200, 50);
    backLight.castShadow = true;
    scene.add(backLight);
    scene.add(light);
    scene.add(shadowLight);
    
    // grassland left
    var geometry_left = new THREE.BoxGeometry( 2, .2, 2 );
    var material_grass = new THREE.MeshLambertMaterial( { color: 0xABD66A } );
    var ground_left = new THREE.Mesh( geometry_left, material_grass );
    ground_left.position.set(-1,0.1,0);
    scene.add( ground_left );
    customizeShadow(ground_left,.25) // mess, opacity
    
    //river
    var geometry_river = new THREE.BoxGeometry( 1, .1, 2 );
    var material_river = new THREE.MeshLambertMaterial( { color: 0x70B7E3 } );
    var river = new THREE.Mesh( geometry_river, material_river );
    river.position.set(.5,.1,0);
    scene.add( river );
    customizeShadow(river,.08) // mess, opacity
    //river bed
    var geometry_bed = new THREE.BoxGeometry( 1, .05, 2 );
    var bed = new THREE.Mesh( geometry_bed , material_grass );
    bed.position.set(.5,.025,0);
    scene.add( bed );
    
    //grassland right
    var geometry_right = new THREE.BoxGeometry( 1, .2, 2 );
    var ground_right = new THREE.Mesh( geometry_right, material_grass );
    ground_right.position.set(1.5,0.1,0);
    scene.add( ground_right );
    customizeShadow(ground_right,.25) // mess, opacity
    
    
    
    
    
    var tree=function(x,z){
      this.x=x;
      this.z=z;
      
      //trunk
      var material_trunk = new THREE.MeshLambertMaterial({ color: 0x9A6169  });
      var geometry_trunk = new THREE.BoxGeometry( .15, .15, .15 );
      var trunk = new THREE.Mesh( geometry_trunk, material_trunk );
      trunk.position.set(this.x,.275,this.z);
      trunk.castShadow = true;
      trunk.receiveShadow = true;
      scene.add( trunk );
      
      //leaves
      var geometry_leaves = new THREE.BoxGeometry( .25, .4, .25 );
      var material_leaves = new THREE.MeshLambertMaterial({ color: 0x65BB61});
      var leaves = new THREE.Mesh( geometry_leaves, material_leaves );
    .........完整代码请登录后点击上方下载按钮下载查看