threejs打造三维草坪效果
代码语言: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