three实现三维液态物体动画效果代码
代码语言：html
所属分类：三维
代码描述：three实现三维液态物体动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/aqua-1.5.5.css">
<style>
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
}
</style>
</head>
<body >
<div class="relative w-screen h-screen">
<div class="liquid-crystal w-full h-full bg-black"></div>
</div>
<script type="module">
import * as THREE from "//repo.bfw.wiki/bfwrepo/js/module/three/build/three.module.js";
import ky from "//repo.bfw.wiki/bfwrepo/js/module/kyouka/kyouka.1.2.5.js";
import { OrbitControls } from "//repo.bfw.wiki/bfwrepo/js/module/three/examples/jsm/controls/OrbitControls.js";
const calcAspect = (el) => el.clientWidth / el.clientHeight;
const getNormalizedMousePos = (e) => {
return {
x: (e.clientX / window.innerWidth) * 2 - 1,
y: -(e.clientY / window.innerHeight) * 2 + 1
};
};
const liquidCrystalVertexShader = `
#define GLSLIFY 1
//
// Description : Array and textureless GLSL 2D/3D/4D simplex
// noise functions.
// Author : Ian McEwan, Ashima Arts.
// Maintainer : ijm
// 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
//
vec3 mod289(vec3 x) {
return x - floor(x * (1.0 / 289.0)) * 289.0;
}
vec4 mod289(vec4 x) {
return x - floor(x * (1.0 / 289.0)) * 289.0;
}
vec4 permute(vec4 x) {
return mod289(((x*34.0)+1.0)*x);
}
vec4 taylorInvSqrt(vec4 r)
{
return 1.79284291400159 - 0.85373472095314 * r;
}
float snoise(vec3 v)
{
const vec2 C = vec2(1.0/6.0, 1.0/3.0) ;
const vec4 D = vec4(0.0, 0.5, 1.0, 2.0);
// First corner
vec3 i = floor(v + dot(v, C.yyy) );
vec3 x0 = v - i + dot(i, C.xxx) ;
// Other corners
vec3 g = step(x0.yzx, x0.xyz);
vec3 l = 1.0 - g;
vec3 i1 = min( g.xyz, l.zxy );
vec3 i2 = max( g.xyz, l.zxy );
// x0 = x0 - 0.0 + 0.0 * C.xxx;
// x1 = x0 - i1 + 1.0 * C.xxx;
// x2 = x0 - i2 + 2.0 * C.xxx;
// x3 = x0 - 1.0 + 3.0 * C.xxx;
vec3 x1 = x0 - i1 + C.xxx;
vec3 x2 = x0 - i2 + C.yyy; // 2.0*C.x = 1/3 = C.y
vec3 x3 = x0 - D.yyy; // -1.0+3.0*C.x = -0.5 = -D.y
// Permutations
i = mod289(i);
vec4 p = permute( permute( permute(
i.z + vec4(0.0, i1.z, i2.z, 1.0 ))
+ i.y + vec4(0.0, i1.y, i2.y, 1.0 ))
+ i.x + vec4(0.0, i1.x, i2.x, 1.0 ));
// Gradients: 7x7 points over a square, mapped onto an octahedron.
// The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294)
float n_ = 0.142857142857; // 1.0/7.0
vec3 ns = n_ * D.wyz - D.xzx;
vec4 j = p - 49.0 * floor(p * ns.z * ns.z); // mod(p,7*7)
vec4 x_ = floor(j * ns.z);
vec4 y_ = floor(j - 7.0 * x_ ); // mod(j,N)
vec4 x = x_ *ns.x + ns.yyyy;
vec4 y = y_ *ns.x + ns.yyyy;
vec4 h = 1.0 - abs(x) - abs(y);
vec4 b0 = vec4( x.xy, y.xy );
vec4 b1 = vec4( x.zw, y.zw );
//vec4 s0 = vec4(lessThan(b0,0.0))*2.0 - 1.0;
//vec4 s1 = vec4(lessThan(b1,0.0))*2.0 - 1.0;
vec4 s0 = floor(b0)*2.0 + 1.0;
vec4 s1 = floor(b1)*2.0 + 1.0;
vec4 sh = -step(h, vec4(0.0));
vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ;
vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ;
vec3 p0 = vec3(a0.xy,h.x);
vec3 p1 = vec3(a0.zw,h.y);
vec3 p2 = vec3(a1.xy,h.z);
vec3 p3 = vec3(a1.zw,h.w);
//Normalise gradients
vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
p0 *= norm.x;
p1 *= norm.y;
p2 *= norm.z;
p3 *= norm.w;
// Mix final noise value
vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
m = m * m;
return 42.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1),
dot(p2,x2), dot(p3,x3) ) );
}
const float PI = 3.14159265359;
vec4 getWorldNormal(mat4 modelMat,vec3 normal){
vec4 worldNormal=normalize((modelMat*vec4(normal,0.)));
return worldNormal;
}
uniform float uTime;
uniform vec2 uMouse;
varying vec2 vUv;
varying vec3 vWorldNormal;
vec3 distort(vec3 p){
vec3 pointDirection=normalize(p);
vec3 mousePoint=vec3(uMouse,1.);
vec3 mouseDirection=normalize(mousePoint);
float mousePointAngle=dot(pointDirection,mouseDirection);
float freq=1.5;
float t=uTime*100.;
float f=PI*freq;
float fc=mousePointAngle*f;
vec3 n11=pointDirection*1.5;
vec3 n12=vec3(uTime)*4.;
float dist=smoothstep(.4,1.,mousePointAngle);
float n1a=dist*2.;
float noise1=snoise(n11+n12)*n1a;
vec3 n21=pointDirection*1.5;
vec3 n22=vec3(0.,0.,uTime)*2.;
vec3 n23=vec3(uMouse,0.)*.2;
float n2a=.8;
float noise2=snoise(n21+n22+n23)*n2a;
float mouseN1=sin(fc+PI+t);
float mouseN2=smoothstep(f,f*2.,fc+t);
float mouseN3=smoothstep(f*2.,f,fc+t);
float mouseNa=4.;
float mouseNoise=mouseN1*mouseN2*mouseN3*mouseNa;
float noise=noise1+noise2+mouseNoise;
vec3 distortion=pointDirection*(noise+length(p));
return distortion;
}
// http://lolengine.net/blog/2013/09/21/picking-orthogonal-vector-combing-coconuts
vec3 orthogonal(vec3 v){
return normalize(abs(v.x)>abs(v.z)?vec3(-v.y,v.x,0.)
:vec3(0.,-v.z,v.y));
}
// https://codepen.io/marco_fugaro/pen/xxZWPWJ?editors=0010
vec3 fixNormal(vec3 position,vec3 distortedPosition,vec3 normal){
vec3 tangent=orthogonal(normal);
vec3 bitangent=normalize(cross(normal,tangent));
float offset=.1;
vec3 neighbour1=position+tangent*offset;
vec3 neighbour2=position+bitangent*offset;
vec3 displacedNeighbour1=distort(neighbour1);
vec3 displacedNeighbour2=distort(neighbour2);
vec3 displacedTangent=displacedNeighbour1-distortedPosition;
vec3 displacedBitangent=displacedNeighbour2-distortedPosition;
vec3 displacedNormal=normalize(cross(displacedTangent,displacedBitangent));
return displacedNormal;
}
void main(){
vec3 pos=position;
pos=distort(pos);
vec4 modelPosition=modelMatrix*vec4(pos,1.);
vec4 viewPosition=viewMatrix*modelPosition;
vec4 projectedPosition=projectionMatrix*viewPosition;
gl_Position=projectedPosition;
vec3 distortedNormal=fixNormal(position,pos,normal);
vUv=uv;
vWorldNormal=getWorldNormal(modelMatrix,distortedNormal).xyz;
}
`;
const liquidCrystalFragmentShader = `
#define GLSLIFY 1
//
// Description : Array and textureless GLSL 2D/3D/4D simplex
// noise functions.
// Author : Ian McEwan, Ashima Arts.
// Maintainer : ijm
// 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
//
vec3 mod289(vec3 x) {
return x - floor(x * (1.0 / 289.0)) * 289.0;
}
vec4 mod289(vec4 x) {
return x - floor(x * (1.0 / 289.0)) * 289.0;
}
vec4 permute(vec4 x) {
return mod289(((x*34.0)+1.0)*x);
}
vec4 taylorInvSqrt(vec4 r)
{
return 1.79284291400159 - 0.85373472095314 * r;
}
float snoise(vec3 v)
{
const vec2 C = vec2(1.0/6.0, 1.0/3.0) ;
const vec4 D = vec4(0.0, 0.5, 1.0, 2.0);
// First corner
vec3 i = floor(v + dot(v, C.yyy) );
vec3 x0 = v - i + dot(i, C.xxx) ;
// Other corners
vec3 g = step(x0.yzx, x0.xyz);
vec3 l = 1.0 - g;
vec3 i1 = min( g.xyz, l.zxy );
vec3 i2 = max( g.xyz, l.zxy );
// x0 = x0 - 0.0 + 0.0 * C.xxx;
// x1 = x0 - i1 + 1.0 * C.xxx;
// x2 = x0 - i2 + 2.0 * C.xxx;
// x3 = x0 - 1.0 + 3.0 * C.xxx;
vec3 x1 = x0 - i1 + C.xxx;
vec3 x2 = x0 - i2 + C.yyy; // 2.0*C.x = 1/3 = C.y
vec3 x3 = x0 - D.yyy; // -1.0+3.0*C.x = -0.5 = -D.y
// Permutations
i = mod289(i);
vec4 p = permute( permute( permute(
i.z + vec4(0.0, i1.z, i2.z, 1.0 ))
+ i.y + vec4(0.0, i1.y, i2.y, 1.0 ))
+ i.x + vec4(0.0, i1.x, i2.x, 1.0 ));
// Gradients: 7x7 points over a square, mapped onto an octahedron.
// The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294)
float n_ = 0.142857142857; // 1.0/7.0
vec3 ns = n_ * D.wyz - D.xzx;
vec4 j = p - 49.0 * floor(p * ns.z * ns.z); // mod(p,7*7)
vec4 x_ = floor(j * ns.z);
vec4 y_ = floor(j - 7.0 * x_ ); // mod(j,N)
vec4 x = x_ *ns.x + ns.yyyy;
vec4 y = y_ *ns.x + ns.yyyy;
vec4 h = 1.0 - abs(x) - abs(y);
vec4 b0 = vec4( x.xy, y.xy );
vec4 b1 = vec4( x.zw, y.zw );
//vec4 s0 = vec4(lessThan(b0,0.0))*2.0 - 1.0;
//vec4 s1 = vec4(lessThan(b1,0.0))*2.0 - 1.0;
vec4 s0 = floor(b0)*2.0 + 1.0;
vec4 s1 = floor(b1)*2.0 + 1.0;
vec4 sh = -step(h, vec4(0.0));
vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ;
vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ;
vec3 p0 = vec3(a0.xy,h.x);
vec3 p1 = vec3(a0.zw,h.y);
vec3 p2 = vec3(a1.xy,h.z);
vec3 p3 = vec3(a1.zw,h.w);
//Normalise gradients
vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
p0 *= norm.x;
p1 *= norm.y;
p2 *= norm.z;
p3 *= norm.w;
// Mix final noise value
vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
m = m * m;
return 42.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1),
dot(p2,x2), dot(p3,x3) ) );
}
float invert(float n){
return 1.-n;
}
vec3 invert(vec3 n){
return 1.-n;
}
uniform float uTime;
uniform vec2 uMouse;
uniform vec2 uResolution;
uniform sampler2D uIriMap;
uniform float uIriBoost;
varying vec2 vUv;
varying vec3 vWorldNormal;
void main(){
vec2 newUv=vUv;
// pbr
float noise=snoise(vWorldNormal*5.)*.3;
vec3 N=normalize(vWorldNormal+vec3(noise));
vec3 V=normalize(cameraPosition);
float NdotV=max(dot(N,V),0.);
float colorStrength=smoothstep(0.,.8,NdotV);
vec3 color=invert(vec3(colorStrength));
// iri
vec3 airy=texture2D(uIriMap,vec2(NdotV*.99,0.)).rgb;
airy*=airy;
vec3 specularLight=vWorldNormal*airy*uIriBoost;
float mixStrength=smoothstep(.3,.6,NdotV);
vec3 finalColor=mix(specularLight,color,mixStrength);
gl_FragColor=vec4(finalColor,0.);
}
`;
/**
* @classdesc
* ThinFilmFresnelMap is a lookup texture containing the reflection colour. The texture index value
* is dot(normal, view). The texture values are stored in approximated gamma space (power 2.0), so
* the sampled value needs to be multiplied with itself before use. The sampled value should replace
* the fresnel factor in a PBR material.
*
* @property filmThickness The thickness of the thin film layer in nanometers. Defaults to 380.
* @property refractiveIndexFilm The refractive index of the thin film. Defaults to 2.
* @property refractiveIndexBase The refractive index of the material under the film. Defaults to 3.
*
* @constructor
* @param filmThickness The thickness of the thin film layer in nanometers. Defaults to 380.
* @param refractiveIndexFilm The refractive index of the thin film. Defaults to 2.
* @param refractiveIndexBase The refractive index of the material under the film. Defaults to 3.
* @param size The width of the texture. Defaults to 64.
*
* @extends DataTexture
*
* @author David Lenaerts <http://www.derschmale.com>
*/
function ThinFilmFresnelMap(filmThickness, refractiveIndexFilm, refractiveIndexBase, size) {
this._filmThickness = filmThickness || 380.0;
this._refractiveIndexFilm = refractiveIndexFilm || 2;
this._refractiveIndexBase = refractiveIndexBase || 3;
this._size = size || 64;
this._data = new Uint8Array(this._size * 4);
this._updateData();
this.generateMipmaps = true;
this.needsUpdate = true;
this.texture = new THREE.DataTexture(this._data, this._size, 1);
}
ThinFilmFresnelMap.prototype = Object.create(THREE.DataTexture.prototype, {
filmThickness: {
get: function () {
return this._filmThickness;
},
set: function (value) {
this._filmThickness = value;
this.updateSettings(this._filmThickness, this._refractiveIndexFilm, this._refractiveIndexBase);
}
},
refractiveIndexFilm: {
get: function () {
return this._refractiveIndexFilm;
},
set: function (value) {
this._refractiveIndexFilm = value;
this.updateSettings(this._filmThickness, this._refractiveIndexFilm, this._refractiveIndexBase);
}
},
refractiveIndexBase: {
get: function () {
return this._refractiveIndexBase;
},
set: function (value) {
this._refractiveIndexBase = value;
this.updateSettings(this._filmThickness, this._refractiveIndexFilm, this._refractiveIndexBase);
}
}
});
/**
* Regenerates the lookup texture given new data.
* @param filmThickness The thickness of the thin film layer in nanometers. Defaults to 380.
* @param refractiveIndexFilm The refractive index of the thin film. Defaults to 2.
* @param refractiveIndexBase The refractive index of the material under the film. Defaults to 3.
*/
ThinFilmFresnelMap.prototype.updateSettings = function (filmThickness, refractiveIndexFilm, refractiveIndexBase) {
this._filmThickness = filmThickness || 380;
this._refractiveIndexFilm = refractiveIndexFilm || 2;
this._refractiveIndexBase = refractiveIndexBase || 3;
this._updateData();
};
/**
* @private
*/
ThinFilmFresnelMap.prototype._fresnelRefl = function (refractiveIndex1, refractiveIndex2, cos1, cos2, R, phi) {
// r is amplitudinal, R is power
let sin1Sqr = 1.0 - cos1 * cos1; // = sin^2(incident)
let refrRatio = refractiveIndex1 / refractiveIndex2;
if (refrRatio * refrRatio * sin1Sqr > 1.0) {
// total internal reflection
R.x = 1.0;
R.y = 1.0;
let sqrRefrRatio = refrRatio * refrRatio;
// it looks like glsl's atan ranges are different from those in JS?
phi.x =
2.0 *
Math.atan((-sqrRefrRatio * Math.sqrt(sin1Sqr - 1.0 / sqrRefrRatio)) / cos1);
phi.y = 2.0 * Math.atan(-Math.sqrt(sin1Sqr - 1.0 / sqrRefrRatio) / cos1);
}
else {
let r_p = (refractiveIndex2 * cos1 - refractiveIndex1 * cos2) /
(refractiveIndex2 * cos1 + refractiveIndex1 * cos2);
let r_s = (refractiveIndex1 * cos1 - refractiveIndex2 * cos2) /
(refractiveIndex1 * cos1 + refractiveIndex2 * cos2);
phi.x = r_p < 0.0 ? Math.PI : 0.0;
phi.y = r_s < 0.0 ? Math.PI : 0.0;
R.x = r_p * r_p;
R.y = r_s * r_s;
}
};
/**
* @private
*/
ThinFilmFresnelMap.prototype._updateData = function () {
let filmThickness = this._filmThickness;
let refractiveIndexFilm = this._refractiveIndexFilm;
let refractiveIndexBase = this._refractiveIndexBase;
let size = this._size;
// approximate CIE XYZ weighting functions from: http://jcgt.org/published/0002/02/01/paper.pdf
function xFit_1931(lambda) {
let t1 = (lambda - 442.0) * (lambda < 442.0 ? 0.0624 : 0.0374);
let t2 = (lambda - 599.8) * (lambda < 599.8 ? 0.0264 : 0.0323);
let t3 = (lambda - 501.1) * (lambda < 501.1 ? 0.049 : 0.0382);
return (0.362 * Math.exp(-0.5 * t1 * t1) +
1.056 * Math.exp(-0.5 * t2 * t2) -
0.065 * Math.exp(-0.5 * t3 * t3));
}
function yFit_1931(lambda) {
let t1 = (lambda - 568.8) * (lambda < 568.8 ? 0.0213 : 0.0247);
let t2 = (lambda - 530.9) * (lambda < 530.9 ? 0.0613 : 0.0322);
return 0.821 * Math.exp(-0.5 * t1 * t1) + 0.286 * Math.exp(-0.5 * t2 * t2);
}
function zFit_1931(lambda) {
let t1 = (lambda - 437.0) * (lambda < 437.0 ? 0.0845 : 0.0278);
let t2 = (lambda - 459.0) * (lambda < 459.0 ? 0.0385 : 0.0725);
return 1.217 * Math.exp(-0.5 * t1 * t1) + 0.681 * Math.exp(-0.5 * t2 * t2);
}
let data = this._data;
let phi12 = new THREE.Vector2();
let phi21 = new THREE.Vector2();
let phi23 = new THREE.Vector2();
let R12 = new THREE.Vector2();
let T12 = new THREE.Vector2();
let R23 = new THREE.Vector2();
let R_bi = new THREE.Vector2();
let T_tot = new THREE.Vector2();
let R_star = new THREE.Vector2();
let R_bi_sqr = new THREE.Vector2();
let R_12_star = new THREE.Vector2();
let R_star_t_tot = new THREE.Vector2();
let refrRatioSqr = 1.0 / (refractiveIndexFilm * refractiveIndexFilm);
let refrRatioSqrBase = (refractiveIndexFilm * refractiveIndexFilm) /
(refractiveIndexBase * refractiveIndexBase);
// RGB is too limiting, so we use the entire spectral domain, but using limited samples (64) to
// create more pleasing bands
let numBands = 64;
let waveLenRange = 780 - 380; // the entire visible range
for (let i = 0; i < size; ++i) {
let cosThetaI = i / size;
let cosThetaT = Math.sqrt(1 - refrRatioSqr * (1.0 - cosThetaI * cosThetaI));
let cosThetaT2 = Math.sqrt(1 - refrRatioSqrBase * (1.0 - cosThetaT * cosThetaT));
// this is essentially the extra distance traveled by a ray if it bounds through the film
let pathDiff = 2.0 * refractiveIndexFilm * filmThickness * cosThetaT;
let pathDiff2PI = 2.0 * Math.PI * pathDiff;
this._fresnelRefl(1.0, refract.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0