threejs打造三维草坪效果-html代码-BFW代码库

代码语言：html
所属分类：三维
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        body {
            background-color: #fff;
            margin: 0;
            overflow: hidden;
        }
        .label {
            position: absolute;
            top: 0;
            left: 0;
            padding: 5px 15px;
            color: #fff;
            font-size: 13px;
            background-color: rgba(0, 0, 0, .15);
        }
        .instructions {
            position: absolute;
            bottom: 0%;
            left: 0;
            padding: 5px 15px;
            color: #fff;
            font-size: 13px;
            background-color: rgba(0, 0, 0, .15);
        }
        canvas {
            display: block;
        }
    </style>


</head>
<body>

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

    <div class="label">
        GRASS
    </div>
    <div class="instructions">
        DRAG TO MOVE CAMERA
    </div>

    <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/three.js"></script>
    <script src="http://repo.bfw.wiki/bfwrepo/js/OrbitControls.js"></script>
    <script src="http://repo.bfw.wiki/bfwrepo/js/perlin.js"></script>
    <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/stats-min.js"></script>

    <script>


        var canvas = document.getElementById("canvas");

        var TWO_PI = Math.PI * 2;

        const mobile = (navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i) || navigator.userAgent.match(/BlackBerry/i) || navigator.userAgent.match(/Windows Phone/i));


        //Variables for blade mesh
        var joints = 5;
        var w_ = 0.12;
        var h_ = 1;

        //Patch side length
        var width = 120;

        //Number of blades
        var instances = 50000;
        if (mobile) {
            instances = 10000;
            width = 50;
        }

        //Camera rotate
        var rotate = false;

        //Initialise three.js
        var scene = new THREE.Scene();

        var renderer = new THREE.WebGLRenderer({
            antialias: true,
            canvas: canvas
        });
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setClearColor(0x66deff, 1);

        distance = 400;

        var FOV = 2 * Math.atan(window.innerHeight / (2 * distance)) * 90 / Math.PI;

        //Camera
        var camera = new THREE.PerspectiveCamera(FOV, window.innerWidth / window.innerHeight, 1, 20000);
        camera.position.set(-50, 10, 50);
        scene.add(camera);

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

        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        }

        //Lights
        var light_1 = new THREE.AmbientLight(0xffffff, 0.5);
        scene.add(light_1);

        //OrbitControls.js for camera manipulation
        controls = new THREE.OrbitControls(camera, renderer.domElement);
        controls.autoRotate = rotate;
        controls.autoRotateSpeed = 0.5;

        // const stats = new Stats();
        // stats.showPanel(0);
        // stats.domElement.style.position = 'absolute';
        // stats.domElement.style.right = '0px';
        // stats.domElement.style.bottom = '0px';
        // document.body.appendChild(stats.domElement);

        //http://www.euclideanspace.com/maths/algebra/realNormedAlgebra/quaternions/code/index.htm
        function multiplyQuaternions(q1, q2) {
            x = q1.x * q2.w + q1.y * q2.z - q1.z * q2.y + q1.w * q2.x;
            y = -q1.x * q2.z + q1.y * q2.w + q1.z * q2.x + q1.w * q2.y;
            z = q1.x * q2.y - q1.y * q2.x + q1.z * q2.w + q1.w * q2.z;
            w = -q1.x * q2.x - q1.y * q2.y - q1.z * q2.z + q1.w * q2.w;
            return new THREE.Vector4(x, y, z, w);
        }


        var vertexSource = `
        precision mediump float;
        uniform mat4 modelViewMatrix;
        uniform mat4 projectionMatrix;
        attribute vec3 position;
        attribute vec3 offset;
        attribute vec2 uv;
        attribute vec4 orientation;
        attribute float halfRootAngleSin;
        attribute float halfRootAngleCos;
        attribute float stretch;
        uniform float time;
        varying vec2 vUv;
        varying float frc;

        /*** WEBGL-NOISE FROM https://github.com/stegu/webgl-noise ***/

        // Description : Array and textureless GLSL 2D simplex noise function.
        //      Author : Ian McEwan, Ashima Arts.
        //  Maintainer : stegu
        //     Lastmod : 20110822 (ijm)
        //     License : Copyright (C) 2011 Ashima Arts. All rights reserved.
        //               Distributed under the MIT License. See LICENSE file.
        //               https://github.com/ashima/webgl-noise
        //               https://github.com/stegu/webgl-noise
        //

        vec3 mod289(vec3 x) {
        return x - floor(x * (1.0 / 289.0)) * 289.0;
        }

        vec2 mod289(vec2 x) {
        return x - floor(x * (1.0 / 289.0)) * 289.0;
        }

        vec3 permute(vec3 x) {
        return mod289(((x*34.0)+1.0)*x);
        }

        float snoise(vec2 v)
        {
        const vec4 C = vec4(0.211324865405187,  // (3.0-sqrt(3.0))/6.0
        0.366025403784439,  // 0.5*(sqrt(3.0)-1.0)
        -0.577350269189626,  // -1.0 + 2.0 * C.x
        0.024390243902439); // 1.0 / 41.0
        // First corner
        vec2 i  = floor(v + dot(v, C.yy) );
        vec2 x0 = v -   i + dot(i, C.xx);

        // Other corners
        vec2 i1;
        //i1.x = step( x0.y, x0.x ); // x0.x > x0.y ? 1.0 : 0.0
        //i1.y = 1.0 - i1.x;
        i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
        // x0 = x0 - 0.0 + 0.0 * C.xx ;
        // x1 = x0 - i1 + 1.0 * C.xx ;
        // x2 = x0 - 1.0 + 2.0 * C.xx ;
        vec4 x12 = x0.xyxy + C.xxzz;
        x12.xy -= i1;

        // Permutations
        i = mod289(i); // Avoid truncation effects in permutation
        vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0 ))
        + i.x + vec3(0.0, i1.x, 1.0 ));

        vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy), dot(x12.zw,x12.zw)), 0.0);
        m = m*m ;
        m = m*m ;

        // Gradients: 41 points uniformly over a line, mapped onto a diamond.
        // The ring size 17*17 = 289 is close to a multiple of 41 (41*7 = 287)

        vec3 x = 2.0 * fract(p * C.www) - 1.0;
        vec3 h = abs(x) - 0.5;
        vec3 ox = floor(x + 0.5);
        vec3 a0 = x - ox;

        // Normalise gradients implicitly by scaling m
        // Approximation of: m *= inversesqrt( a0*a0 + h*h );
        m *= 1.79284291400159 - 0.85373472095314 * ( a0*a0 + h*h );

        // Compute final noise value at P
        vec3 g;
        g.x  = a0.x  * x0.x  + h.x  * x0.y;
        g.yz = a0.yz * x12.xz + h.yz * x12.yw;
        return 130.0 * dot(m, g);
        }

        //*** END NOISE ***

        //https://www.geeks3d.com/20141201/how-to-rotate-a-vertex-by-a-quaternion-in-glsl/
        vec3 rotateVectorByQuaternion( vec3 v, vec4 q){
        return 2.0 * cross(q.xyz, v * q.w + cross(q.xyz, v)) + v;
        }

        //https://en.wikipedia.org/wiki/Slerp
        vec4 slerp(vec4 v0, vec4 v1, float t) {
        // Only unit quaternions are valid rotations.
        // Normalize to avoid undefined behavior.
        normalize(v0);
        normalize(v1);

        // Compute the cosine of the angle between the two vectors.
        float dot_ = dot(v0, v1);

        // If the dot product is negative, slerp won't take
        // the shorter path. Note that v1 and -v1 are equivalent when
        // the negation is applied to all four components. Fix by
        // reversing one quaternion.
        if (dot_ < 0.0) {
        v1 = -v1;
        dot_ = -dot_;
        }

        const float DOT_THRESHOLD = 0.9995;
        if (dot_ > DOT_THRESHOLD) {
        // If the inputs are too close for comfort, linearly interpolate
        // and normalize the result.

        vec4 result = t*(v1 - v0) + v0;
        normalize(result);
        return result;
        }

        // Since dot is in range [0, DOT_THRESHOLD], acos is safe
        float theta_0 = acos(dot_);        // theta_0 = angle between input vectors
        float theta = theta_0*t;          // theta = angle between v0 and result
        float sin_theta = sin(theta);     // compute this value only once
        float sin_theta_0 = sin(theta_0); // compute this value only once

        float s0 = cos(theta) - dot_ * sin_theta / sin_theta_0;  // == sin(theta_0 - theta) / sin(theta_0)
        float s1 = sin_theta / sin_theta_0;

        return (s0 * v0) + (s1 * v1);
        }

        //https://github.com/glslify/glsl-easings
        float circularIn(float t) {
        return 1.0 - sqrt(1.0 - t * t);
        }

   .........完整代码请登录后点击上方下载按钮下载查看