Three.js材质纹理扩散过渡
import * as THREE from "three";
import { ThreeHelper } from "@/src/ThreeHelper";
import { LoadGLTF, MethodBaseSceneSet } from "@/src/ThreeHelper/decorators";
import { MainScreen } from "@/src/components/Three/Canvas";
import { Injectable } from "@/src/ThreeHelper/decorators/DI";
import type { GUI } from "dat.gui";
import type { GLTF } from "three/examples/jsm/loaders/GLTFLoader";
import EventMesh from "@/src/ThreeHelper/decorators/EventMesh";
import { noise } from "@/src/ThreeHelper/addons/perlinNoise";
import { gsap } from "gsap";
@Injectable
export class Main extends MainScreen {
static instance: Main;
clock = new THREE.Clock();
iTime = { value: 0 };
iProgress = { value: 0.15 };
startPoint = { value: new THREE.Vector3(-0.02, 0.2, 0.7) };
// 初始贴图
matcap = {
value: this.helper.loadTexture("/public/textures/5E5855_C6C4CD_C89B67_8F8E98-512px.png"),
};
matcap2 = {
value: this.helper.loadTexture("/public/textures/B6B8B1_994A24_315C81_927963-512px.png"),
};
textures = [
this.helper.loadTexture("/public/textures/1A2461_3D70DB_2C3C8F_2C6CAC-512px.png"),
this.helper.loadTexture("/public/textures/1B1B1B_999999_575757_747474-512px.png"),
this.helper.loadTexture("/public/textures/3E2335_D36A1B_8E4A2E_2842A5-512px.png"),
this.helper.loadTexture("/public/textures/3F3A2F_91D0A5_7D876A_94977B-512px.png"),
this.helper.loadTexture("/public/textures/48270F_C4723B_9B5728_7B431B-512px.png"),
this.helper.loadTexture("/public/textures/4C462E_6D876C_9AAC8F_9AABA6-512px.png"),
this.helper.loadTexture("/public/textures/4F5246_8C8D84_7B7C74_131611-512px.png"),
this.helper.loadTexture("/public/textures/5E5855_C6C4CD_C89B67_8F8E98-512px.png"),
this.helper.loadTexture("/public/textures/B6B8B1_994A24_315C81_927963-512px.png"),
this.helper.loadTexture("/public/textures/C7C7D7_4C4E5A_818393_6C6C74-512px.png"),
];
play?: (swap: boolean) => void;
playing = false;
constructor(private helper: ThreeHelper) {
super(helper);
helper.main = this;
Main.instance = this;
this.init();
}
@MethodBaseSceneSet({
addAxis: false,
cameraPosition: new THREE.Vector3(0, 0, 2.7),
cameraTarget: new THREE.Vector3(0, 0, 0),
useRoomLight: true,
near: 0.1,
far: 800,
})
init() {
const { helper } = this;
this.loadModel();
}
@EventMesh.OnMouseDown(Main)
click(result: typeof EventMesh.RayInfo) {
// console.log(this.helper.gui.__controllers[1].name())
// this.helper.gui?.__controllers[1].fire()
if (!this.playing && result && result.point) {
this.startPoint.value.copy(result.point);
this.play && this.play(true);
}
}
@LoadGLTF("/public/models/猴头.glb")
// @LoadGLTF("/public/models/猴头细分x4.glb")
loadModel(gltf?: GLTF) {
if (gltf) {
// this.helper.add(gltf.scene);
// EventMesh.setIntersectObjects(gltf.scene.children);
gltf.scene.traverse((obj) => {
if (obj.type == "Mesh") {
const meshTemp = obj as THREE.Mesh;
const material = new THREE.ShaderMaterial({
uniforms: {
matcap: this.matcap,
matcap2: this.matcap2,
startPoint: this.startPoint,
iProgress: this.iProgress,
iTime: this.iTime,
},
side: THREE.DoubleSide,
defines: { PI: Math.PI },
vertexShader: /* glsl */ `
varying vec2 vUv;
varying vec3 vNormal;
varying vec3 vPosition;
varying vec3 vViewPosition;
attribute float aRandom;
attribute vec3 aCenter;
uniform float iProgress;
uniform vec3 startPoint;
#include <common>
mat4 rotation3d(vec3 axis, float angle) {
axis = normalize(axis);
float s = sin(angle);
float c = cos(angle);
float oc = 1.0 - c;
return mat4(
oc * axis.x * axis.x + c, oc * axis.x * axis.y - axis.z * s, oc * axis.z * axis.x + axis.y * s, 0.0,
oc * axis.x * axis.y + axis.z * s, oc * axis.y * axis.y + c, oc * axis.y * axis.z - axis.x * s, 0.0,
oc * axis.z * axis.x - axis.y * s, oc * axis.y * axis.z + axis.x * s, oc * axis.z * axis.z + c, 0.0,
0.0, 0.0, 0.0, 1.0
);
}
void main() {
vUv = uv;
vNormal = normalMatrix * normalize( normal );
vPosition = position;
vec3 transform = position - aCenter;
float distancePoint = distance( startPoint, position );
float percent = iProgress * 4.;
float diff = percent - distancePoint;
distancePoint = diff * 1.;
distancePoint = clamp( distancePoint, 0., 1.);
// float intensity = smoothstep( 0., iProgress * 4.,distancePoint);
float intensity = distancePoint;
// mat4 rotation = rotation3d(vec3(normal), PI * 2. * intensity);
mat4 rotation = rotation3d(vec3(normal), PI * 2. * intensity);
transform += ((( normal * intensity ) * position * (1.0 - intensity))) / 2.;
transform = (rotation * vec4(transform,1.)).xyz;
// transform = (rotation * vec4(transform,1.)).xyz;
transform += aCenter;
vec4 modelPosition = modelMatrix * vec4(transform, 1.0);
vec4 modelViewPosition = viewMatrix * modelPosition;
gl_Position = projectionMatrix * modelViewPosition;
vViewPosition = - modelViewPosition.xyz;
}
`,
fragmentShader: /* glsl */ `
varying vec3 vNormal;
varying vec2 vUv;
varying vec3 vPosition;
varying vec3 vViewPosition;
uniform float iTime;
uniform float iProgress;
uniform vec3 startPoint;
uniform sampler2D matcap;
uniform sampler2D matcap2;
${noise}
void main() {
vec3 viewDir = normalize( vViewPosition );
vec3 x = normalize( vec3( viewDir.z, 0.0, - viewDir.x ) );
vec3 y = cross( viewDir, x );
vec2 uv = vec2( dot( x, vNormal ), dot( y, vNormal ) ) * 0.495 + 0.5; // 0.495 to remove artifacts caused by undersized matcap disks
float noiseVal = noise(vPosition * 20.);
float distancePoint = distance( startPoint, vPosition );
//TODO 受物体的体积影响
float intensity = smoothstep( 0., iProgress * 4.,distancePoint);
vec3 matcapColor = texture2D(matcap,uv).rgb;
vec3 matcapColor2 = texture2D(matcap2,uv).rgb;
float range = (1.0 - intensity) * pow( intensity, (iProgress + 2.) * 8.) * 100.;
range = (range * noiseVal * 3.) + pow(intensity,4.);
// matcapColor = vec3(range);
range = clamp(range,0.,1.);
// range = smoothstep(0.,1.,range);
matcapColor = mix(matcapColor2,matcapColor,range);
// matcapColor *= vec3((noiseVal) * intensity);
gl_FragColor = vec4(matcapColor, 1.0);
}
`,
});
/**
* tip: 几何体去掉indexed 点的数量会增加数倍 不再计算共用顶点
*/
// const geometry = meshTemp.geometry;
const geometry = meshTemp.geometry.toNonIndexed();
const mesh = new THREE.Mesh(geometry, material);
this.setAttribute(geometry);
this.helper.add(mesh);
EventMesh.setIntersectObjects([mesh]);
}
});
}
}
setAttribute(geometry: THREE.BufferGeometry) {
const position = geometry.attributes.position.array;
const length = geometry.attributes.position.count;
const randoms = new Float32Array(length);
const centers = new Float32Array(length * 3);
for (let index = 0; index < length; index += 3) {
const random = Math.random() * 1;
randoms[index] = random;
randoms[index + 1] = random;
randoms[index + 2] = random;
const i3 = index * 3;
const x = position[i3];
const y = position[i3 + 1];
const z = position[i3 + 2];
const x1 = position[i3 + 3];
const y1 = position[i3 + 4];
const z1 = position[i3 + 5];
const x2 = position[i3 + 6];
const y2 = position[i3 + 7];
const z2 = position[i3 + 8];
const center = new THREE.Vector3(x + x1 + x2, y + y1 + y2, z + z1 + z2).divideScalar(3);
centers.set([center.x, center.y, center.z], index * 3);
centers.set([center.x, center.y, center.z], (index + 1) * 3);
centers.set([center.x, center.y, center.z], (index + 2) * 3);
}
geometry.setAttribute("aRandom", new THREE.BufferAttribute(randoms, 1));
geometry.setAttribute("aCenter", new THREE.BufferAttribute(centers, 3));
}
@ThreeHelper.InjectAnimation(Main)
animation() {
const delta = this.clock.getDelta();
this.iTime.value += delta / 7;
}
@ThreeHelper.AddGUI(Main)
createEnvTexture(gui: GUI) {
const progressBar = gui.add(this.iProgress, "value", 0, 1).step(0.001);
const play = (swap = true) => {
this.iProgress.value = 0;
this.playing = true;
gsap.to(this.iProgress, {
value: 1,
duration: 1.5,
onUpdate: () => {
progressBar.updateDisplay();
},
onComplete: () => {
this.playing = false;
if (swap) {
const temp = this.matcap.value;
this.matcap.value = this.matcap2.value;
this.matcap2.value = temp;
this.iProgress.value = 0;
}
},
});
};
this.play = play;
gui.addFunction(() => play(true)).name("play");
this.textures.forEach((texture, index) => {
gui.addFunction(() => {
if (!this.playing) {
this.matcap.value = this.matcap2.value;
this.matcap2.value = texture;
play(false);
}
}).name("texture:" + (index + 1));
});
}
clickImage(url: string) {
if (!this.playing) {
const t = this.textures.find((t) => t.image.src == url);
if (t) {
this.matcap.value = this.matcap2.value;
this.matcap2.value = t;
this.play && this.play(false);
}
}
}
}
