mirror of
https://github.com/troisjs/trois.git
synced 2024-11-23 20:02:32 +08:00
0.1.6
This commit is contained in:
Kevin Levron
parent
92ffc04323
commit
1c0fb609e9
3007
build/trois.js
Normal file
3007
build/trois.js
Normal file
File diff suppressed because it is too large
Load Diff
@ -1,5 +1,5 @@
|
||||
import { h, toRef, watch, inject } from 'https://unpkg.com/vue@3.0.5/dist/vue.esm-browser.prod.js';
|
||||
import { Vector2, Vector3, Plane as Plane$1, Raycaster, WebGLRenderer, OrthographicCamera as OrthographicCamera$1, PerspectiveCamera as PerspectiveCamera$1, Group as Group$1, Scene as Scene$1, Color, BoxBufferGeometry, CircleBufferGeometry, ConeBufferGeometry, CylinderBufferGeometry, DodecahedronBufferGeometry, IcosahedronBufferGeometry, LatheBufferGeometry, OctahedronBufferGeometry, PolyhedronBufferGeometry, RingBufferGeometry, SphereBufferGeometry, TetrahedronBufferGeometry, TorusBufferGeometry, TorusKnotBufferGeometry, Curve, TubeBufferGeometry, AmbientLight as AmbientLight$1, DirectionalLight as DirectionalLight$1, PointLight as PointLight$1, SpotLight as SpotLight$1, FrontSide, MeshBasicMaterial, MeshLambertMaterial, TextureLoader, MeshMatcapMaterial, MeshPhongMaterial, MeshStandardMaterial, MeshPhysicalMaterial, ShaderChunk, UniformsUtils, ShaderLib, ShaderMaterial as ShaderMaterial$1, MeshToonMaterial, CubeTextureLoader, CubeRefractionMapping, Mesh as Mesh$1, PlaneBufferGeometry, FontLoader, TextBufferGeometry, WebGLCubeRenderTarget, RGBFormat, LinearMipmapLinearFilter, CubeCamera, BackSide, DoubleSide, InstancedMesh as InstancedMesh$1, SpriteMaterial, Sprite as Sprite$1, WebGLRenderTarget, ObjectSpaceNormalMap, Object3D, Face3, MathUtils, InstancedBufferAttribute } from 'https://unpkg.com/three@0.125.2/build/three.module.js';
|
||||
import { Vector2, Vector3, Plane as Plane$1, Raycaster, WebGLRenderer, OrthographicCamera as OrthographicCamera$1, PerspectiveCamera as PerspectiveCamera$1, Group as Group$1, Scene as Scene$1, Color, BoxBufferGeometry, CircleBufferGeometry, ConeBufferGeometry, CylinderBufferGeometry, DodecahedronBufferGeometry, IcosahedronBufferGeometry, LatheBufferGeometry, OctahedronBufferGeometry, PolyhedronBufferGeometry, RingBufferGeometry, SphereBufferGeometry, TetrahedronBufferGeometry, TorusBufferGeometry, TorusKnotBufferGeometry, Curve, TubeBufferGeometry, AmbientLight as AmbientLight$1, DirectionalLight as DirectionalLight$1, PointLight as PointLight$1, SpotLight as SpotLight$1, FrontSide, MeshBasicMaterial, MeshLambertMaterial, TextureLoader, MeshMatcapMaterial, MeshPhongMaterial, MeshStandardMaterial, MeshPhysicalMaterial, ShaderChunk, UniformsUtils, ShaderLib, ShaderMaterial as ShaderMaterial$1, MeshToonMaterial, CubeTextureLoader, CubeRefractionMapping, Mesh as Mesh$1, PlaneBufferGeometry, FontLoader, TextBufferGeometry, WebGLCubeRenderTarget, RGBFormat, LinearMipmapLinearFilter, CubeCamera, BackSide, DoubleSide, InstancedMesh as InstancedMesh$1, SpriteMaterial, Sprite as Sprite$1 } from 'https://unpkg.com/three@0.125.2/build/three.module.js';
|
||||
import { OrbitControls } from 'https://unpkg.com/three@0.125.2/examples/jsm/controls/OrbitControls.js';
|
||||
import { EffectComposer as EffectComposer$1 } from 'https://unpkg.com/three@0.125.2/examples/jsm/postprocessing/EffectComposer.js';
|
||||
import { RenderPass as RenderPass$1 } from 'https://unpkg.com/three@0.125.2/examples/jsm/postprocessing/RenderPass.js';
|
||||
@ -10,11 +10,6 @@ import { FXAAShader } from 'https://unpkg.com/three@0.125.2/examples/jsm/shaders
|
||||
import { HalftonePass as HalftonePass$1 } from 'https://unpkg.com/three@0.125.2/examples/jsm/postprocessing/HalftonePass.js';
|
||||
import { SMAAPass as SMAAPass$1 } from 'https://unpkg.com/three@0.125.2/examples/jsm/postprocessing/SMAAPass.js';
|
||||
import { UnrealBloomPass as UnrealBloomPass$1 } from 'https://unpkg.com/three@0.125.2/examples/jsm/postprocessing/UnrealBloomPass.js';
|
||||
import { Pass } from 'https://unpkg.com/three@0.125.2/examples/jsm/postprocessing/Pass.js';
|
||||
import { gsap, Power4 } from 'https://unpkg.com/gsap@3.5.1/index.js';
|
||||
import { Geometry as Geometry$1 } from 'https://unpkg.com/three@0.125.2/examples/jsm/deprecated/Geometry.js';
|
||||
import { resolveComponent, openBlock, createBlock, withCtx, createVNode, renderSlot } from 'https://unpkg.com/vue@3.0.5/dist/vue.esm-browser.prod.js';
|
||||
import { GLTFLoader } from 'https://unpkg.com/three@0.125.2/examples/jsm/loaders/GLTFLoader.js';
|
||||
|
||||
/**
|
||||
* Three.js helper
|
||||
@ -1327,7 +1322,7 @@ var ShaderMaterial = {
|
||||
var SubSurfaceMaterial = {
|
||||
extends: ShaderMaterial,
|
||||
props: {
|
||||
diffuse: { type: String, default: '#ffffff' },
|
||||
color: { type: String, default: '#ffffff' },
|
||||
thicknessColor: { type: String, default: '#ffffff' },
|
||||
thicknessDistortion: { type: Number, default: 0.4 },
|
||||
thicknessAmbient: { type: Number, default: 0.01 },
|
||||
@ -1342,15 +1337,18 @@ var SubSurfaceMaterial = {
|
||||
createMaterial: function createMaterial() {
|
||||
var params = SubsurfaceScatteringShader;
|
||||
var uniforms = UniformsUtils.clone(params.uniforms);
|
||||
|
||||
Object.entries(this.$props).forEach(function (ref) {
|
||||
var key = ref[0];
|
||||
var value = ref[1];
|
||||
|
||||
if (key === 'diffuse' || key === 'thicknessColor') {
|
||||
value = new Color(value);
|
||||
var _key = key, _value = value;
|
||||
if (['color', 'thicknessColor'].includes(key)) {
|
||||
if (key === 'color') { _key = 'diffuse'; }
|
||||
_value = new Color(value);
|
||||
}
|
||||
if (key !== 'id' && key !== 'transparent' && key !== 'vertexColors') {
|
||||
uniforms[key].value = value;
|
||||
if (!['id', 'transparent', 'vertexColors'].includes(key)) {
|
||||
uniforms[_key].value = _value;
|
||||
}
|
||||
});
|
||||
|
||||
@ -2029,8 +2027,8 @@ var TorusKnot = {
|
||||
props: {
|
||||
radius: { type: Number, default: 0.5 },
|
||||
tube: { type: Number, default: 0.4 },
|
||||
radialSegments: { type: Number, default: 64 },
|
||||
tubularSegments: { type: Number, default: 8 },
|
||||
tubularSegments: { type: Number, default: 64 },
|
||||
radialSegments: { type: Number, default: 8 },
|
||||
p: { type: Number, default: 2 },
|
||||
q: { type: Number, default: 3 },
|
||||
},
|
||||
@ -2048,7 +2046,7 @@ var TorusKnot = {
|
||||
},
|
||||
methods: {
|
||||
createGeometry: function createGeometry() {
|
||||
this.geometry = new TorusKnotBufferGeometry(this.radius, this.tube, this.radialSegments, this.tubularSegments, this.p, this.q);
|
||||
this.geometry = new TorusKnotBufferGeometry(this.radius, this.tube, this.tubularSegments, this.radialSegments, this.p, this.q);
|
||||
},
|
||||
},
|
||||
__hmrId: 'TorusKnot',
|
||||
@ -2756,895 +2754,6 @@ var ZoomBlurPass = {
|
||||
__hmrId: 'ZoomBlurPass',
|
||||
};
|
||||
|
||||
var snoise2 = "\n//\n// Description : Array and textureless GLSL 2D simplex noise function.\n// Author : Ian McEwan, Ashima Arts.\n// Maintainer : ijm\n// Lastmod : 20110822 (ijm)\n// License : Copyright (C) 2011 Ashima Arts. All rights reserved.\n// Distributed under the MIT License. See LICENSE file.\n// https://github.com/ashima/webgl-noise\n//\n\nvec3 mod289(vec3 x) {\n return x - floor(x * (1.0 / 289.0)) * 289.0;\n}\n\nvec2 mod289(vec2 x) {\n return x - floor(x * (1.0 / 289.0)) * 289.0;\n}\n\nvec3 permute(vec3 x) {\n return mod289(((x*34.0)+1.0)*x);\n}\n\nfloat snoise(vec2 v)\n{\n const vec4 C = vec4(0.211324865405187, // (3.0-sqrt(3.0))/6.0\n 0.366025403784439, // 0.5*(sqrt(3.0)-1.0)\n -0.577350269189626, // -1.0 + 2.0 * C.x\n 0.024390243902439); // 1.0 / 41.0\n // First corner\n vec2 i = floor(v + dot(v, C.yy) );\n vec2 x0 = v - i + dot(i, C.xx);\n\n // Other corners\n vec2 i1;\n i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);\n vec4 x12 = x0.xyxy + C.xxzz;\n x12.xy -= i1;\n\n // Permutations\n i = mod289(i); // Avoid truncation effects in permutation\n vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0 ))\n + i.x + vec3(0.0, i1.x, 1.0 ));\n\n vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy), dot(x12.zw,x12.zw)), 0.0);\n m = m*m ;\n m = m*m ;\n\n // Gradients: 41 points uniformly over a line, mapped onto a diamond.\n // The ring size 17*17 = 289 is close to a multiple of 41 (41*7 = 287)\n\n vec3 x = 2.0 * fract(p * C.www) - 1.0;\n vec3 h = abs(x) - 0.5;\n vec3 ox = floor(x + 0.5);\n vec3 a0 = x - ox;\n\n // Normalise gradients implicitly by scaling m\n // Approximation of: m *= inversesqrt( a0*a0 + h*h );\n m *= 1.79284291400159 - 0.85373472095314 * ( a0*a0 + h*h );\n\n // Compute final noise value at P\n vec3 g;\n g.x = a0.x * x0.x + h.x * x0.y;\n g.yz = a0.yz * x12.xz + h.yz * x12.yw;\n return 130.0 * dot(m, g);\n}\n";
|
||||
|
||||
var NoisyImage = {
|
||||
extends: Image,
|
||||
props: {
|
||||
widthSegments: { type: Number, default: 20 },
|
||||
heightSegments: { type: Number, default: 20 },
|
||||
timeCoef: { type: Number, default: 0.001 },
|
||||
noiseCoef: { type: Number, default: 1 },
|
||||
zCoef: { type: Number, default: 5 },
|
||||
dispCoef: { type: Number, default: 0.05 },
|
||||
},
|
||||
setup: function setup(props) {
|
||||
// uniforms
|
||||
var uTime = { value: 0 };
|
||||
var uNoiseCoef = { value: props.noiseCoef };
|
||||
watch(function () { return props.noiseCoef; }, function (value) { uNoiseCoef.value = value; });
|
||||
var uZCoef = { value: props.zCoef };
|
||||
watch(function () { return props.zCoef; }, function (value) { uZCoef.value = value; });
|
||||
var uDispCoef = { value: props.dispCoef };
|
||||
watch(function () { return props.dispCoef; }, function (value) { uDispCoef.value = value; });
|
||||
|
||||
return {
|
||||
uTime: uTime, uNoiseCoef: uNoiseCoef, uZCoef: uZCoef, uDispCoef: uDispCoef,
|
||||
};
|
||||
},
|
||||
mounted: function mounted() {
|
||||
this.startTime = Date.now();
|
||||
this.three.onBeforeRender(this.updateTime);
|
||||
},
|
||||
unmounted: function unmounted() {
|
||||
this.three.offBeforeRender(this.updateTime);
|
||||
},
|
||||
methods: {
|
||||
createGeometry: function createGeometry() {
|
||||
this.geometry = new PlaneBufferGeometry(1, 1, this.widthSegments, this.heightSegments);
|
||||
},
|
||||
createMaterial: function createMaterial() {
|
||||
var this$1 = this;
|
||||
|
||||
this.material = new MeshBasicMaterial({ side: DoubleSide, map: this.loadTexture() });
|
||||
this.material.onBeforeCompile = function (shader) {
|
||||
shader.uniforms.uTime = this$1.uTime;
|
||||
shader.uniforms.uNoiseCoef = this$1.uNoiseCoef;
|
||||
shader.uniforms.uZCoef = this$1.uZCoef;
|
||||
shader.uniforms.uDispCoef = this$1.uDispCoef;
|
||||
shader.vertexShader = "\n uniform float uTime;\n uniform float uNoiseCoef;\n uniform float uZCoef;\n varying float vNoise;\n " + snoise2 + "\n " + shader.vertexShader;
|
||||
|
||||
shader.vertexShader = shader.vertexShader.replace(
|
||||
'#include <begin_vertex>',
|
||||
" \n vec3 p = vec3(position * uNoiseCoef);\n p.x += uTime;\n vNoise = snoise(p.xy);\n vec3 transformed = vec3(position);\n transformed.z += vNoise * uZCoef;\n "
|
||||
);
|
||||
|
||||
shader.fragmentShader = "\n uniform float uDispCoef;\n varying float vNoise;\n " + shader.fragmentShader;
|
||||
|
||||
shader.fragmentShader = shader.fragmentShader.replace(
|
||||
'#include <map_fragment>',
|
||||
"\n vec4 texelColor = texture2D(map, vUv);\n vec4 dispTexel = texture2D(map, vUv + vec2(vNoise * uDispCoef, 0));\n texelColor.r = dispTexel.r;\n diffuseColor = texelColor;\n "
|
||||
);
|
||||
this$1.materialShader = shader;
|
||||
};
|
||||
},
|
||||
updateTime: function updateTime() {
|
||||
this.uTime.value = (Date.now() - this.startTime) * this.timeCoef;
|
||||
},
|
||||
},
|
||||
__hmrId: 'NoisyImage',
|
||||
};
|
||||
|
||||
var snoise3 = "\n//\n// Description : Array and textureless GLSL 2D/3D/4D simplex\n// noise functions.\n// Author : Ian McEwan, Ashima Arts.\n// Maintainer : ijm\n// Lastmod : 20110822 (ijm)\n// License : Copyright (C) 2011 Ashima Arts. All rights reserved.\n// Distributed under the MIT License. See LICENSE file.\n// https://github.com/ashima/webgl-noise\n//\n\nvec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }\nvec4 mod289(vec4 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }\nvec4 permute(vec4 x) { return mod289(((x*34.0)+1.0)*x); }\nvec4 taylorInvSqrt(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; }\n\nfloat snoise(vec3 v)\n{\n const vec2 C = vec2(1.0/6.0, 1.0/3.0) ;\n const vec4 D = vec4(0.0, 0.5, 1.0, 2.0);\n\n // First corner\n vec3 i = floor(v + dot(v, C.yyy) );\n vec3 x0 = v - i + dot(i, C.xxx) ;\n\n // Other corners\n vec3 g = step(x0.yzx, x0.xyz);\n vec3 l = 1.0 - g;\n vec3 i1 = min( g.xyz, l.zxy );\n vec3 i2 = max( g.xyz, l.zxy );\n\n vec3 x1 = x0 - i1 + C.xxx;\n vec3 x2 = x0 - i2 + C.yyy; // 2.0*C.x = 1/3 = C.y\n vec3 x3 = x0 - D.yyy; // -1.0+3.0*C.x = -0.5 = -D.y\n\n // Permutations\n i = mod289(i);\n vec4 p = permute( permute( permute(\n i.z + vec4(0.0, i1.z, i2.z, 1.0 ))\n + i.y + vec4(0.0, i1.y, i2.y, 1.0 ))\n + i.x + vec4(0.0, i1.x, i2.x, 1.0 ));\n\n // Gradients: 7x7 points over a square, mapped onto an octahedron.\n // The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294)\n float n_ = 0.142857142857; // 1.0/7.0\n vec3 ns = n_ * D.wyz - D.xzx;\n\n vec4 j = p - 49.0 * floor(p * ns.z * ns.z); // mod(p,7*7)\n\n vec4 x_ = floor(j * ns.z);\n vec4 y_ = floor(j - 7.0 * x_ ); // mod(j,N)\n\n vec4 x = x_ *ns.x + ns.yyyy;\n vec4 y = y_ *ns.x + ns.yyyy;\n vec4 h = 1.0 - abs(x) - abs(y);\n\n vec4 b0 = vec4( x.xy, y.xy );\n vec4 b1 = vec4( x.zw, y.zw );\n\n vec4 s0 = floor(b0)*2.0 + 1.0;\n vec4 s1 = floor(b1)*2.0 + 1.0;\n vec4 sh = -step(h, vec4(0.0));\n\n vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ;\n vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ;\n\n vec3 p0 = vec3(a0.xy,h.x);\n vec3 p1 = vec3(a0.zw,h.y);\n vec3 p2 = vec3(a1.xy,h.z);\n vec3 p3 = vec3(a1.zw,h.w);\n\n // Normalise gradients\n vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));\n p0 *= norm.x;\n p1 *= norm.y;\n p2 *= norm.z;\n p3 *= norm.w;\n\n // Mix final noise value\n vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);\n m = m * m;\n return 42.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1),\n dot(p2,x2), dot(p3,x3) ) );\n}\n";
|
||||
|
||||
var NoisyPlane = {
|
||||
extends: Plane,
|
||||
props: {
|
||||
timeCoef: { type: Number, default: 0.001 },
|
||||
noiseCoef: { type: Number, default: 5 },
|
||||
deltaCoef: { type: Number, default: 1 / 512 },
|
||||
displacementScale: { type: Number, default: 5 },
|
||||
},
|
||||
setup: function setup(props) {
|
||||
// uniforms
|
||||
var uTime = { value: 0 };
|
||||
var uNoiseCoef = { value: props.noiseCoef };
|
||||
watch(function () { return props.noiseCoef; }, function (value) { uNoiseCoef.value = value; });
|
||||
var uDelta = { value: new Vector2(props.deltaCoef, props.deltaCoef) };
|
||||
watch(function () { return props.deltaCoef; }, function (value) { uDelta.value.set(value, value); });
|
||||
|
||||
return {
|
||||
uTime: uTime, uNoiseCoef: uNoiseCoef, uDelta: uDelta,
|
||||
};
|
||||
},
|
||||
mounted: function mounted() {
|
||||
var this$1 = this;
|
||||
|
||||
this.init();
|
||||
|
||||
watch(function () { return this$1.displacementScale; }, function (value) { this$1.material.displacementScale = value; });
|
||||
|
||||
this.startTime = Date.now();
|
||||
this.three.onBeforeRender(this.update);
|
||||
},
|
||||
unmounted: function unmounted() {
|
||||
this.three.offBeforeRender(this.update);
|
||||
this.fsQuad.dispose();
|
||||
this.dispRT.dispose();
|
||||
this.dispMat.dispose();
|
||||
this.normRT.dispose();
|
||||
this.normMat.dispose();
|
||||
},
|
||||
methods: {
|
||||
init: function init() {
|
||||
this.fsQuad = new Pass.FullScreenQuad();
|
||||
|
||||
// displacement map
|
||||
this.dispRT = new WebGLRenderTarget(512, 512, { depthBuffer: false, stencilBuffer: false });
|
||||
this.dispMat = new ShaderMaterial$1({
|
||||
uniforms: {
|
||||
uTime: this.uTime,
|
||||
uNoiseCoef: this.uNoiseCoef,
|
||||
},
|
||||
vertexShader: "\n varying vec2 vUv;\n void main() {\n vUv = uv;\n // gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n gl_Position = vec4(position, 1.0);\n }\n ",
|
||||
fragmentShader: ("\n uniform float uTime;\n uniform float uNoiseCoef;\n varying vec2 vUv;\n " + snoise3 + "\n void main() {\n vec2 p = vec2(vUv * uNoiseCoef);\n float noise = (snoise(vec3(p.x, p.y, uTime)) + 1.0) / 2.0;\n gl_FragColor = vec4(noise, 0.0, 0.0, 1.0);\n }\n "),
|
||||
});
|
||||
|
||||
// normal map
|
||||
this.normRT = new WebGLRenderTarget(512, 512, { depthBuffer: false, stencilBuffer: false });
|
||||
this.normMat = new ShaderMaterial$1({
|
||||
uniforms: {
|
||||
dispMap: { value: this.dispRT.texture },
|
||||
delta: this.uDelta,
|
||||
},
|
||||
vertexShader: "\n varying vec2 vUv;\n void main() {\n vUv = uv;\n // gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n gl_Position = vec4(position, 1.0);\n }\n ",
|
||||
fragmentShader: "\n uniform sampler2D dispMap;\n uniform vec2 delta;\n varying vec2 vUv;\n void main() {\n // gl_FragColor = vec4(0.5, 0.5, 1.0, 0.0);\n float x1 = texture2D(dispMap, vec2(vUv.x - delta.x, vUv.y)).r;\n float x2 = texture2D(dispMap, vec2(vUv.x + delta.x, vUv.y)).r;\n float y1 = texture2D(dispMap, vec2(vUv.x, vUv.y - delta.y)).r;\n float y2 = texture2D(dispMap, vec2(vUv.x, vUv.y + delta.y)).r;\n gl_FragColor = vec4(0.5 + (x1 - x2), 0.5 + (y1 - y2), 1.0, 1.0);\n }\n ",
|
||||
});
|
||||
|
||||
this.material.displacementMap = this.dispRT.texture;
|
||||
this.material.displacementScale = this.displacementScale;
|
||||
this.material.normalMap = this.normRT.texture;
|
||||
this.material.normalMapType = ObjectSpaceNormalMap;
|
||||
// this.material.needsUpdate = true;
|
||||
},
|
||||
update: function update() {
|
||||
this.uTime.value = (Date.now() - this.startTime) * this.timeCoef;
|
||||
this.renderDisp();
|
||||
},
|
||||
renderDisp: function renderDisp() {
|
||||
this.renderMat(this.dispMat, this.dispRT);
|
||||
this.renderMat(this.normMat, this.normRT);
|
||||
},
|
||||
renderMat: function renderMat(mat, target) {
|
||||
var renderer = this.three.renderer;
|
||||
this.fsQuad.material = mat;
|
||||
var oldTarget = renderer.getRenderTarget();
|
||||
renderer.setRenderTarget(target);
|
||||
this.fsQuad.render(renderer);
|
||||
renderer.setRenderTarget(oldTarget);
|
||||
},
|
||||
},
|
||||
__hmrId: 'NoisyPlane',
|
||||
};
|
||||
|
||||
var snoise4 = "\n//\n// Description : Array and textureless GLSL 2D/3D/4D simplex\n// noise functions.\n// Author : Ian McEwan, Ashima Arts.\n// Maintainer : ijm\n// Lastmod : 20110822 (ijm)\n// License : Copyright (C) 2011 Ashima Arts. All rights reserved.\n// Distributed under the MIT License. See LICENSE file.\n// https://github.com/ashima/webgl-noise\n//\n\nvec4 mod289(vec4 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }\nfloat mod289(float x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }\nvec4 permute(vec4 x) { return mod289(((x*34.0)+1.0)*x); }\nfloat permute(float x) { return mod289(((x*34.0)+1.0)*x); }\nvec4 taylorInvSqrt(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; }\nfloat taylorInvSqrt(float r) { return 1.79284291400159 - 0.85373472095314 * r; }\n\nvec4 grad4(float j, vec4 ip)\n{\n const vec4 ones = vec4(1.0, 1.0, 1.0, -1.0);\n vec4 p,s;\n\n p.xyz = floor( fract (vec3(j) * ip.xyz) * 7.0) * ip.z - 1.0;\n p.w = 1.5 - dot(abs(p.xyz), ones.xyz);\n s = vec4(lessThan(p, vec4(0.0)));\n p.xyz = p.xyz + (s.xyz*2.0 - 1.0) * s.www;\n\n return p;\n}\n\n// (sqrt(5) - 1)/4 = F4, used once below\n#define F4 0.309016994374947451\n\nfloat snoise(vec4 v)\n{\n const vec4 C = vec4( 0.138196601125011, // (5 - sqrt(5))/20 G4\n 0.276393202250021, // 2 * G4\n 0.414589803375032, // 3 * G4\n -0.447213595499958); // -1 + 4 * G4\n\n // First corner\n vec4 i = floor(v + dot(v, vec4(F4)) );\n vec4 x0 = v - i + dot(i, C.xxxx);\n\n // Other corners\n\n // Rank sorting originally contributed by Bill Licea-Kane, AMD (formerly ATI)\n vec4 i0;\n vec3 isX = step( x0.yzw, x0.xxx );\n vec3 isYZ = step( x0.zww, x0.yyz );\n // i0.x = dot( isX, vec3( 1.0 ) );\n i0.x = isX.x + isX.y + isX.z;\n i0.yzw = 1.0 - isX;\n // i0.y += dot( isYZ.xy, vec2( 1.0 ) );\n i0.y += isYZ.x + isYZ.y;\n i0.zw += 1.0 - isYZ.xy;\n i0.z += isYZ.z;\n i0.w += 1.0 - isYZ.z;\n\n // i0 now contains the unique values 0,1,2,3 in each channel\n vec4 i3 = clamp( i0, 0.0, 1.0 );\n vec4 i2 = clamp( i0-1.0, 0.0, 1.0 );\n vec4 i1 = clamp( i0-2.0, 0.0, 1.0 );\n\n vec4 x1 = x0 - i1 + C.xxxx;\n vec4 x2 = x0 - i2 + C.yyyy;\n vec4 x3 = x0 - i3 + C.zzzz;\n vec4 x4 = x0 + C.wwww;\n\n // Permutations\n i = mod289(i);\n float j0 = permute( permute( permute( permute(i.w) + i.z) + i.y) + i.x);\n vec4 j1 = permute( permute( permute( permute (\n i.w + vec4(i1.w, i2.w, i3.w, 1.0 ))\n + i.z + vec4(i1.z, i2.z, i3.z, 1.0 ))\n + i.y + vec4(i1.y, i2.y, i3.y, 1.0 ))\n + i.x + vec4(i1.x, i2.x, i3.x, 1.0 ));\n\n // Gradients: 7x7x6 points over a cube, mapped onto a 4-cross polytope\n // 7*7*6 = 294, which is close to the ring size 17*17 = 289.\n vec4 ip = vec4(1.0/294.0, 1.0/49.0, 1.0/7.0, 0.0) ;\n\n vec4 p0 = grad4(j0, ip);\n vec4 p1 = grad4(j1.x, ip);\n vec4 p2 = grad4(j1.y, ip);\n vec4 p3 = grad4(j1.z, ip);\n vec4 p4 = grad4(j1.w, ip);\n\n // Normalise gradients\n vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));\n p0 *= norm.x;\n p1 *= norm.y;\n p2 *= norm.z;\n p3 *= norm.w;\n p4 *= taylorInvSqrt(dot(p4,p4));\n\n // Mix contributions from the five corners\n vec3 m0 = max(0.6 - vec3(dot(x0,x0), dot(x1,x1), dot(x2,x2)), 0.0);\n vec2 m1 = max(0.6 - vec2(dot(x3,x3), dot(x4,x4) ), 0.0);\n m0 = m0 * m0;\n m1 = m1 * m1;\n return 49.0 * ( dot(m0*m0, vec3( dot( p0, x0 ), dot( p1, x1 ), dot( p2, x2 )))\n + dot(m1*m1, vec2( dot( p3, x3 ), dot( p4, x4 ) ) ) ) ;\n\n}\n";
|
||||
|
||||
var NoisySphere = {
|
||||
extends: Sphere,
|
||||
props: {
|
||||
radius: { type: Number, default: 20 },
|
||||
widthSegments: { type: Number, default: 128 },
|
||||
heightSegments: { type: Number, default: 128 },
|
||||
timeCoef: { type: Number, default: 0.001 },
|
||||
noiseCoef: { type: Number, default: 0.05 },
|
||||
dispCoef: { type: Number, default: 5 },
|
||||
},
|
||||
setup: function setup(props) {
|
||||
// uniforms
|
||||
var uTime = { value: 0 };
|
||||
var uNoiseCoef = { value: props.noiseCoef };
|
||||
watch(function () { return props.noiseCoef; }, function (value) { uNoiseCoef.value = value; });
|
||||
var uDispCoef = { value: props.dispCoef };
|
||||
watch(function () { return props.dispCoef; }, function (value) { uDispCoef.value = value; });
|
||||
|
||||
return {
|
||||
uTime: uTime, uNoiseCoef: uNoiseCoef, uDispCoef: uDispCoef,
|
||||
};
|
||||
},
|
||||
mounted: function mounted() {
|
||||
this.updateMaterial();
|
||||
|
||||
this.startTime = Date.now();
|
||||
this.three.onBeforeRender(this.updateTime);
|
||||
},
|
||||
unmounted: function unmounted() {
|
||||
this.three.offBeforeRender(this.updateTime);
|
||||
},
|
||||
methods: {
|
||||
updateMaterial: function updateMaterial() {
|
||||
var this$1 = this;
|
||||
|
||||
this.material.onBeforeCompile = function (shader) {
|
||||
shader.uniforms.uTime = this$1.uTime;
|
||||
shader.uniforms.uNoiseCoef = this$1.uNoiseCoef;
|
||||
shader.uniforms.uDispCoef = this$1.uDispCoef;
|
||||
shader.vertexShader = "\n uniform float uTime;\n uniform float uNoiseCoef;\n uniform float uDispCoef;\n varying float vNoise;\n " + snoise4 + "\n " + shader.vertexShader;
|
||||
|
||||
shader.vertexShader = shader.vertexShader.replace(
|
||||
'#include <begin_vertex>',
|
||||
"\n vec4 p = vec4(vec3(position * uNoiseCoef), uTime);\n vNoise = snoise(p);\n vec3 transformed = vec3(position);\n transformed += normalize(position) * vNoise * uDispCoef;\n "
|
||||
);
|
||||
this$1.materialShader = shader;
|
||||
};
|
||||
this.material.needsupdate = true;
|
||||
},
|
||||
updateTime: function updateTime() {
|
||||
this.uTime.value = (Date.now() - this.startTime) * this.timeCoef;
|
||||
},
|
||||
},
|
||||
__hmrId: 'NoisySphere',
|
||||
};
|
||||
|
||||
var NoisyText = {
|
||||
extends: Text,
|
||||
props: {
|
||||
timeCoef: { type: Number, default: 0.001 },
|
||||
noiseCoef: { type: Number, default: 0.015 },
|
||||
zCoef: { type: Number, default: 10 },
|
||||
},
|
||||
setup: function setup(props) {
|
||||
// uniforms
|
||||
var uTime = { value: 0 };
|
||||
var uNoiseCoef = { value: props.noiseCoef };
|
||||
watch(function () { return props.noiseCoef; }, function (value) { uNoiseCoef.value = value; });
|
||||
var uZCoef = { value: props.zCoef };
|
||||
watch(function () { return props.zCoef; }, function (value) { uZCoef.value = value; });
|
||||
|
||||
return {
|
||||
uTime: uTime, uNoiseCoef: uNoiseCoef, uZCoef: uZCoef,
|
||||
};
|
||||
},
|
||||
mounted: function mounted() {
|
||||
this.updateMaterial();
|
||||
|
||||
this.startTime = Date.now();
|
||||
this.three.onBeforeRender(this.updateTime);
|
||||
},
|
||||
unmounted: function unmounted() {
|
||||
this.three.offBeforeRender(this.updateTime);
|
||||
},
|
||||
methods: {
|
||||
updateMaterial: function updateMaterial() {
|
||||
var this$1 = this;
|
||||
|
||||
this.material.onBeforeCompile = function (shader) {
|
||||
shader.uniforms.uTime = this$1.uTime;
|
||||
shader.uniforms.uNoiseCoef = this$1.uNoiseCoef;
|
||||
shader.uniforms.uZCoef = this$1.uZCoef;
|
||||
shader.vertexShader = "\n uniform float uTime;\n uniform float uNoiseCoef;\n uniform float uZCoef;\n " + snoise2 + "\n " + shader.vertexShader;
|
||||
|
||||
shader.vertexShader = shader.vertexShader.replace(
|
||||
'#include <begin_vertex>',
|
||||
" \n vec3 p = vec3(position * uNoiseCoef);\n p.x += uTime;\n float noise = snoise(p.xy);\n vec3 transformed = vec3(position);\n transformed.z += noise * uZCoef;\n "
|
||||
);
|
||||
this$1.materialShader = shader;
|
||||
};
|
||||
this.material.needsupdate = true;
|
||||
},
|
||||
updateTime: function updateTime() {
|
||||
this.uTime.value = (Date.now() - this.startTime) * this.timeCoef;
|
||||
},
|
||||
},
|
||||
__hmrId: 'NoisyText',
|
||||
};
|
||||
|
||||
var AnimatedPlane = function AnimatedPlane(params) {
|
||||
var this$1 = this;
|
||||
|
||||
Object.entries(params).forEach(function (ref) {
|
||||
var key = ref[0];
|
||||
var value = ref[1];
|
||||
|
||||
this$1[key] = value;
|
||||
});
|
||||
|
||||
this.o3d = new Object3D();
|
||||
this.uProgress = { value: 0 };
|
||||
this.uvScale = new Vector2();
|
||||
|
||||
this.initMaterial();
|
||||
this.initPlane();
|
||||
};
|
||||
|
||||
AnimatedPlane.prototype.initMaterial = function initMaterial () {
|
||||
var this$1 = this;
|
||||
|
||||
this.material = new MeshBasicMaterial({
|
||||
side: DoubleSide,
|
||||
transparent: true,
|
||||
map: this.texture,
|
||||
onBeforeCompile: function (shader) {
|
||||
shader.uniforms.progress = this$1.uProgress;
|
||||
shader.uniforms.uvScale = { value: this$1.uvScale };
|
||||
shader.vertexShader = "\n uniform float progress;\n uniform vec2 uvScale;\n\n attribute vec3 offset;\n attribute vec3 rotation;\n attribute vec2 uvOffset;\n\n mat3 rotationMatrixXYZ(vec3 r)\n {\n float cx = cos(r.x);\n float sx = sin(r.x);\n float cy = cos(r.y);\n float sy = sin(r.y);\n float cz = cos(r.z);\n float sz = sin(r.z);\n\n return mat3(\n cy * cz, cx * sz + sx * sy * cz, sx * sz - cx * sy * cz,\n -cy * sz, cx * cz - sx * sy * sz, sx * cz + cx * sy * sz,\n sy, -sx * cy, cx * cy\n );\n }\n " + shader.vertexShader;
|
||||
|
||||
shader.vertexShader = shader.vertexShader.replace('#include <uv_vertex>', "\n #include <uv_vertex>\n vUv = vUv * uvScale + uvOffset;\n ");
|
||||
|
||||
shader.vertexShader = shader.vertexShader.replace('#include <project_vertex>', "\n mat3 rotMat = rotationMatrixXYZ(progress * rotation);\n transformed = rotMat * transformed;\n\n vec4 mvPosition = vec4(transformed, 1.0);\n #ifdef USE_INSTANCING\n mvPosition = instanceMatrix * mvPosition;\n #endif\n\n mvPosition.xyz += progress * offset;\n\n mvPosition = modelViewMatrix * mvPosition;\n gl_Position = projectionMatrix * mvPosition;\n ");
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
AnimatedPlane.prototype.initPlane = function initPlane () {
|
||||
var ref = this.screen;
|
||||
var width = ref.width;
|
||||
var wWidth = ref.wWidth;
|
||||
var wHeight = ref.wHeight;
|
||||
this.wSize = this.size * wWidth / width;
|
||||
this.nx = Math.ceil(wWidth / this.wSize) + 1;
|
||||
this.ny = Math.ceil(wHeight / this.wSize) + 1;
|
||||
this.icount = this.nx * this.ny;
|
||||
|
||||
this.initGeometry();
|
||||
this.initUV();
|
||||
this.initAnimAttributes();
|
||||
|
||||
if (this.imesh) {
|
||||
this.o3d.remove(this.imesh);
|
||||
}
|
||||
this.imesh = new InstancedMesh$1(this.bGeometry, this.material, this.icount);
|
||||
this.o3d.add(this.imesh);
|
||||
|
||||
var dummy = new Object3D();
|
||||
var index = 0;
|
||||
var x = -(wWidth - (wWidth - this.nx * this.wSize)) / 2 + this.dx;
|
||||
for (var i = 0; i < this.nx; i++) {
|
||||
var y = -(wHeight - (wHeight - this.ny * this.wSize)) / 2 + this.dy;
|
||||
for (var j = 0; j < this.ny; j++) {
|
||||
dummy.position.set(x, y, 0);
|
||||
dummy.updateMatrix();
|
||||
this.imesh.setMatrixAt(index++, dummy.matrix);
|
||||
y += this.wSize;
|
||||
}
|
||||
x += this.wSize;
|
||||
}
|
||||
};
|
||||
|
||||
AnimatedPlane.prototype.initGeometry = function initGeometry () {
|
||||
// square
|
||||
var geometry = new Geometry$1();
|
||||
geometry.vertices.push(new Vector3(0, 0, 0));
|
||||
geometry.vertices.push(new Vector3(this.wSize, 0, 0));
|
||||
geometry.vertices.push(new Vector3(0, this.wSize, 0));
|
||||
geometry.vertices.push(new Vector3(this.wSize, this.wSize, 0));
|
||||
geometry.faces.push(new Face3(0, 2, 1));
|
||||
geometry.faces.push(new Face3(2, 3, 1));
|
||||
|
||||
geometry.faceVertexUvs[0].push([
|
||||
new Vector2(0, 0),
|
||||
new Vector2(0, 1),
|
||||
new Vector2(1, 0) ]);
|
||||
geometry.faceVertexUvs[0].push([
|
||||
new Vector2(0, 1),
|
||||
new Vector2(1, 1),
|
||||
new Vector2(1, 0) ]);
|
||||
|
||||
// geometry.computeFaceNormals();
|
||||
// geometry.computeVertexNormals();
|
||||
|
||||
// center
|
||||
this.dx = this.wSize / 2;
|
||||
this.dy = this.wSize / 2;
|
||||
geometry.translate(-this.dx, -this.dy, 0);
|
||||
|
||||
this.bGeometry = geometry.toBufferGeometry();
|
||||
};
|
||||
|
||||
AnimatedPlane.prototype.initAnimAttributes = function initAnimAttributes () {
|
||||
var rnd = MathUtils.randFloat;
|
||||
var rndFS = MathUtils.randFloatSpread;
|
||||
var v3 = new Vector3();
|
||||
|
||||
var offsets = new Float32Array(this.icount * 3);
|
||||
for (var i = 0; i < offsets.length; i += 3) {
|
||||
if (this.anim === 1) { v3.set(rndFS(10), rnd(50, 100), rnd(20, 50)).toArray(offsets, i); }
|
||||
else { v3.set(rndFS(20), rndFS(20), rnd(20, 200)).toArray(offsets, i); }
|
||||
}
|
||||
this.bGeometry.setAttribute('offset', new InstancedBufferAttribute(offsets, 3));
|
||||
|
||||
var rotations = new Float32Array(this.icount * 3);
|
||||
var angle = Math.PI * 4;
|
||||
for (var i$1 = 0; i$1 < rotations.length; i$1 += 3) {
|
||||
rotations[i$1] = rndFS(angle);
|
||||
rotations[i$1 + 1] = rndFS(angle);
|
||||
rotations[i$1 + 2] = rndFS(angle);
|
||||
}
|
||||
this.bGeometry.setAttribute('rotation', new InstancedBufferAttribute(rotations, 3));
|
||||
};
|
||||
|
||||
AnimatedPlane.prototype.initUV = function initUV () {
|
||||
var ratio = this.nx / this.ny;
|
||||
var tRatio = this.texture.image.width / this.texture.image.height;
|
||||
if (ratio > tRatio) { this.uvScale.set(1 / this.nx, (tRatio / ratio) / this.ny); }
|
||||
else { this.uvScale.set((ratio / tRatio) / this.nx, 1 / this.ny); }
|
||||
var nW = this.uvScale.x * this.nx;
|
||||
var nH = this.uvScale.y * this.ny;
|
||||
|
||||
var v2 = new Vector2();
|
||||
var uvOffsets = new Float32Array(this.icount * 2);
|
||||
for (var i = 0; i < this.nx; i++) {
|
||||
for (var j = 0; j < this.ny; j++) {
|
||||
v2.set(
|
||||
this.uvScale.x * i + (1 - nW) / 2,
|
||||
this.uvScale.y * j + (1 - nH) / 2
|
||||
).toArray(uvOffsets, (i * this.ny + j) * 2);
|
||||
}
|
||||
}
|
||||
this.bGeometry.setAttribute('uvOffset', new InstancedBufferAttribute(uvOffsets, 2));
|
||||
};
|
||||
|
||||
AnimatedPlane.prototype.setTexture = function setTexture (texture) {
|
||||
this.texture = texture;
|
||||
this.material.map = texture;
|
||||
this.initUV();
|
||||
};
|
||||
|
||||
AnimatedPlane.prototype.resize = function resize () {
|
||||
this.initPlane();
|
||||
};
|
||||
|
||||
function useTextures() {
|
||||
var obj = {
|
||||
loader: new TextureLoader(),
|
||||
count: 0,
|
||||
textures: [],
|
||||
loadProgress: 0,
|
||||
loadTextures: loadTextures,
|
||||
dispose: dispose,
|
||||
};
|
||||
return obj;
|
||||
|
||||
function loadTextures(images, cb) {
|
||||
obj.count = images.length;
|
||||
obj.textures.splice(0);
|
||||
obj.loadProgress = 0;
|
||||
Promise.all(images.map(loadTexture)).then(cb);
|
||||
}
|
||||
function loadTexture(img, index) {
|
||||
return new Promise(function (resolve) {
|
||||
obj.loader.load(
|
||||
img.src,
|
||||
function (texture) {
|
||||
obj.loadProgress += 1 / obj.count;
|
||||
obj.textures[index] = texture;
|
||||
resolve(texture);
|
||||
}
|
||||
);
|
||||
});
|
||||
}
|
||||
function dispose() {
|
||||
obj.textures.forEach(function (t) { return t.dispose(); });
|
||||
}
|
||||
}
|
||||
|
||||
var script = {
|
||||
props: {
|
||||
images: Array,
|
||||
events: { type: Object, default: function () { return { wheel: true, click: true, keyup: true }; } },
|
||||
},
|
||||
setup: function setup() {
|
||||
var loader = useTextures();
|
||||
return {
|
||||
loader: loader,
|
||||
progress: 0,
|
||||
targetProgress: 0,
|
||||
};
|
||||
},
|
||||
mounted: function mounted() {
|
||||
this.three = this.$refs.renderer.three;
|
||||
|
||||
if (this.images.length < 2) {
|
||||
console.error('This slider needs at least 2 images.');
|
||||
} else {
|
||||
this.loader.loadTextures(this.images, this.init);
|
||||
}
|
||||
},
|
||||
unmounted: function unmounted() {
|
||||
this.loader.dispose();
|
||||
var domElement = this.three.renderer.domElement;
|
||||
domElement.removeEventListener('click', this.onClick);
|
||||
domElement.removeEventListener('wheel', this.onWheel);
|
||||
document.removeEventListener('keyup', this.onKeyup);
|
||||
},
|
||||
methods: {
|
||||
init: function init() {
|
||||
this.initScene();
|
||||
|
||||
gsap.fromTo(this.plane1.uProgress,
|
||||
{
|
||||
value: -2,
|
||||
},
|
||||
{
|
||||
value: 0,
|
||||
duration: 2.5,
|
||||
ease: Power4.easeOut,
|
||||
}
|
||||
);
|
||||
|
||||
var domElement = this.three.renderer.domElement;
|
||||
if (this.events.click) { domElement.addEventListener('click', this.onClick); }
|
||||
if (this.events.wheel) { domElement.addEventListener('wheel', this.onWheel); }
|
||||
if (this.events.keyup) { document.addEventListener('keyup', this.onKeyup); }
|
||||
this.three.onBeforeRender(this.updateProgress);
|
||||
this.three.onAfterResize(this.onResize);
|
||||
},
|
||||
initScene: function initScene() {
|
||||
var renderer = this.three.renderer;
|
||||
var scene = this.$refs.scene.scene;
|
||||
|
||||
this.plane1 = new AnimatedPlane({
|
||||
renderer: renderer, screen: this.three.size,
|
||||
size: 10,
|
||||
anim: 1,
|
||||
texture: this.loader.textures[0],
|
||||
});
|
||||
|
||||
this.plane2 = new AnimatedPlane({
|
||||
renderer: renderer, screen: this.three.size,
|
||||
size: 10,
|
||||
anim: 2,
|
||||
texture: this.loader.textures[1],
|
||||
});
|
||||
|
||||
this.setPlanesProgress(0);
|
||||
this.planes = new Object3D();
|
||||
this.planes.add(this.plane1.o3d);
|
||||
this.planes.add(this.plane2.o3d);
|
||||
scene.add(this.planes);
|
||||
},
|
||||
onResize: function onResize() {
|
||||
this.plane1.resize();
|
||||
this.plane2.resize();
|
||||
},
|
||||
onWheel: function onWheel(e) {
|
||||
// e.preventDefault();
|
||||
if (e.deltaY > 0) {
|
||||
this.setTargetProgress(this.targetProgress + 1 / 20);
|
||||
} else {
|
||||
this.setTargetProgress(this.targetProgress - 1 / 20);
|
||||
}
|
||||
},
|
||||
onClick: function onClick(e) {
|
||||
if (e.clientY < this.three.size.height / 2) {
|
||||
this.navPrevious();
|
||||
} else {
|
||||
this.navNext();
|
||||
}
|
||||
},
|
||||
onKeyup: function onKeyup(e) {
|
||||
if (e.keyCode === 37 || e.keyCode === 38) {
|
||||
this.navPrevious();
|
||||
} else if (e.keyCode === 39 || e.keyCode === 40) {
|
||||
this.navNext();
|
||||
}
|
||||
},
|
||||
navNext: function navNext() {
|
||||
if (Number.isInteger(this.targetProgress)) { this.setTargetProgress(this.targetProgress + 1); }
|
||||
else { this.setTargetProgress(Math.ceil(this.targetProgress)); }
|
||||
},
|
||||
navPrevious: function navPrevious() {
|
||||
if (Number.isInteger(this.targetProgress)) { this.setTargetProgress(this.targetProgress - 1); }
|
||||
else { this.setTargetProgress(Math.floor(this.targetProgress)); }
|
||||
},
|
||||
setTargetProgress: function setTargetProgress(value) {
|
||||
this.targetProgress = value;
|
||||
if (this.targetProgress < 0) {
|
||||
this.progress += this.images.length;
|
||||
this.targetProgress += this.images.length;
|
||||
}
|
||||
},
|
||||
updateProgress: function updateProgress() {
|
||||
var progress1 = lerp(this.progress, this.targetProgress, 0.1);
|
||||
var pdiff = progress1 - this.progress;
|
||||
if (pdiff === 0) { return; }
|
||||
|
||||
var p0 = this.progress % 1;
|
||||
var p1 = progress1 % 1;
|
||||
if ((pdiff > 0 && p1 < p0) || (pdiff < 0 && p0 < p1)) {
|
||||
var i = Math.floor(progress1) % this.images.length;
|
||||
var j = (i + 1) % this.images.length;
|
||||
this.plane1.setTexture(this.loader.textures[i]);
|
||||
this.plane2.setTexture(this.loader.textures[j]);
|
||||
}
|
||||
|
||||
this.progress = progress1;
|
||||
this.setPlanesProgress(this.progress % 1);
|
||||
},
|
||||
setPlanesProgress: function setPlanesProgress(progress) {
|
||||
this.plane1.uProgress.value = progress;
|
||||
this.plane2.uProgress.value = -1 + progress;
|
||||
this.plane1.material.opacity = 1 - progress;
|
||||
this.plane2.material.opacity = progress;
|
||||
this.plane1.o3d.position.z = progress;
|
||||
this.plane2.o3d.position.z = progress - 1;
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
function render(_ctx, _cache, $props, $setup, $data, $options) {
|
||||
var _component_Camera = resolveComponent("Camera");
|
||||
var _component_Scene = resolveComponent("Scene");
|
||||
var _component_Renderer = resolveComponent("Renderer");
|
||||
|
||||
return (openBlock(), createBlock(_component_Renderer, {
|
||||
ref: "renderer",
|
||||
antialias: ""
|
||||
}, {
|
||||
default: withCtx(function () { return [
|
||||
createVNode(_component_Camera, {
|
||||
ref: "camera",
|
||||
position: { z: 150 }
|
||||
}, null, 512 /* NEED_PATCH */),
|
||||
createVNode(_component_Scene, { ref: "scene" }, null, 512 /* NEED_PATCH */)
|
||||
]; }),
|
||||
_: 1 /* STABLE */
|
||||
}, 512 /* NEED_PATCH */))
|
||||
}
|
||||
|
||||
script.render = render;
|
||||
script.__file = "src/components/sliders/Slider1.vue";
|
||||
|
||||
function ZoomBlurImage(three) {
|
||||
var geometry, material, mesh;
|
||||
|
||||
var uMap = { value: null };
|
||||
var uCenter = { value: new Vector2(0.5, 0.5) };
|
||||
var uStrength = { value: 0 };
|
||||
var uUVOffset = { value: new Vector2(0, 0) };
|
||||
var uUVScale = { value: new Vector2(1, 1) };
|
||||
|
||||
init();
|
||||
|
||||
return { geometry: geometry, material: material, mesh: mesh, uCenter: uCenter, uStrength: uStrength, setMap: setMap, updateUV: updateUV };
|
||||
|
||||
function init() {
|
||||
geometry = new PlaneBufferGeometry(2, 2, 1, 1);
|
||||
|
||||
material = new ShaderMaterial$1({
|
||||
transparent: true,
|
||||
uniforms: {
|
||||
map: uMap,
|
||||
center: uCenter,
|
||||
strength: uStrength,
|
||||
uvOffset: uUVOffset,
|
||||
uvScale: uUVScale,
|
||||
},
|
||||
vertexShader: "\n varying vec2 vUv;\n void main() {\n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }\n ",
|
||||
// adapted from https://github.com/evanw/glfx.js
|
||||
fragmentShader: "\n uniform sampler2D map;\n uniform vec2 center;\n uniform float strength;\n uniform vec2 uvOffset;\n uniform vec2 uvScale;\n varying vec2 vUv;\n\n float random(vec3 scale, float seed) {\n /* use the fragment position for a different seed per-pixel */\n return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);\n }\n \n void main() {\n vec2 tUv = vUv * uvScale + uvOffset;\n if (abs(strength) > 0.001) {\n vec4 color = vec4(0.0);\n float total = 0.0;\n vec2 toCenter = center * uvScale + uvOffset - tUv;\n \n /* randomize the lookup values to hide the fixed number of samples */\n float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);\n \n for (float t = 0.0; t <= 20.0; t++) {\n float percent = (t + offset) / 20.0;\n float weight = 2.0 * (percent - percent * percent);\n vec4 texel = texture2D(map, tUv + toCenter * percent * strength);\n\n /* switch to pre-multiplied alpha to correctly blur transparent images */\n texel.rgb *= texel.a;\n\n color += texel * weight;\n total += weight;\n }\n\n gl_FragColor = color / total;\n\n /* switch back from pre-multiplied alpha */\n gl_FragColor.rgb /= gl_FragColor.a + 0.00001;\n gl_FragColor.a = 1.0 - abs(strength);\n } else {\n gl_FragColor = texture2D(map, tUv);\n }\n }\n ",
|
||||
});
|
||||
|
||||
mesh = new Mesh$1(geometry, material);
|
||||
}
|
||||
|
||||
function setMap(value) {
|
||||
uMap.value = value;
|
||||
updateUV();
|
||||
}
|
||||
|
||||
function updateUV() {
|
||||
var ratio = three.size.ratio;
|
||||
var iRatio = uMap.value.image.width / uMap.value.image.height;
|
||||
uUVOffset.value.set(0, 0);
|
||||
uUVScale.value.set(1, 1);
|
||||
if (iRatio > ratio) {
|
||||
uUVScale.value.x = ratio / iRatio;
|
||||
uUVOffset.value.x = (1 - uUVScale.value.x) / 2;
|
||||
} else {
|
||||
uUVScale.value.y = iRatio / ratio;
|
||||
uUVOffset.value.y = (1 - uUVScale.value.y) / 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var script$1 = {
|
||||
props: {
|
||||
images: Array,
|
||||
events: { type: Object, default: function () { return { wheel: true, click: true, keyup: true }; } },
|
||||
},
|
||||
setup: function setup() {
|
||||
var center = new Vector2();
|
||||
var loader = useTextures();
|
||||
|
||||
return {
|
||||
loader: loader,
|
||||
center: center,
|
||||
progress: 0,
|
||||
targetProgress: 0,
|
||||
};
|
||||
},
|
||||
mounted: function mounted() {
|
||||
this.three = this.$refs.renderer.three;
|
||||
|
||||
if (this.images.length < 2) {
|
||||
console.error('This slider needs at least 2 images.');
|
||||
} else {
|
||||
this.loader.loadTextures(this.images, this.init);
|
||||
}
|
||||
},
|
||||
unmounted: function unmounted() {
|
||||
this.loader.dispose();
|
||||
var domElement = this.three.renderer.domElement;
|
||||
domElement.removeEventListener('click', this.onClick);
|
||||
domElement.removeEventListener('wheel', this.onWheel);
|
||||
document.removeEventListener('keyup', this.onKeyup);
|
||||
},
|
||||
methods: {
|
||||
init: function init() {
|
||||
this.initScene();
|
||||
gsap.fromTo(this.image1.uStrength,
|
||||
{
|
||||
value: -2,
|
||||
},
|
||||
{
|
||||
value: 0,
|
||||
duration: 2.5,
|
||||
ease: Power4.easeOut,
|
||||
}
|
||||
);
|
||||
|
||||
var domElement = this.three.renderer.domElement;
|
||||
if (this.events.click) { domElement.addEventListener('click', this.onClick); }
|
||||
if (this.events.wheel) { domElement.addEventListener('wheel', this.onWheel); }
|
||||
if (this.events.keyup) { document.addEventListener('keyup', this.onKeyup); }
|
||||
this.three.onBeforeRender(this.animate);
|
||||
this.three.onAfterResize(this.onResize);
|
||||
},
|
||||
initScene: function initScene() {
|
||||
var scene = this.$refs.scene.scene;
|
||||
|
||||
this.image1 = new ZoomBlurImage(this.three);
|
||||
this.image1.setMap(this.loader.textures[0]);
|
||||
this.image2 = new ZoomBlurImage(this.three);
|
||||
this.image2.setMap(this.loader.textures[1]);
|
||||
this.setImagesProgress(0);
|
||||
|
||||
scene.add(this.image1.mesh);
|
||||
scene.add(this.image2.mesh);
|
||||
},
|
||||
animate: function animate() {
|
||||
var ref = this.three;
|
||||
var mouse = ref.mouse;
|
||||
this.center.copy(mouse).divideScalar(2).addScalar(0.5);
|
||||
lerpv2(this.image1.uCenter.value, this.center, 0.1);
|
||||
lerpv2(this.image2.uCenter.value, this.center, 0.1);
|
||||
|
||||
this.updateProgress();
|
||||
},
|
||||
onResize: function onResize() {
|
||||
this.image1.updateUV();
|
||||
this.image2.updateUV();
|
||||
},
|
||||
onWheel: function onWheel(e) {
|
||||
// e.preventDefault();
|
||||
if (e.deltaY > 0) {
|
||||
this.setTargetProgress(this.targetProgress + 1 / 20);
|
||||
} else {
|
||||
this.setTargetProgress(this.targetProgress - 1 / 20);
|
||||
}
|
||||
},
|
||||
onClick: function onClick(e) {
|
||||
if (e.clientY < this.three.size.height / 2) {
|
||||
this.navPrevious();
|
||||
} else {
|
||||
this.navNext();
|
||||
}
|
||||
},
|
||||
onKeyup: function onKeyup(e) {
|
||||
if (e.keyCode === 37 || e.keyCode === 38) {
|
||||
this.navPrevious();
|
||||
} else if (e.keyCode === 39 || e.keyCode === 40) {
|
||||
this.navNext();
|
||||
}
|
||||
},
|
||||
navNext: function navNext() {
|
||||
if (Number.isInteger(this.targetProgress)) { this.setTargetProgress(this.targetProgress + 1); }
|
||||
else { this.setTargetProgress(Math.ceil(this.targetProgress)); }
|
||||
},
|
||||
navPrevious: function navPrevious() {
|
||||
if (Number.isInteger(this.targetProgress)) { this.setTargetProgress(this.targetProgress - 1); }
|
||||
else { this.setTargetProgress(Math.floor(this.targetProgress)); }
|
||||
},
|
||||
setTargetProgress: function setTargetProgress(value) {
|
||||
this.targetProgress = value;
|
||||
if (this.targetProgress < 0) {
|
||||
this.progress += this.images.length;
|
||||
this.targetProgress += this.images.length;
|
||||
}
|
||||
},
|
||||
updateProgress: function updateProgress() {
|
||||
var progress1 = lerp(this.progress, this.targetProgress, 0.1);
|
||||
var pdiff = progress1 - this.progress;
|
||||
if (pdiff === 0) { return; }
|
||||
|
||||
var p0 = this.progress % 1;
|
||||
var p1 = progress1 % 1;
|
||||
if ((pdiff > 0 && p1 < p0) || (pdiff < 0 && p0 < p1)) {
|
||||
var i = Math.floor(progress1) % this.images.length;
|
||||
var j = (i + 1) % this.images.length;
|
||||
this.image1.setMap(this.loader.textures[i]);
|
||||
this.image2.setMap(this.loader.textures[j]);
|
||||
}
|
||||
|
||||
this.progress = progress1;
|
||||
this.setImagesProgress(this.progress % 1);
|
||||
},
|
||||
setImagesProgress: function setImagesProgress(progress) {
|
||||
this.image1.uStrength.value = progress;
|
||||
this.image2.uStrength.value = -1 + progress;
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
function render$1(_ctx, _cache, $props, $setup, $data, $options) {
|
||||
var _component_OrthographicCamera = resolveComponent("OrthographicCamera");
|
||||
var _component_Scene = resolveComponent("Scene");
|
||||
var _component_Renderer = resolveComponent("Renderer");
|
||||
|
||||
return (openBlock(), createBlock(_component_Renderer, {
|
||||
ref: "renderer",
|
||||
antialias: "",
|
||||
"mouse-move": ""
|
||||
}, {
|
||||
default: withCtx(function () { return [
|
||||
createVNode(_component_OrthographicCamera, {
|
||||
ref: "camera",
|
||||
position: { z: 10 }
|
||||
}, null, 512 /* NEED_PATCH */),
|
||||
createVNode(_component_Scene, { ref: "scene" }, null, 512 /* NEED_PATCH */)
|
||||
]; }),
|
||||
_: 1 /* STABLE */
|
||||
}, 512 /* NEED_PATCH */))
|
||||
}
|
||||
|
||||
script$1.render = render$1;
|
||||
script$1.__file = "src/components/sliders/Slider2.vue";
|
||||
|
||||
var script$2 = {
|
||||
props: {
|
||||
src: String,
|
||||
cameraPosition: Object,
|
||||
},
|
||||
mounted: function mounted() {
|
||||
var this$1 = this;
|
||||
|
||||
this.renderer = this.$refs.renderer;
|
||||
|
||||
var loader = new GLTFLoader();
|
||||
loader.load(this.src, function (gltf) {
|
||||
this$1.renderer.three.scene.add(gltf.scene);
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
function render$2(_ctx, _cache, $props, $setup, $data, $options) {
|
||||
var _component_Camera = resolveComponent("Camera");
|
||||
var _component_Scene = resolveComponent("Scene");
|
||||
var _component_Renderer = resolveComponent("Renderer");
|
||||
|
||||
return (openBlock(), createBlock(_component_Renderer, {
|
||||
ref: "renderer",
|
||||
"orbit-ctrl": { enableDamping: true, dampingFactor: 0.05 }
|
||||
}, {
|
||||
default: withCtx(function () { return [
|
||||
createVNode(_component_Camera, {
|
||||
ref: "camera",
|
||||
position: $props.cameraPosition
|
||||
}, null, 8 /* PROPS */, ["position"]),
|
||||
createVNode(_component_Scene, null, {
|
||||
default: withCtx(function () { return [
|
||||
renderSlot(_ctx.$slots, "default")
|
||||
]; }),
|
||||
_: 3 /* FORWARDED */
|
||||
})
|
||||
]; }),
|
||||
_: 1 /* STABLE */
|
||||
}, 8 /* PROPS */, ["orbit-ctrl"]))
|
||||
}
|
||||
|
||||
script$2.render = render$2;
|
||||
script$2.__file = "src/components/viewers/GLTFViewer.vue";
|
||||
|
||||
var TROIS = /*#__PURE__*/Object.freeze({
|
||||
__proto__: null,
|
||||
Renderer: Renderer,
|
||||
@ -3716,13 +2825,6 @@ var TROIS = /*#__PURE__*/Object.freeze({
|
||||
TiltShiftPass: TiltShiftPass,
|
||||
UnrealBloomPass: UnrealBloomPass,
|
||||
ZoomBlurPass: ZoomBlurPass,
|
||||
NoisyImage: NoisyImage,
|
||||
NoisyPlane: NoisyPlane,
|
||||
NoisySphere: NoisySphere,
|
||||
NoisyText: NoisyText,
|
||||
Slider1: script,
|
||||
Slider2: script$1,
|
||||
GLTFViewer: script$2,
|
||||
setFromProp: setFromProp,
|
||||
propsValues: propsValues,
|
||||
lerp: lerp,
|
||||
@ -3822,5 +2924,5 @@ var TroisJSVuePlugin = {
|
||||
},
|
||||
};
|
||||
|
||||
export { AmbientLight, BasicMaterial, BokehPass, Box, BoxGeometry, PerspectiveCamera as Camera, Circle, CircleGeometry, Cone, ConeGeometry, CubeTexture, Cylinder, CylinderGeometry, DirectionalLight, Dodecahedron, DodecahedronGeometry, EffectComposer, FXAAPass, FilmPass, script$2 as GLTFViewer, Gem, Group, HalftonePass, Icosahedron, IcosahedronGeometry, Image, InstancedMesh, LambertMaterial, Lathe, LatheGeometry, MatcapMaterial, Mesh, MirrorMesh, NoisyImage, NoisyPlane, NoisySphere, NoisyText, Octahedron, OctahedronGeometry, OrthographicCamera, PerspectiveCamera, PhongMaterial, PhysicalMaterial, Plane, PointLight, Polyhedron, PolyhedronGeometry, RefractionMesh, RenderPass, Renderer, Ring, RingGeometry, SMAAPass, Scene, script as Slider1, script$1 as Slider2, Sphere, SphereGeometry, SpotLight, Sprite, StandardMaterial, SubSurfaceMaterial, Tetrahedron, TetrahedronGeometry, Text, Texture, TiltShiftPass, ToonMaterial, Torus, TorusGeometry, TorusKnot, TorusKnotGeometry, TroisJSVuePlugin, Tube, TubeGeometry, UnrealBloomPass, ZoomBlurPass, getMatcapUrl, lerp, lerpv2, lerpv3, limit, propsValues, setFromProp };
|
||||
export { AmbientLight, BasicMaterial, BokehPass, Box, BoxGeometry, PerspectiveCamera as Camera, Circle, CircleGeometry, Cone, ConeGeometry, CubeTexture, Cylinder, CylinderGeometry, DirectionalLight, Dodecahedron, DodecahedronGeometry, EffectComposer, FXAAPass, FilmPass, Gem, Group, HalftonePass, Icosahedron, IcosahedronGeometry, Image, InstancedMesh, LambertMaterial, Lathe, LatheGeometry, MatcapMaterial, Mesh, MirrorMesh, Octahedron, OctahedronGeometry, OrthographicCamera, PerspectiveCamera, PhongMaterial, PhysicalMaterial, Plane, PointLight, Polyhedron, PolyhedronGeometry, RefractionMesh, RenderPass, Renderer, Ring, RingGeometry, SMAAPass, Scene, Sphere, SphereGeometry, SpotLight, Sprite, StandardMaterial, SubSurfaceMaterial, Tetrahedron, TetrahedronGeometry, Text, Texture, TiltShiftPass, ToonMaterial, Torus, TorusGeometry, TorusKnot, TorusKnotGeometry, TroisJSVuePlugin, Tube, TubeGeometry, UnrealBloomPass, ZoomBlurPass, getMatcapUrl, lerp, lerpv2, lerpv3, limit, propsValues, setFromProp };
|
||||
//# sourceMappingURL=trois.module.cdn.js.map
|
||||
|
||||
File diff suppressed because one or more lines are too long
2
build/trois.module.cdn.min.js
vendored
2
build/trois.module.cdn.min.js
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,5 +1,5 @@
|
||||
import { h, toRef, watch, inject, resolveComponent, openBlock, createBlock, withCtx, createVNode, renderSlot } from 'vue';
|
||||
import { Vector2, Vector3, Plane as Plane$1, Raycaster, WebGLRenderer, OrthographicCamera as OrthographicCamera$1, PerspectiveCamera as PerspectiveCamera$1, Group as Group$1, Scene as Scene$1, Color, BoxBufferGeometry, CircleBufferGeometry, ConeBufferGeometry, CylinderBufferGeometry, DodecahedronBufferGeometry, IcosahedronBufferGeometry, LatheBufferGeometry, OctahedronBufferGeometry, PolyhedronBufferGeometry, RingBufferGeometry, SphereBufferGeometry, TetrahedronBufferGeometry, TorusBufferGeometry, TorusKnotBufferGeometry, Curve, TubeBufferGeometry, AmbientLight as AmbientLight$1, DirectionalLight as DirectionalLight$1, PointLight as PointLight$1, SpotLight as SpotLight$1, FrontSide, MeshBasicMaterial, MeshLambertMaterial, TextureLoader, MeshMatcapMaterial, MeshPhongMaterial, MeshStandardMaterial, MeshPhysicalMaterial, ShaderChunk, UniformsUtils, ShaderLib, ShaderMaterial as ShaderMaterial$1, MeshToonMaterial, CubeTextureLoader, CubeRefractionMapping, Mesh as Mesh$1, PlaneBufferGeometry, FontLoader, TextBufferGeometry, WebGLCubeRenderTarget, RGBFormat, LinearMipmapLinearFilter, CubeCamera, BackSide, DoubleSide, InstancedMesh as InstancedMesh$1, SpriteMaterial, Sprite as Sprite$1, WebGLRenderTarget, ObjectSpaceNormalMap, Object3D, Face3, MathUtils, InstancedBufferAttribute } from 'three';
|
||||
import { h, toRef, watch, inject } from 'vue';
|
||||
import { Vector2, Vector3, Plane as Plane$1, Raycaster, WebGLRenderer, OrthographicCamera as OrthographicCamera$1, PerspectiveCamera as PerspectiveCamera$1, Group as Group$1, Scene as Scene$1, Color, BoxBufferGeometry, CircleBufferGeometry, ConeBufferGeometry, CylinderBufferGeometry, DodecahedronBufferGeometry, IcosahedronBufferGeometry, LatheBufferGeometry, OctahedronBufferGeometry, PolyhedronBufferGeometry, RingBufferGeometry, SphereBufferGeometry, TetrahedronBufferGeometry, TorusBufferGeometry, TorusKnotBufferGeometry, Curve, TubeBufferGeometry, AmbientLight as AmbientLight$1, DirectionalLight as DirectionalLight$1, PointLight as PointLight$1, SpotLight as SpotLight$1, FrontSide, MeshBasicMaterial, MeshLambertMaterial, TextureLoader, MeshMatcapMaterial, MeshPhongMaterial, MeshStandardMaterial, MeshPhysicalMaterial, ShaderChunk, UniformsUtils, ShaderLib, ShaderMaterial as ShaderMaterial$1, MeshToonMaterial, CubeTextureLoader, CubeRefractionMapping, Mesh as Mesh$1, PlaneBufferGeometry, FontLoader, TextBufferGeometry, WebGLCubeRenderTarget, RGBFormat, LinearMipmapLinearFilter, CubeCamera, BackSide, DoubleSide, InstancedMesh as InstancedMesh$1, SpriteMaterial, Sprite as Sprite$1 } from 'three';
|
||||
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
|
||||
import { EffectComposer as EffectComposer$1 } from 'three/examples/jsm/postprocessing/EffectComposer.js';
|
||||
import { RenderPass as RenderPass$1 } from 'three/examples/jsm/postprocessing/RenderPass.js';
|
||||
@ -10,10 +10,6 @@ import { FXAAShader } from 'three/examples/jsm/shaders/FXAAShader.js';
|
||||
import { HalftonePass as HalftonePass$1 } from 'three/examples/jsm/postprocessing/HalftonePass.js';
|
||||
import { SMAAPass as SMAAPass$1 } from 'three/examples/jsm/postprocessing/SMAAPass.js';
|
||||
import { UnrealBloomPass as UnrealBloomPass$1 } from 'three/examples/jsm/postprocessing/UnrealBloomPass.js';
|
||||
import { Pass } from 'three/examples/jsm/postprocessing/Pass.js';
|
||||
import { gsap, Power4 } from 'gsap';
|
||||
import { Geometry as Geometry$1 } from 'three/examples/jsm/deprecated/Geometry.js';
|
||||
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
|
||||
|
||||
/**
|
||||
* Three.js helper
|
||||
@ -1326,7 +1322,7 @@ var ShaderMaterial = {
|
||||
var SubSurfaceMaterial = {
|
||||
extends: ShaderMaterial,
|
||||
props: {
|
||||
diffuse: { type: String, default: '#ffffff' },
|
||||
color: { type: String, default: '#ffffff' },
|
||||
thicknessColor: { type: String, default: '#ffffff' },
|
||||
thicknessDistortion: { type: Number, default: 0.4 },
|
||||
thicknessAmbient: { type: Number, default: 0.01 },
|
||||
@ -1341,15 +1337,18 @@ var SubSurfaceMaterial = {
|
||||
createMaterial: function createMaterial() {
|
||||
var params = SubsurfaceScatteringShader;
|
||||
var uniforms = UniformsUtils.clone(params.uniforms);
|
||||
|
||||
Object.entries(this.$props).forEach(function (ref) {
|
||||
var key = ref[0];
|
||||
var value = ref[1];
|
||||
|
||||
if (key === 'diffuse' || key === 'thicknessColor') {
|
||||
value = new Color(value);
|
||||
var _key = key, _value = value;
|
||||
if (['color', 'thicknessColor'].includes(key)) {
|
||||
if (key === 'color') { _key = 'diffuse'; }
|
||||
_value = new Color(value);
|
||||
}
|
||||
if (key !== 'id' && key !== 'transparent' && key !== 'vertexColors') {
|
||||
uniforms[key].value = value;
|
||||
if (!['id', 'transparent', 'vertexColors'].includes(key)) {
|
||||
uniforms[_key].value = _value;
|
||||
}
|
||||
});
|
||||
|
||||
@ -2028,8 +2027,8 @@ var TorusKnot = {
|
||||
props: {
|
||||
radius: { type: Number, default: 0.5 },
|
||||
tube: { type: Number, default: 0.4 },
|
||||
radialSegments: { type: Number, default: 64 },
|
||||
tubularSegments: { type: Number, default: 8 },
|
||||
tubularSegments: { type: Number, default: 64 },
|
||||
radialSegments: { type: Number, default: 8 },
|
||||
p: { type: Number, default: 2 },
|
||||
q: { type: Number, default: 3 },
|
||||
},
|
||||
@ -2047,7 +2046,7 @@ var TorusKnot = {
|
||||
},
|
||||
methods: {
|
||||
createGeometry: function createGeometry() {
|
||||
this.geometry = new TorusKnotBufferGeometry(this.radius, this.tube, this.radialSegments, this.tubularSegments, this.p, this.q);
|
||||
this.geometry = new TorusKnotBufferGeometry(this.radius, this.tube, this.tubularSegments, this.radialSegments, this.p, this.q);
|
||||
},
|
||||
},
|
||||
__hmrId: 'TorusKnot',
|
||||
@ -2755,895 +2754,6 @@ var ZoomBlurPass = {
|
||||
__hmrId: 'ZoomBlurPass',
|
||||
};
|
||||
|
||||
var snoise2 = "\n//\n// Description : Array and textureless GLSL 2D simplex noise function.\n// Author : Ian McEwan, Ashima Arts.\n// Maintainer : ijm\n// Lastmod : 20110822 (ijm)\n// License : Copyright (C) 2011 Ashima Arts. All rights reserved.\n// Distributed under the MIT License. See LICENSE file.\n// https://github.com/ashima/webgl-noise\n//\n\nvec3 mod289(vec3 x) {\n return x - floor(x * (1.0 / 289.0)) * 289.0;\n}\n\nvec2 mod289(vec2 x) {\n return x - floor(x * (1.0 / 289.0)) * 289.0;\n}\n\nvec3 permute(vec3 x) {\n return mod289(((x*34.0)+1.0)*x);\n}\n\nfloat snoise(vec2 v)\n{\n const vec4 C = vec4(0.211324865405187, // (3.0-sqrt(3.0))/6.0\n 0.366025403784439, // 0.5*(sqrt(3.0)-1.0)\n -0.577350269189626, // -1.0 + 2.0 * C.x\n 0.024390243902439); // 1.0 / 41.0\n // First corner\n vec2 i = floor(v + dot(v, C.yy) );\n vec2 x0 = v - i + dot(i, C.xx);\n\n // Other corners\n vec2 i1;\n i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);\n vec4 x12 = x0.xyxy + C.xxzz;\n x12.xy -= i1;\n\n // Permutations\n i = mod289(i); // Avoid truncation effects in permutation\n vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0 ))\n + i.x + vec3(0.0, i1.x, 1.0 ));\n\n vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy), dot(x12.zw,x12.zw)), 0.0);\n m = m*m ;\n m = m*m ;\n\n // Gradients: 41 points uniformly over a line, mapped onto a diamond.\n // The ring size 17*17 = 289 is close to a multiple of 41 (41*7 = 287)\n\n vec3 x = 2.0 * fract(p * C.www) - 1.0;\n vec3 h = abs(x) - 0.5;\n vec3 ox = floor(x + 0.5);\n vec3 a0 = x - ox;\n\n // Normalise gradients implicitly by scaling m\n // Approximation of: m *= inversesqrt( a0*a0 + h*h );\n m *= 1.79284291400159 - 0.85373472095314 * ( a0*a0 + h*h );\n\n // Compute final noise value at P\n vec3 g;\n g.x = a0.x * x0.x + h.x * x0.y;\n g.yz = a0.yz * x12.xz + h.yz * x12.yw;\n return 130.0 * dot(m, g);\n}\n";
|
||||
|
||||
var NoisyImage = {
|
||||
extends: Image,
|
||||
props: {
|
||||
widthSegments: { type: Number, default: 20 },
|
||||
heightSegments: { type: Number, default: 20 },
|
||||
timeCoef: { type: Number, default: 0.001 },
|
||||
noiseCoef: { type: Number, default: 1 },
|
||||
zCoef: { type: Number, default: 5 },
|
||||
dispCoef: { type: Number, default: 0.05 },
|
||||
},
|
||||
setup: function setup(props) {
|
||||
// uniforms
|
||||
var uTime = { value: 0 };
|
||||
var uNoiseCoef = { value: props.noiseCoef };
|
||||
watch(function () { return props.noiseCoef; }, function (value) { uNoiseCoef.value = value; });
|
||||
var uZCoef = { value: props.zCoef };
|
||||
watch(function () { return props.zCoef; }, function (value) { uZCoef.value = value; });
|
||||
var uDispCoef = { value: props.dispCoef };
|
||||
watch(function () { return props.dispCoef; }, function (value) { uDispCoef.value = value; });
|
||||
|
||||
return {
|
||||
uTime: uTime, uNoiseCoef: uNoiseCoef, uZCoef: uZCoef, uDispCoef: uDispCoef,
|
||||
};
|
||||
},
|
||||
mounted: function mounted() {
|
||||
this.startTime = Date.now();
|
||||
this.three.onBeforeRender(this.updateTime);
|
||||
},
|
||||
unmounted: function unmounted() {
|
||||
this.three.offBeforeRender(this.updateTime);
|
||||
},
|
||||
methods: {
|
||||
createGeometry: function createGeometry() {
|
||||
this.geometry = new PlaneBufferGeometry(1, 1, this.widthSegments, this.heightSegments);
|
||||
},
|
||||
createMaterial: function createMaterial() {
|
||||
var this$1 = this;
|
||||
|
||||
this.material = new MeshBasicMaterial({ side: DoubleSide, map: this.loadTexture() });
|
||||
this.material.onBeforeCompile = function (shader) {
|
||||
shader.uniforms.uTime = this$1.uTime;
|
||||
shader.uniforms.uNoiseCoef = this$1.uNoiseCoef;
|
||||
shader.uniforms.uZCoef = this$1.uZCoef;
|
||||
shader.uniforms.uDispCoef = this$1.uDispCoef;
|
||||
shader.vertexShader = "\n uniform float uTime;\n uniform float uNoiseCoef;\n uniform float uZCoef;\n varying float vNoise;\n " + snoise2 + "\n " + shader.vertexShader;
|
||||
|
||||
shader.vertexShader = shader.vertexShader.replace(
|
||||
'#include <begin_vertex>',
|
||||
" \n vec3 p = vec3(position * uNoiseCoef);\n p.x += uTime;\n vNoise = snoise(p.xy);\n vec3 transformed = vec3(position);\n transformed.z += vNoise * uZCoef;\n "
|
||||
);
|
||||
|
||||
shader.fragmentShader = "\n uniform float uDispCoef;\n varying float vNoise;\n " + shader.fragmentShader;
|
||||
|
||||
shader.fragmentShader = shader.fragmentShader.replace(
|
||||
'#include <map_fragment>',
|
||||
"\n vec4 texelColor = texture2D(map, vUv);\n vec4 dispTexel = texture2D(map, vUv + vec2(vNoise * uDispCoef, 0));\n texelColor.r = dispTexel.r;\n diffuseColor = texelColor;\n "
|
||||
);
|
||||
this$1.materialShader = shader;
|
||||
};
|
||||
},
|
||||
updateTime: function updateTime() {
|
||||
this.uTime.value = (Date.now() - this.startTime) * this.timeCoef;
|
||||
},
|
||||
},
|
||||
__hmrId: 'NoisyImage',
|
||||
};
|
||||
|
||||
var snoise3 = "\n//\n// Description : Array and textureless GLSL 2D/3D/4D simplex\n// noise functions.\n// Author : Ian McEwan, Ashima Arts.\n// Maintainer : ijm\n// Lastmod : 20110822 (ijm)\n// License : Copyright (C) 2011 Ashima Arts. All rights reserved.\n// Distributed under the MIT License. See LICENSE file.\n// https://github.com/ashima/webgl-noise\n//\n\nvec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }\nvec4 mod289(vec4 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }\nvec4 permute(vec4 x) { return mod289(((x*34.0)+1.0)*x); }\nvec4 taylorInvSqrt(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; }\n\nfloat snoise(vec3 v)\n{\n const vec2 C = vec2(1.0/6.0, 1.0/3.0) ;\n const vec4 D = vec4(0.0, 0.5, 1.0, 2.0);\n\n // First corner\n vec3 i = floor(v + dot(v, C.yyy) );\n vec3 x0 = v - i + dot(i, C.xxx) ;\n\n // Other corners\n vec3 g = step(x0.yzx, x0.xyz);\n vec3 l = 1.0 - g;\n vec3 i1 = min( g.xyz, l.zxy );\n vec3 i2 = max( g.xyz, l.zxy );\n\n vec3 x1 = x0 - i1 + C.xxx;\n vec3 x2 = x0 - i2 + C.yyy; // 2.0*C.x = 1/3 = C.y\n vec3 x3 = x0 - D.yyy; // -1.0+3.0*C.x = -0.5 = -D.y\n\n // Permutations\n i = mod289(i);\n vec4 p = permute( permute( permute(\n i.z + vec4(0.0, i1.z, i2.z, 1.0 ))\n + i.y + vec4(0.0, i1.y, i2.y, 1.0 ))\n + i.x + vec4(0.0, i1.x, i2.x, 1.0 ));\n\n // Gradients: 7x7 points over a square, mapped onto an octahedron.\n // The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294)\n float n_ = 0.142857142857; // 1.0/7.0\n vec3 ns = n_ * D.wyz - D.xzx;\n\n vec4 j = p - 49.0 * floor(p * ns.z * ns.z); // mod(p,7*7)\n\n vec4 x_ = floor(j * ns.z);\n vec4 y_ = floor(j - 7.0 * x_ ); // mod(j,N)\n\n vec4 x = x_ *ns.x + ns.yyyy;\n vec4 y = y_ *ns.x + ns.yyyy;\n vec4 h = 1.0 - abs(x) - abs(y);\n\n vec4 b0 = vec4( x.xy, y.xy );\n vec4 b1 = vec4( x.zw, y.zw );\n\n vec4 s0 = floor(b0)*2.0 + 1.0;\n vec4 s1 = floor(b1)*2.0 + 1.0;\n vec4 sh = -step(h, vec4(0.0));\n\n vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ;\n vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ;\n\n vec3 p0 = vec3(a0.xy,h.x);\n vec3 p1 = vec3(a0.zw,h.y);\n vec3 p2 = vec3(a1.xy,h.z);\n vec3 p3 = vec3(a1.zw,h.w);\n\n // Normalise gradients\n vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));\n p0 *= norm.x;\n p1 *= norm.y;\n p2 *= norm.z;\n p3 *= norm.w;\n\n // Mix final noise value\n vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);\n m = m * m;\n return 42.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1),\n dot(p2,x2), dot(p3,x3) ) );\n}\n";
|
||||
|
||||
var NoisyPlane = {
|
||||
extends: Plane,
|
||||
props: {
|
||||
timeCoef: { type: Number, default: 0.001 },
|
||||
noiseCoef: { type: Number, default: 5 },
|
||||
deltaCoef: { type: Number, default: 1 / 512 },
|
||||
displacementScale: { type: Number, default: 5 },
|
||||
},
|
||||
setup: function setup(props) {
|
||||
// uniforms
|
||||
var uTime = { value: 0 };
|
||||
var uNoiseCoef = { value: props.noiseCoef };
|
||||
watch(function () { return props.noiseCoef; }, function (value) { uNoiseCoef.value = value; });
|
||||
var uDelta = { value: new Vector2(props.deltaCoef, props.deltaCoef) };
|
||||
watch(function () { return props.deltaCoef; }, function (value) { uDelta.value.set(value, value); });
|
||||
|
||||
return {
|
||||
uTime: uTime, uNoiseCoef: uNoiseCoef, uDelta: uDelta,
|
||||
};
|
||||
},
|
||||
mounted: function mounted() {
|
||||
var this$1 = this;
|
||||
|
||||
this.init();
|
||||
|
||||
watch(function () { return this$1.displacementScale; }, function (value) { this$1.material.displacementScale = value; });
|
||||
|
||||
this.startTime = Date.now();
|
||||
this.three.onBeforeRender(this.update);
|
||||
},
|
||||
unmounted: function unmounted() {
|
||||
this.three.offBeforeRender(this.update);
|
||||
this.fsQuad.dispose();
|
||||
this.dispRT.dispose();
|
||||
this.dispMat.dispose();
|
||||
this.normRT.dispose();
|
||||
this.normMat.dispose();
|
||||
},
|
||||
methods: {
|
||||
init: function init() {
|
||||
this.fsQuad = new Pass.FullScreenQuad();
|
||||
|
||||
// displacement map
|
||||
this.dispRT = new WebGLRenderTarget(512, 512, { depthBuffer: false, stencilBuffer: false });
|
||||
this.dispMat = new ShaderMaterial$1({
|
||||
uniforms: {
|
||||
uTime: this.uTime,
|
||||
uNoiseCoef: this.uNoiseCoef,
|
||||
},
|
||||
vertexShader: "\n varying vec2 vUv;\n void main() {\n vUv = uv;\n // gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n gl_Position = vec4(position, 1.0);\n }\n ",
|
||||
fragmentShader: ("\n uniform float uTime;\n uniform float uNoiseCoef;\n varying vec2 vUv;\n " + snoise3 + "\n void main() {\n vec2 p = vec2(vUv * uNoiseCoef);\n float noise = (snoise(vec3(p.x, p.y, uTime)) + 1.0) / 2.0;\n gl_FragColor = vec4(noise, 0.0, 0.0, 1.0);\n }\n "),
|
||||
});
|
||||
|
||||
// normal map
|
||||
this.normRT = new WebGLRenderTarget(512, 512, { depthBuffer: false, stencilBuffer: false });
|
||||
this.normMat = new ShaderMaterial$1({
|
||||
uniforms: {
|
||||
dispMap: { value: this.dispRT.texture },
|
||||
delta: this.uDelta,
|
||||
},
|
||||
vertexShader: "\n varying vec2 vUv;\n void main() {\n vUv = uv;\n // gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n gl_Position = vec4(position, 1.0);\n }\n ",
|
||||
fragmentShader: "\n uniform sampler2D dispMap;\n uniform vec2 delta;\n varying vec2 vUv;\n void main() {\n // gl_FragColor = vec4(0.5, 0.5, 1.0, 0.0);\n float x1 = texture2D(dispMap, vec2(vUv.x - delta.x, vUv.y)).r;\n float x2 = texture2D(dispMap, vec2(vUv.x + delta.x, vUv.y)).r;\n float y1 = texture2D(dispMap, vec2(vUv.x, vUv.y - delta.y)).r;\n float y2 = texture2D(dispMap, vec2(vUv.x, vUv.y + delta.y)).r;\n gl_FragColor = vec4(0.5 + (x1 - x2), 0.5 + (y1 - y2), 1.0, 1.0);\n }\n ",
|
||||
});
|
||||
|
||||
this.material.displacementMap = this.dispRT.texture;
|
||||
this.material.displacementScale = this.displacementScale;
|
||||
this.material.normalMap = this.normRT.texture;
|
||||
this.material.normalMapType = ObjectSpaceNormalMap;
|
||||
// this.material.needsUpdate = true;
|
||||
},
|
||||
update: function update() {
|
||||
this.uTime.value = (Date.now() - this.startTime) * this.timeCoef;
|
||||
this.renderDisp();
|
||||
},
|
||||
renderDisp: function renderDisp() {
|
||||
this.renderMat(this.dispMat, this.dispRT);
|
||||
this.renderMat(this.normMat, this.normRT);
|
||||
},
|
||||
renderMat: function renderMat(mat, target) {
|
||||
var renderer = this.three.renderer;
|
||||
this.fsQuad.material = mat;
|
||||
var oldTarget = renderer.getRenderTarget();
|
||||
renderer.setRenderTarget(target);
|
||||
this.fsQuad.render(renderer);
|
||||
renderer.setRenderTarget(oldTarget);
|
||||
},
|
||||
},
|
||||
__hmrId: 'NoisyPlane',
|
||||
};
|
||||
|
||||
var snoise4 = "\n//\n// Description : Array and textureless GLSL 2D/3D/4D simplex\n// noise functions.\n// Author : Ian McEwan, Ashima Arts.\n// Maintainer : ijm\n// Lastmod : 20110822 (ijm)\n// License : Copyright (C) 2011 Ashima Arts. All rights reserved.\n// Distributed under the MIT License. See LICENSE file.\n// https://github.com/ashima/webgl-noise\n//\n\nvec4 mod289(vec4 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }\nfloat mod289(float x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }\nvec4 permute(vec4 x) { return mod289(((x*34.0)+1.0)*x); }\nfloat permute(float x) { return mod289(((x*34.0)+1.0)*x); }\nvec4 taylorInvSqrt(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; }\nfloat taylorInvSqrt(float r) { return 1.79284291400159 - 0.85373472095314 * r; }\n\nvec4 grad4(float j, vec4 ip)\n{\n const vec4 ones = vec4(1.0, 1.0, 1.0, -1.0);\n vec4 p,s;\n\n p.xyz = floor( fract (vec3(j) * ip.xyz) * 7.0) * ip.z - 1.0;\n p.w = 1.5 - dot(abs(p.xyz), ones.xyz);\n s = vec4(lessThan(p, vec4(0.0)));\n p.xyz = p.xyz + (s.xyz*2.0 - 1.0) * s.www;\n\n return p;\n}\n\n// (sqrt(5) - 1)/4 = F4, used once below\n#define F4 0.309016994374947451\n\nfloat snoise(vec4 v)\n{\n const vec4 C = vec4( 0.138196601125011, // (5 - sqrt(5))/20 G4\n 0.276393202250021, // 2 * G4\n 0.414589803375032, // 3 * G4\n -0.447213595499958); // -1 + 4 * G4\n\n // First corner\n vec4 i = floor(v + dot(v, vec4(F4)) );\n vec4 x0 = v - i + dot(i, C.xxxx);\n\n // Other corners\n\n // Rank sorting originally contributed by Bill Licea-Kane, AMD (formerly ATI)\n vec4 i0;\n vec3 isX = step( x0.yzw, x0.xxx );\n vec3 isYZ = step( x0.zww, x0.yyz );\n // i0.x = dot( isX, vec3( 1.0 ) );\n i0.x = isX.x + isX.y + isX.z;\n i0.yzw = 1.0 - isX;\n // i0.y += dot( isYZ.xy, vec2( 1.0 ) );\n i0.y += isYZ.x + isYZ.y;\n i0.zw += 1.0 - isYZ.xy;\n i0.z += isYZ.z;\n i0.w += 1.0 - isYZ.z;\n\n // i0 now contains the unique values 0,1,2,3 in each channel\n vec4 i3 = clamp( i0, 0.0, 1.0 );\n vec4 i2 = clamp( i0-1.0, 0.0, 1.0 );\n vec4 i1 = clamp( i0-2.0, 0.0, 1.0 );\n\n vec4 x1 = x0 - i1 + C.xxxx;\n vec4 x2 = x0 - i2 + C.yyyy;\n vec4 x3 = x0 - i3 + C.zzzz;\n vec4 x4 = x0 + C.wwww;\n\n // Permutations\n i = mod289(i);\n float j0 = permute( permute( permute( permute(i.w) + i.z) + i.y) + i.x);\n vec4 j1 = permute( permute( permute( permute (\n i.w + vec4(i1.w, i2.w, i3.w, 1.0 ))\n + i.z + vec4(i1.z, i2.z, i3.z, 1.0 ))\n + i.y + vec4(i1.y, i2.y, i3.y, 1.0 ))\n + i.x + vec4(i1.x, i2.x, i3.x, 1.0 ));\n\n // Gradients: 7x7x6 points over a cube, mapped onto a 4-cross polytope\n // 7*7*6 = 294, which is close to the ring size 17*17 = 289.\n vec4 ip = vec4(1.0/294.0, 1.0/49.0, 1.0/7.0, 0.0) ;\n\n vec4 p0 = grad4(j0, ip);\n vec4 p1 = grad4(j1.x, ip);\n vec4 p2 = grad4(j1.y, ip);\n vec4 p3 = grad4(j1.z, ip);\n vec4 p4 = grad4(j1.w, ip);\n\n // Normalise gradients\n vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));\n p0 *= norm.x;\n p1 *= norm.y;\n p2 *= norm.z;\n p3 *= norm.w;\n p4 *= taylorInvSqrt(dot(p4,p4));\n\n // Mix contributions from the five corners\n vec3 m0 = max(0.6 - vec3(dot(x0,x0), dot(x1,x1), dot(x2,x2)), 0.0);\n vec2 m1 = max(0.6 - vec2(dot(x3,x3), dot(x4,x4) ), 0.0);\n m0 = m0 * m0;\n m1 = m1 * m1;\n return 49.0 * ( dot(m0*m0, vec3( dot( p0, x0 ), dot( p1, x1 ), dot( p2, x2 )))\n + dot(m1*m1, vec2( dot( p3, x3 ), dot( p4, x4 ) ) ) ) ;\n\n}\n";
|
||||
|
||||
var NoisySphere = {
|
||||
extends: Sphere,
|
||||
props: {
|
||||
radius: { type: Number, default: 20 },
|
||||
widthSegments: { type: Number, default: 128 },
|
||||
heightSegments: { type: Number, default: 128 },
|
||||
timeCoef: { type: Number, default: 0.001 },
|
||||
noiseCoef: { type: Number, default: 0.05 },
|
||||
dispCoef: { type: Number, default: 5 },
|
||||
},
|
||||
setup: function setup(props) {
|
||||
// uniforms
|
||||
var uTime = { value: 0 };
|
||||
var uNoiseCoef = { value: props.noiseCoef };
|
||||
watch(function () { return props.noiseCoef; }, function (value) { uNoiseCoef.value = value; });
|
||||
var uDispCoef = { value: props.dispCoef };
|
||||
watch(function () { return props.dispCoef; }, function (value) { uDispCoef.value = value; });
|
||||
|
||||
return {
|
||||
uTime: uTime, uNoiseCoef: uNoiseCoef, uDispCoef: uDispCoef,
|
||||
};
|
||||
},
|
||||
mounted: function mounted() {
|
||||
this.updateMaterial();
|
||||
|
||||
this.startTime = Date.now();
|
||||
this.three.onBeforeRender(this.updateTime);
|
||||
},
|
||||
unmounted: function unmounted() {
|
||||
this.three.offBeforeRender(this.updateTime);
|
||||
},
|
||||
methods: {
|
||||
updateMaterial: function updateMaterial() {
|
||||
var this$1 = this;
|
||||
|
||||
this.material.onBeforeCompile = function (shader) {
|
||||
shader.uniforms.uTime = this$1.uTime;
|
||||
shader.uniforms.uNoiseCoef = this$1.uNoiseCoef;
|
||||
shader.uniforms.uDispCoef = this$1.uDispCoef;
|
||||
shader.vertexShader = "\n uniform float uTime;\n uniform float uNoiseCoef;\n uniform float uDispCoef;\n varying float vNoise;\n " + snoise4 + "\n " + shader.vertexShader;
|
||||
|
||||
shader.vertexShader = shader.vertexShader.replace(
|
||||
'#include <begin_vertex>',
|
||||
"\n vec4 p = vec4(vec3(position * uNoiseCoef), uTime);\n vNoise = snoise(p);\n vec3 transformed = vec3(position);\n transformed += normalize(position) * vNoise * uDispCoef;\n "
|
||||
);
|
||||
this$1.materialShader = shader;
|
||||
};
|
||||
this.material.needsupdate = true;
|
||||
},
|
||||
updateTime: function updateTime() {
|
||||
this.uTime.value = (Date.now() - this.startTime) * this.timeCoef;
|
||||
},
|
||||
},
|
||||
__hmrId: 'NoisySphere',
|
||||
};
|
||||
|
||||
var NoisyText = {
|
||||
extends: Text,
|
||||
props: {
|
||||
timeCoef: { type: Number, default: 0.001 },
|
||||
noiseCoef: { type: Number, default: 0.015 },
|
||||
zCoef: { type: Number, default: 10 },
|
||||
},
|
||||
setup: function setup(props) {
|
||||
// uniforms
|
||||
var uTime = { value: 0 };
|
||||
var uNoiseCoef = { value: props.noiseCoef };
|
||||
watch(function () { return props.noiseCoef; }, function (value) { uNoiseCoef.value = value; });
|
||||
var uZCoef = { value: props.zCoef };
|
||||
watch(function () { return props.zCoef; }, function (value) { uZCoef.value = value; });
|
||||
|
||||
return {
|
||||
uTime: uTime, uNoiseCoef: uNoiseCoef, uZCoef: uZCoef,
|
||||
};
|
||||
},
|
||||
mounted: function mounted() {
|
||||
this.updateMaterial();
|
||||
|
||||
this.startTime = Date.now();
|
||||
this.three.onBeforeRender(this.updateTime);
|
||||
},
|
||||
unmounted: function unmounted() {
|
||||
this.three.offBeforeRender(this.updateTime);
|
||||
},
|
||||
methods: {
|
||||
updateMaterial: function updateMaterial() {
|
||||
var this$1 = this;
|
||||
|
||||
this.material.onBeforeCompile = function (shader) {
|
||||
shader.uniforms.uTime = this$1.uTime;
|
||||
shader.uniforms.uNoiseCoef = this$1.uNoiseCoef;
|
||||
shader.uniforms.uZCoef = this$1.uZCoef;
|
||||
shader.vertexShader = "\n uniform float uTime;\n uniform float uNoiseCoef;\n uniform float uZCoef;\n " + snoise2 + "\n " + shader.vertexShader;
|
||||
|
||||
shader.vertexShader = shader.vertexShader.replace(
|
||||
'#include <begin_vertex>',
|
||||
" \n vec3 p = vec3(position * uNoiseCoef);\n p.x += uTime;\n float noise = snoise(p.xy);\n vec3 transformed = vec3(position);\n transformed.z += noise * uZCoef;\n "
|
||||
);
|
||||
this$1.materialShader = shader;
|
||||
};
|
||||
this.material.needsupdate = true;
|
||||
},
|
||||
updateTime: function updateTime() {
|
||||
this.uTime.value = (Date.now() - this.startTime) * this.timeCoef;
|
||||
},
|
||||
},
|
||||
__hmrId: 'NoisyText',
|
||||
};
|
||||
|
||||
var AnimatedPlane = function AnimatedPlane(params) {
|
||||
var this$1 = this;
|
||||
|
||||
Object.entries(params).forEach(function (ref) {
|
||||
var key = ref[0];
|
||||
var value = ref[1];
|
||||
|
||||
this$1[key] = value;
|
||||
});
|
||||
|
||||
this.o3d = new Object3D();
|
||||
this.uProgress = { value: 0 };
|
||||
this.uvScale = new Vector2();
|
||||
|
||||
this.initMaterial();
|
||||
this.initPlane();
|
||||
};
|
||||
|
||||
AnimatedPlane.prototype.initMaterial = function initMaterial () {
|
||||
var this$1 = this;
|
||||
|
||||
this.material = new MeshBasicMaterial({
|
||||
side: DoubleSide,
|
||||
transparent: true,
|
||||
map: this.texture,
|
||||
onBeforeCompile: function (shader) {
|
||||
shader.uniforms.progress = this$1.uProgress;
|
||||
shader.uniforms.uvScale = { value: this$1.uvScale };
|
||||
shader.vertexShader = "\n uniform float progress;\n uniform vec2 uvScale;\n\n attribute vec3 offset;\n attribute vec3 rotation;\n attribute vec2 uvOffset;\n\n mat3 rotationMatrixXYZ(vec3 r)\n {\n float cx = cos(r.x);\n float sx = sin(r.x);\n float cy = cos(r.y);\n float sy = sin(r.y);\n float cz = cos(r.z);\n float sz = sin(r.z);\n\n return mat3(\n cy * cz, cx * sz + sx * sy * cz, sx * sz - cx * sy * cz,\n -cy * sz, cx * cz - sx * sy * sz, sx * cz + cx * sy * sz,\n sy, -sx * cy, cx * cy\n );\n }\n " + shader.vertexShader;
|
||||
|
||||
shader.vertexShader = shader.vertexShader.replace('#include <uv_vertex>', "\n #include <uv_vertex>\n vUv = vUv * uvScale + uvOffset;\n ");
|
||||
|
||||
shader.vertexShader = shader.vertexShader.replace('#include <project_vertex>', "\n mat3 rotMat = rotationMatrixXYZ(progress * rotation);\n transformed = rotMat * transformed;\n\n vec4 mvPosition = vec4(transformed, 1.0);\n #ifdef USE_INSTANCING\n mvPosition = instanceMatrix * mvPosition;\n #endif\n\n mvPosition.xyz += progress * offset;\n\n mvPosition = modelViewMatrix * mvPosition;\n gl_Position = projectionMatrix * mvPosition;\n ");
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
AnimatedPlane.prototype.initPlane = function initPlane () {
|
||||
var ref = this.screen;
|
||||
var width = ref.width;
|
||||
var wWidth = ref.wWidth;
|
||||
var wHeight = ref.wHeight;
|
||||
this.wSize = this.size * wWidth / width;
|
||||
this.nx = Math.ceil(wWidth / this.wSize) + 1;
|
||||
this.ny = Math.ceil(wHeight / this.wSize) + 1;
|
||||
this.icount = this.nx * this.ny;
|
||||
|
||||
this.initGeometry();
|
||||
this.initUV();
|
||||
this.initAnimAttributes();
|
||||
|
||||
if (this.imesh) {
|
||||
this.o3d.remove(this.imesh);
|
||||
}
|
||||
this.imesh = new InstancedMesh$1(this.bGeometry, this.material, this.icount);
|
||||
this.o3d.add(this.imesh);
|
||||
|
||||
var dummy = new Object3D();
|
||||
var index = 0;
|
||||
var x = -(wWidth - (wWidth - this.nx * this.wSize)) / 2 + this.dx;
|
||||
for (var i = 0; i < this.nx; i++) {
|
||||
var y = -(wHeight - (wHeight - this.ny * this.wSize)) / 2 + this.dy;
|
||||
for (var j = 0; j < this.ny; j++) {
|
||||
dummy.position.set(x, y, 0);
|
||||
dummy.updateMatrix();
|
||||
this.imesh.setMatrixAt(index++, dummy.matrix);
|
||||
y += this.wSize;
|
||||
}
|
||||
x += this.wSize;
|
||||
}
|
||||
};
|
||||
|
||||
AnimatedPlane.prototype.initGeometry = function initGeometry () {
|
||||
// square
|
||||
var geometry = new Geometry$1();
|
||||
geometry.vertices.push(new Vector3(0, 0, 0));
|
||||
geometry.vertices.push(new Vector3(this.wSize, 0, 0));
|
||||
geometry.vertices.push(new Vector3(0, this.wSize, 0));
|
||||
geometry.vertices.push(new Vector3(this.wSize, this.wSize, 0));
|
||||
geometry.faces.push(new Face3(0, 2, 1));
|
||||
geometry.faces.push(new Face3(2, 3, 1));
|
||||
|
||||
geometry.faceVertexUvs[0].push([
|
||||
new Vector2(0, 0),
|
||||
new Vector2(0, 1),
|
||||
new Vector2(1, 0) ]);
|
||||
geometry.faceVertexUvs[0].push([
|
||||
new Vector2(0, 1),
|
||||
new Vector2(1, 1),
|
||||
new Vector2(1, 0) ]);
|
||||
|
||||
// geometry.computeFaceNormals();
|
||||
// geometry.computeVertexNormals();
|
||||
|
||||
// center
|
||||
this.dx = this.wSize / 2;
|
||||
this.dy = this.wSize / 2;
|
||||
geometry.translate(-this.dx, -this.dy, 0);
|
||||
|
||||
this.bGeometry = geometry.toBufferGeometry();
|
||||
};
|
||||
|
||||
AnimatedPlane.prototype.initAnimAttributes = function initAnimAttributes () {
|
||||
var rnd = MathUtils.randFloat;
|
||||
var rndFS = MathUtils.randFloatSpread;
|
||||
var v3 = new Vector3();
|
||||
|
||||
var offsets = new Float32Array(this.icount * 3);
|
||||
for (var i = 0; i < offsets.length; i += 3) {
|
||||
if (this.anim === 1) { v3.set(rndFS(10), rnd(50, 100), rnd(20, 50)).toArray(offsets, i); }
|
||||
else { v3.set(rndFS(20), rndFS(20), rnd(20, 200)).toArray(offsets, i); }
|
||||
}
|
||||
this.bGeometry.setAttribute('offset', new InstancedBufferAttribute(offsets, 3));
|
||||
|
||||
var rotations = new Float32Array(this.icount * 3);
|
||||
var angle = Math.PI * 4;
|
||||
for (var i$1 = 0; i$1 < rotations.length; i$1 += 3) {
|
||||
rotations[i$1] = rndFS(angle);
|
||||
rotations[i$1 + 1] = rndFS(angle);
|
||||
rotations[i$1 + 2] = rndFS(angle);
|
||||
}
|
||||
this.bGeometry.setAttribute('rotation', new InstancedBufferAttribute(rotations, 3));
|
||||
};
|
||||
|
||||
AnimatedPlane.prototype.initUV = function initUV () {
|
||||
var ratio = this.nx / this.ny;
|
||||
var tRatio = this.texture.image.width / this.texture.image.height;
|
||||
if (ratio > tRatio) { this.uvScale.set(1 / this.nx, (tRatio / ratio) / this.ny); }
|
||||
else { this.uvScale.set((ratio / tRatio) / this.nx, 1 / this.ny); }
|
||||
var nW = this.uvScale.x * this.nx;
|
||||
var nH = this.uvScale.y * this.ny;
|
||||
|
||||
var v2 = new Vector2();
|
||||
var uvOffsets = new Float32Array(this.icount * 2);
|
||||
for (var i = 0; i < this.nx; i++) {
|
||||
for (var j = 0; j < this.ny; j++) {
|
||||
v2.set(
|
||||
this.uvScale.x * i + (1 - nW) / 2,
|
||||
this.uvScale.y * j + (1 - nH) / 2
|
||||
).toArray(uvOffsets, (i * this.ny + j) * 2);
|
||||
}
|
||||
}
|
||||
this.bGeometry.setAttribute('uvOffset', new InstancedBufferAttribute(uvOffsets, 2));
|
||||
};
|
||||
|
||||
AnimatedPlane.prototype.setTexture = function setTexture (texture) {
|
||||
this.texture = texture;
|
||||
this.material.map = texture;
|
||||
this.initUV();
|
||||
};
|
||||
|
||||
AnimatedPlane.prototype.resize = function resize () {
|
||||
this.initPlane();
|
||||
};
|
||||
|
||||
function useTextures() {
|
||||
var obj = {
|
||||
loader: new TextureLoader(),
|
||||
count: 0,
|
||||
textures: [],
|
||||
loadProgress: 0,
|
||||
loadTextures: loadTextures,
|
||||
dispose: dispose,
|
||||
};
|
||||
return obj;
|
||||
|
||||
function loadTextures(images, cb) {
|
||||
obj.count = images.length;
|
||||
obj.textures.splice(0);
|
||||
obj.loadProgress = 0;
|
||||
Promise.all(images.map(loadTexture)).then(cb);
|
||||
}
|
||||
function loadTexture(img, index) {
|
||||
return new Promise(function (resolve) {
|
||||
obj.loader.load(
|
||||
img.src,
|
||||
function (texture) {
|
||||
obj.loadProgress += 1 / obj.count;
|
||||
obj.textures[index] = texture;
|
||||
resolve(texture);
|
||||
}
|
||||
);
|
||||
});
|
||||
}
|
||||
function dispose() {
|
||||
obj.textures.forEach(function (t) { return t.dispose(); });
|
||||
}
|
||||
}
|
||||
|
||||
var script = {
|
||||
props: {
|
||||
images: Array,
|
||||
events: { type: Object, default: function () { return { wheel: true, click: true, keyup: true }; } },
|
||||
},
|
||||
setup: function setup() {
|
||||
var loader = useTextures();
|
||||
return {
|
||||
loader: loader,
|
||||
progress: 0,
|
||||
targetProgress: 0,
|
||||
};
|
||||
},
|
||||
mounted: function mounted() {
|
||||
this.three = this.$refs.renderer.three;
|
||||
|
||||
if (this.images.length < 2) {
|
||||
console.error('This slider needs at least 2 images.');
|
||||
} else {
|
||||
this.loader.loadTextures(this.images, this.init);
|
||||
}
|
||||
},
|
||||
unmounted: function unmounted() {
|
||||
this.loader.dispose();
|
||||
var domElement = this.three.renderer.domElement;
|
||||
domElement.removeEventListener('click', this.onClick);
|
||||
domElement.removeEventListener('wheel', this.onWheel);
|
||||
document.removeEventListener('keyup', this.onKeyup);
|
||||
},
|
||||
methods: {
|
||||
init: function init() {
|
||||
this.initScene();
|
||||
|
||||
gsap.fromTo(this.plane1.uProgress,
|
||||
{
|
||||
value: -2,
|
||||
},
|
||||
{
|
||||
value: 0,
|
||||
duration: 2.5,
|
||||
ease: Power4.easeOut,
|
||||
}
|
||||
);
|
||||
|
||||
var domElement = this.three.renderer.domElement;
|
||||
if (this.events.click) { domElement.addEventListener('click', this.onClick); }
|
||||
if (this.events.wheel) { domElement.addEventListener('wheel', this.onWheel); }
|
||||
if (this.events.keyup) { document.addEventListener('keyup', this.onKeyup); }
|
||||
this.three.onBeforeRender(this.updateProgress);
|
||||
this.three.onAfterResize(this.onResize);
|
||||
},
|
||||
initScene: function initScene() {
|
||||
var renderer = this.three.renderer;
|
||||
var scene = this.$refs.scene.scene;
|
||||
|
||||
this.plane1 = new AnimatedPlane({
|
||||
renderer: renderer, screen: this.three.size,
|
||||
size: 10,
|
||||
anim: 1,
|
||||
texture: this.loader.textures[0],
|
||||
});
|
||||
|
||||
this.plane2 = new AnimatedPlane({
|
||||
renderer: renderer, screen: this.three.size,
|
||||
size: 10,
|
||||
anim: 2,
|
||||
texture: this.loader.textures[1],
|
||||
});
|
||||
|
||||
this.setPlanesProgress(0);
|
||||
this.planes = new Object3D();
|
||||
this.planes.add(this.plane1.o3d);
|
||||
this.planes.add(this.plane2.o3d);
|
||||
scene.add(this.planes);
|
||||
},
|
||||
onResize: function onResize() {
|
||||
this.plane1.resize();
|
||||
this.plane2.resize();
|
||||
},
|
||||
onWheel: function onWheel(e) {
|
||||
// e.preventDefault();
|
||||
if (e.deltaY > 0) {
|
||||
this.setTargetProgress(this.targetProgress + 1 / 20);
|
||||
} else {
|
||||
this.setTargetProgress(this.targetProgress - 1 / 20);
|
||||
}
|
||||
},
|
||||
onClick: function onClick(e) {
|
||||
if (e.clientY < this.three.size.height / 2) {
|
||||
this.navPrevious();
|
||||
} else {
|
||||
this.navNext();
|
||||
}
|
||||
},
|
||||
onKeyup: function onKeyup(e) {
|
||||
if (e.keyCode === 37 || e.keyCode === 38) {
|
||||
this.navPrevious();
|
||||
} else if (e.keyCode === 39 || e.keyCode === 40) {
|
||||
this.navNext();
|
||||
}
|
||||
},
|
||||
navNext: function navNext() {
|
||||
if (Number.isInteger(this.targetProgress)) { this.setTargetProgress(this.targetProgress + 1); }
|
||||
else { this.setTargetProgress(Math.ceil(this.targetProgress)); }
|
||||
},
|
||||
navPrevious: function navPrevious() {
|
||||
if (Number.isInteger(this.targetProgress)) { this.setTargetProgress(this.targetProgress - 1); }
|
||||
else { this.setTargetProgress(Math.floor(this.targetProgress)); }
|
||||
},
|
||||
setTargetProgress: function setTargetProgress(value) {
|
||||
this.targetProgress = value;
|
||||
if (this.targetProgress < 0) {
|
||||
this.progress += this.images.length;
|
||||
this.targetProgress += this.images.length;
|
||||
}
|
||||
},
|
||||
updateProgress: function updateProgress() {
|
||||
var progress1 = lerp(this.progress, this.targetProgress, 0.1);
|
||||
var pdiff = progress1 - this.progress;
|
||||
if (pdiff === 0) { return; }
|
||||
|
||||
var p0 = this.progress % 1;
|
||||
var p1 = progress1 % 1;
|
||||
if ((pdiff > 0 && p1 < p0) || (pdiff < 0 && p0 < p1)) {
|
||||
var i = Math.floor(progress1) % this.images.length;
|
||||
var j = (i + 1) % this.images.length;
|
||||
this.plane1.setTexture(this.loader.textures[i]);
|
||||
this.plane2.setTexture(this.loader.textures[j]);
|
||||
}
|
||||
|
||||
this.progress = progress1;
|
||||
this.setPlanesProgress(this.progress % 1);
|
||||
},
|
||||
setPlanesProgress: function setPlanesProgress(progress) {
|
||||
this.plane1.uProgress.value = progress;
|
||||
this.plane2.uProgress.value = -1 + progress;
|
||||
this.plane1.material.opacity = 1 - progress;
|
||||
this.plane2.material.opacity = progress;
|
||||
this.plane1.o3d.position.z = progress;
|
||||
this.plane2.o3d.position.z = progress - 1;
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
function render(_ctx, _cache, $props, $setup, $data, $options) {
|
||||
var _component_Camera = resolveComponent("Camera");
|
||||
var _component_Scene = resolveComponent("Scene");
|
||||
var _component_Renderer = resolveComponent("Renderer");
|
||||
|
||||
return (openBlock(), createBlock(_component_Renderer, {
|
||||
ref: "renderer",
|
||||
antialias: ""
|
||||
}, {
|
||||
default: withCtx(function () { return [
|
||||
createVNode(_component_Camera, {
|
||||
ref: "camera",
|
||||
position: { z: 150 }
|
||||
}, null, 512 /* NEED_PATCH */),
|
||||
createVNode(_component_Scene, { ref: "scene" }, null, 512 /* NEED_PATCH */)
|
||||
]; }),
|
||||
_: 1 /* STABLE */
|
||||
}, 512 /* NEED_PATCH */))
|
||||
}
|
||||
|
||||
script.render = render;
|
||||
script.__file = "src/components/sliders/Slider1.vue";
|
||||
|
||||
function ZoomBlurImage(three) {
|
||||
var geometry, material, mesh;
|
||||
|
||||
var uMap = { value: null };
|
||||
var uCenter = { value: new Vector2(0.5, 0.5) };
|
||||
var uStrength = { value: 0 };
|
||||
var uUVOffset = { value: new Vector2(0, 0) };
|
||||
var uUVScale = { value: new Vector2(1, 1) };
|
||||
|
||||
init();
|
||||
|
||||
return { geometry: geometry, material: material, mesh: mesh, uCenter: uCenter, uStrength: uStrength, setMap: setMap, updateUV: updateUV };
|
||||
|
||||
function init() {
|
||||
geometry = new PlaneBufferGeometry(2, 2, 1, 1);
|
||||
|
||||
material = new ShaderMaterial$1({
|
||||
transparent: true,
|
||||
uniforms: {
|
||||
map: uMap,
|
||||
center: uCenter,
|
||||
strength: uStrength,
|
||||
uvOffset: uUVOffset,
|
||||
uvScale: uUVScale,
|
||||
},
|
||||
vertexShader: "\n varying vec2 vUv;\n void main() {\n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }\n ",
|
||||
// adapted from https://github.com/evanw/glfx.js
|
||||
fragmentShader: "\n uniform sampler2D map;\n uniform vec2 center;\n uniform float strength;\n uniform vec2 uvOffset;\n uniform vec2 uvScale;\n varying vec2 vUv;\n\n float random(vec3 scale, float seed) {\n /* use the fragment position for a different seed per-pixel */\n return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);\n }\n \n void main() {\n vec2 tUv = vUv * uvScale + uvOffset;\n if (abs(strength) > 0.001) {\n vec4 color = vec4(0.0);\n float total = 0.0;\n vec2 toCenter = center * uvScale + uvOffset - tUv;\n \n /* randomize the lookup values to hide the fixed number of samples */\n float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);\n \n for (float t = 0.0; t <= 20.0; t++) {\n float percent = (t + offset) / 20.0;\n float weight = 2.0 * (percent - percent * percent);\n vec4 texel = texture2D(map, tUv + toCenter * percent * strength);\n\n /* switch to pre-multiplied alpha to correctly blur transparent images */\n texel.rgb *= texel.a;\n\n color += texel * weight;\n total += weight;\n }\n\n gl_FragColor = color / total;\n\n /* switch back from pre-multiplied alpha */\n gl_FragColor.rgb /= gl_FragColor.a + 0.00001;\n gl_FragColor.a = 1.0 - abs(strength);\n } else {\n gl_FragColor = texture2D(map, tUv);\n }\n }\n ",
|
||||
});
|
||||
|
||||
mesh = new Mesh$1(geometry, material);
|
||||
}
|
||||
|
||||
function setMap(value) {
|
||||
uMap.value = value;
|
||||
updateUV();
|
||||
}
|
||||
|
||||
function updateUV() {
|
||||
var ratio = three.size.ratio;
|
||||
var iRatio = uMap.value.image.width / uMap.value.image.height;
|
||||
uUVOffset.value.set(0, 0);
|
||||
uUVScale.value.set(1, 1);
|
||||
if (iRatio > ratio) {
|
||||
uUVScale.value.x = ratio / iRatio;
|
||||
uUVOffset.value.x = (1 - uUVScale.value.x) / 2;
|
||||
} else {
|
||||
uUVScale.value.y = iRatio / ratio;
|
||||
uUVOffset.value.y = (1 - uUVScale.value.y) / 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var script$1 = {
|
||||
props: {
|
||||
images: Array,
|
||||
events: { type: Object, default: function () { return { wheel: true, click: true, keyup: true }; } },
|
||||
},
|
||||
setup: function setup() {
|
||||
var center = new Vector2();
|
||||
var loader = useTextures();
|
||||
|
||||
return {
|
||||
loader: loader,
|
||||
center: center,
|
||||
progress: 0,
|
||||
targetProgress: 0,
|
||||
};
|
||||
},
|
||||
mounted: function mounted() {
|
||||
this.three = this.$refs.renderer.three;
|
||||
|
||||
if (this.images.length < 2) {
|
||||
console.error('This slider needs at least 2 images.');
|
||||
} else {
|
||||
this.loader.loadTextures(this.images, this.init);
|
||||
}
|
||||
},
|
||||
unmounted: function unmounted() {
|
||||
this.loader.dispose();
|
||||
var domElement = this.three.renderer.domElement;
|
||||
domElement.removeEventListener('click', this.onClick);
|
||||
domElement.removeEventListener('wheel', this.onWheel);
|
||||
document.removeEventListener('keyup', this.onKeyup);
|
||||
},
|
||||
methods: {
|
||||
init: function init() {
|
||||
this.initScene();
|
||||
gsap.fromTo(this.image1.uStrength,
|
||||
{
|
||||
value: -2,
|
||||
},
|
||||
{
|
||||
value: 0,
|
||||
duration: 2.5,
|
||||
ease: Power4.easeOut,
|
||||
}
|
||||
);
|
||||
|
||||
var domElement = this.three.renderer.domElement;
|
||||
if (this.events.click) { domElement.addEventListener('click', this.onClick); }
|
||||
if (this.events.wheel) { domElement.addEventListener('wheel', this.onWheel); }
|
||||
if (this.events.keyup) { document.addEventListener('keyup', this.onKeyup); }
|
||||
this.three.onBeforeRender(this.animate);
|
||||
this.three.onAfterResize(this.onResize);
|
||||
},
|
||||
initScene: function initScene() {
|
||||
var scene = this.$refs.scene.scene;
|
||||
|
||||
this.image1 = new ZoomBlurImage(this.three);
|
||||
this.image1.setMap(this.loader.textures[0]);
|
||||
this.image2 = new ZoomBlurImage(this.three);
|
||||
this.image2.setMap(this.loader.textures[1]);
|
||||
this.setImagesProgress(0);
|
||||
|
||||
scene.add(this.image1.mesh);
|
||||
scene.add(this.image2.mesh);
|
||||
},
|
||||
animate: function animate() {
|
||||
var ref = this.three;
|
||||
var mouse = ref.mouse;
|
||||
this.center.copy(mouse).divideScalar(2).addScalar(0.5);
|
||||
lerpv2(this.image1.uCenter.value, this.center, 0.1);
|
||||
lerpv2(this.image2.uCenter.value, this.center, 0.1);
|
||||
|
||||
this.updateProgress();
|
||||
},
|
||||
onResize: function onResize() {
|
||||
this.image1.updateUV();
|
||||
this.image2.updateUV();
|
||||
},
|
||||
onWheel: function onWheel(e) {
|
||||
// e.preventDefault();
|
||||
if (e.deltaY > 0) {
|
||||
this.setTargetProgress(this.targetProgress + 1 / 20);
|
||||
} else {
|
||||
this.setTargetProgress(this.targetProgress - 1 / 20);
|
||||
}
|
||||
},
|
||||
onClick: function onClick(e) {
|
||||
if (e.clientY < this.three.size.height / 2) {
|
||||
this.navPrevious();
|
||||
} else {
|
||||
this.navNext();
|
||||
}
|
||||
},
|
||||
onKeyup: function onKeyup(e) {
|
||||
if (e.keyCode === 37 || e.keyCode === 38) {
|
||||
this.navPrevious();
|
||||
} else if (e.keyCode === 39 || e.keyCode === 40) {
|
||||
this.navNext();
|
||||
}
|
||||
},
|
||||
navNext: function navNext() {
|
||||
if (Number.isInteger(this.targetProgress)) { this.setTargetProgress(this.targetProgress + 1); }
|
||||
else { this.setTargetProgress(Math.ceil(this.targetProgress)); }
|
||||
},
|
||||
navPrevious: function navPrevious() {
|
||||
if (Number.isInteger(this.targetProgress)) { this.setTargetProgress(this.targetProgress - 1); }
|
||||
else { this.setTargetProgress(Math.floor(this.targetProgress)); }
|
||||
},
|
||||
setTargetProgress: function setTargetProgress(value) {
|
||||
this.targetProgress = value;
|
||||
if (this.targetProgress < 0) {
|
||||
this.progress += this.images.length;
|
||||
this.targetProgress += this.images.length;
|
||||
}
|
||||
},
|
||||
updateProgress: function updateProgress() {
|
||||
var progress1 = lerp(this.progress, this.targetProgress, 0.1);
|
||||
var pdiff = progress1 - this.progress;
|
||||
if (pdiff === 0) { return; }
|
||||
|
||||
var p0 = this.progress % 1;
|
||||
var p1 = progress1 % 1;
|
||||
if ((pdiff > 0 && p1 < p0) || (pdiff < 0 && p0 < p1)) {
|
||||
var i = Math.floor(progress1) % this.images.length;
|
||||
var j = (i + 1) % this.images.length;
|
||||
this.image1.setMap(this.loader.textures[i]);
|
||||
this.image2.setMap(this.loader.textures[j]);
|
||||
}
|
||||
|
||||
this.progress = progress1;
|
||||
this.setImagesProgress(this.progress % 1);
|
||||
},
|
||||
setImagesProgress: function setImagesProgress(progress) {
|
||||
this.image1.uStrength.value = progress;
|
||||
this.image2.uStrength.value = -1 + progress;
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
function render$1(_ctx, _cache, $props, $setup, $data, $options) {
|
||||
var _component_OrthographicCamera = resolveComponent("OrthographicCamera");
|
||||
var _component_Scene = resolveComponent("Scene");
|
||||
var _component_Renderer = resolveComponent("Renderer");
|
||||
|
||||
return (openBlock(), createBlock(_component_Renderer, {
|
||||
ref: "renderer",
|
||||
antialias: "",
|
||||
"mouse-move": ""
|
||||
}, {
|
||||
default: withCtx(function () { return [
|
||||
createVNode(_component_OrthographicCamera, {
|
||||
ref: "camera",
|
||||
position: { z: 10 }
|
||||
}, null, 512 /* NEED_PATCH */),
|
||||
createVNode(_component_Scene, { ref: "scene" }, null, 512 /* NEED_PATCH */)
|
||||
]; }),
|
||||
_: 1 /* STABLE */
|
||||
}, 512 /* NEED_PATCH */))
|
||||
}
|
||||
|
||||
script$1.render = render$1;
|
||||
script$1.__file = "src/components/sliders/Slider2.vue";
|
||||
|
||||
var script$2 = {
|
||||
props: {
|
||||
src: String,
|
||||
cameraPosition: Object,
|
||||
},
|
||||
mounted: function mounted() {
|
||||
var this$1 = this;
|
||||
|
||||
this.renderer = this.$refs.renderer;
|
||||
|
||||
var loader = new GLTFLoader();
|
||||
loader.load(this.src, function (gltf) {
|
||||
this$1.renderer.three.scene.add(gltf.scene);
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
function render$2(_ctx, _cache, $props, $setup, $data, $options) {
|
||||
var _component_Camera = resolveComponent("Camera");
|
||||
var _component_Scene = resolveComponent("Scene");
|
||||
var _component_Renderer = resolveComponent("Renderer");
|
||||
|
||||
return (openBlock(), createBlock(_component_Renderer, {
|
||||
ref: "renderer",
|
||||
"orbit-ctrl": { enableDamping: true, dampingFactor: 0.05 }
|
||||
}, {
|
||||
default: withCtx(function () { return [
|
||||
createVNode(_component_Camera, {
|
||||
ref: "camera",
|
||||
position: $props.cameraPosition
|
||||
}, null, 8 /* PROPS */, ["position"]),
|
||||
createVNode(_component_Scene, null, {
|
||||
default: withCtx(function () { return [
|
||||
renderSlot(_ctx.$slots, "default")
|
||||
]; }),
|
||||
_: 3 /* FORWARDED */
|
||||
})
|
||||
]; }),
|
||||
_: 1 /* STABLE */
|
||||
}, 8 /* PROPS */, ["orbit-ctrl"]))
|
||||
}
|
||||
|
||||
script$2.render = render$2;
|
||||
script$2.__file = "src/components/viewers/GLTFViewer.vue";
|
||||
|
||||
var TROIS = /*#__PURE__*/Object.freeze({
|
||||
__proto__: null,
|
||||
Renderer: Renderer,
|
||||
@ -3715,13 +2825,6 @@ var TROIS = /*#__PURE__*/Object.freeze({
|
||||
TiltShiftPass: TiltShiftPass,
|
||||
UnrealBloomPass: UnrealBloomPass,
|
||||
ZoomBlurPass: ZoomBlurPass,
|
||||
NoisyImage: NoisyImage,
|
||||
NoisyPlane: NoisyPlane,
|
||||
NoisySphere: NoisySphere,
|
||||
NoisyText: NoisyText,
|
||||
Slider1: script,
|
||||
Slider2: script$1,
|
||||
GLTFViewer: script$2,
|
||||
setFromProp: setFromProp,
|
||||
propsValues: propsValues,
|
||||
lerp: lerp,
|
||||
@ -3821,5 +2924,5 @@ var TroisJSVuePlugin = {
|
||||
},
|
||||
};
|
||||
|
||||
export { AmbientLight, BasicMaterial, BokehPass, Box, BoxGeometry, PerspectiveCamera as Camera, Circle, CircleGeometry, Cone, ConeGeometry, CubeTexture, Cylinder, CylinderGeometry, DirectionalLight, Dodecahedron, DodecahedronGeometry, EffectComposer, FXAAPass, FilmPass, script$2 as GLTFViewer, Gem, Group, HalftonePass, Icosahedron, IcosahedronGeometry, Image, InstancedMesh, LambertMaterial, Lathe, LatheGeometry, MatcapMaterial, Mesh, MirrorMesh, NoisyImage, NoisyPlane, NoisySphere, NoisyText, Octahedron, OctahedronGeometry, OrthographicCamera, PerspectiveCamera, PhongMaterial, PhysicalMaterial, Plane, PointLight, Polyhedron, PolyhedronGeometry, RefractionMesh, RenderPass, Renderer, Ring, RingGeometry, SMAAPass, Scene, script as Slider1, script$1 as Slider2, Sphere, SphereGeometry, SpotLight, Sprite, StandardMaterial, SubSurfaceMaterial, Tetrahedron, TetrahedronGeometry, Text, Texture, TiltShiftPass, ToonMaterial, Torus, TorusGeometry, TorusKnot, TorusKnotGeometry, TroisJSVuePlugin, Tube, TubeGeometry, UnrealBloomPass, ZoomBlurPass, getMatcapUrl, lerp, lerpv2, lerpv3, limit, propsValues, setFromProp };
|
||||
export { AmbientLight, BasicMaterial, BokehPass, Box, BoxGeometry, PerspectiveCamera as Camera, Circle, CircleGeometry, Cone, ConeGeometry, CubeTexture, Cylinder, CylinderGeometry, DirectionalLight, Dodecahedron, DodecahedronGeometry, EffectComposer, FXAAPass, FilmPass, Gem, Group, HalftonePass, Icosahedron, IcosahedronGeometry, Image, InstancedMesh, LambertMaterial, Lathe, LatheGeometry, MatcapMaterial, Mesh, MirrorMesh, Octahedron, OctahedronGeometry, OrthographicCamera, PerspectiveCamera, PhongMaterial, PhysicalMaterial, Plane, PointLight, Polyhedron, PolyhedronGeometry, RefractionMesh, RenderPass, Renderer, Ring, RingGeometry, SMAAPass, Scene, Sphere, SphereGeometry, SpotLight, Sprite, StandardMaterial, SubSurfaceMaterial, Tetrahedron, TetrahedronGeometry, Text, Texture, TiltShiftPass, ToonMaterial, Torus, TorusGeometry, TorusKnot, TorusKnotGeometry, TroisJSVuePlugin, Tube, TubeGeometry, UnrealBloomPass, ZoomBlurPass, getMatcapUrl, lerp, lerpv2, lerpv3, limit, propsValues, setFromProp };
|
||||
//# sourceMappingURL=trois.module.js.map
|
||||
|
||||
File diff suppressed because one or more lines are too long
2
build/trois.module.min.js
vendored
2
build/trois.module.min.js
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "troisjs",
|
||||
"version": "0.1.5",
|
||||
"version": "0.1.6",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
@ -9,11 +9,10 @@
|
||||
"dependencies": {
|
||||
"gsap": "^3.5.1",
|
||||
"three": "^0.125",
|
||||
"vue": "^3.0.5"
|
||||
"vue": "3.0.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@rollup/plugin-buble": "^0.21.3",
|
||||
"@rollup/plugin-node-resolve": "^11.2.0",
|
||||
"@rollup/plugin-replace": "^2.3.3",
|
||||
"@vitejs/plugin-vue": "^1.1.4",
|
||||
"@vue/compiler-sfc": "^3.0.5",
|
||||
|
||||
@ -3,7 +3,6 @@ import vue from 'rollup-plugin-vue';
|
||||
import buble from '@rollup/plugin-buble';
|
||||
import { terser } from "rollup-plugin-terser";
|
||||
import replace from '@rollup/plugin-replace';
|
||||
import resolve from '@rollup/plugin-node-resolve';
|
||||
|
||||
const input = 'src/export.js';
|
||||
const external = [
|
||||
@ -26,7 +25,7 @@ const external = [
|
||||
'vue',
|
||||
];
|
||||
|
||||
const cdn_replaces = {
|
||||
const cdnReplaces = {
|
||||
'from \'vue\'': 'from \'https://unpkg.com/vue@3.0.5/dist/vue.esm-browser.prod.js\'',
|
||||
'from \'three\'': 'from \'https://unpkg.com/three@0.125.2/build/three.module.js\'',
|
||||
'from \'three/examples': 'from \'https://unpkg.com/three@0.125.2/examples',
|
||||
@ -53,7 +52,7 @@ export default [
|
||||
sourcemap: true,
|
||||
},
|
||||
plugins: [
|
||||
replace(cdn_replaces),
|
||||
replace(cdnReplaces),
|
||||
...plugins,
|
||||
],
|
||||
},
|
||||
@ -67,7 +66,7 @@ export default [
|
||||
sourcemap: true,
|
||||
},
|
||||
plugins: [
|
||||
replace(cdn_replaces),
|
||||
replace(cdnReplaces),
|
||||
...plugins,
|
||||
terser(),
|
||||
],
|
||||
@ -99,39 +98,12 @@ export default [
|
||||
},
|
||||
{
|
||||
input,
|
||||
external: [
|
||||
'gsap',
|
||||
'vue',
|
||||
],
|
||||
external,
|
||||
output: {
|
||||
format: 'cjs',
|
||||
file: 'build/trois.js',
|
||||
sourcemap: false,
|
||||
},
|
||||
plugins: [
|
||||
...plugins,
|
||||
resolve({
|
||||
moduleDirectories: ['node_modules'],
|
||||
}),
|
||||
],
|
||||
plugins,
|
||||
},
|
||||
// {
|
||||
// input,
|
||||
// external: [
|
||||
// 'gsap',
|
||||
// 'vue',
|
||||
// ],
|
||||
// output: {
|
||||
// format: 'cjs',
|
||||
// file: 'build/trois.min.js',
|
||||
// sourcemap: true,
|
||||
// },
|
||||
// plugins: [
|
||||
// ...plugins,
|
||||
// resolve({
|
||||
// moduleDirectories: ['node_modules'],
|
||||
// }),
|
||||
// terser(),
|
||||
// ],
|
||||
// },
|
||||
];
|
||||
|
||||
@ -1,39 +0,0 @@
|
||||
<template>
|
||||
<Renderer ref="renderer" mouse-over click>
|
||||
<Camera :position="{ z: 10 }" />
|
||||
<Scene>
|
||||
<PointLight :position="{ y: 50, z: 50 }" />
|
||||
<Group>
|
||||
<Box ref="box" @hover="boxHover" @click="boxClick" :size="1" :rotation="{ y: Math.PI / 4, z: Math.PI / 4 }">
|
||||
<LambertMaterial :color="boxColor" />
|
||||
</Box>
|
||||
</Group>
|
||||
</Scene>
|
||||
</Renderer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
boxColor: '#ffffff',
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
const renderer = this.$refs.renderer;
|
||||
const box = this.$refs.box.mesh;
|
||||
renderer.onBeforeRender(() => {
|
||||
box.rotation.x += 0.01;
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
boxHover({ over }) {
|
||||
if (over) this.boxColor = '#ff0000';
|
||||
else this.boxColor = '#ffffff';
|
||||
},
|
||||
boxClick() {
|
||||
console.log('click');
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -1,14 +0,0 @@
|
||||
<template>
|
||||
<Renderer>
|
||||
<Camera :position="{ x: 0, y: 0, z: 10 }" />
|
||||
<Scene>
|
||||
<Sphere>
|
||||
<MatcapMaterial name="2E763A_78A0B7_B3D1CF_14F209" />
|
||||
</Sphere>
|
||||
</Scene>
|
||||
</Renderer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {};
|
||||
</script>
|
||||
Loading…
Reference in New Issue
Block a user