2024-07-12
한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina
अधिकानि प्रकरणाः https://threelab.cn/ इत्यत्र उपलभ्यन्ते ।
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
let mediaElement;
let analyser;
let scene;
let camera;
let renderer;
let controls;
let mesh;
const fftSize = 4096;
const clock = new THREE.Clock();
const uniform = {
uTime: { value: 0 },
tAudioData: { value: 0 },
uStrength: { value: 0 },
};
const box = document.getElementById("box");
const init = () => {
// Scene
scene = new THREE.Scene();
const material = new THREE.MeshStandardMaterial();
material.roughness = 0.7;
const depthMaterial = new THREE.MeshDepthMaterial({
depthPacking: THREE.RGBADepthPacking,
});
material.onBeforeCompile = (shader) => {
shader.uniforms.uTime = uniform.uTime;
shader.uniforms.uStrength = uniform.uStrength;
shader.vertexShader = shader.vertexShader.replace(
"#include <common>",
`
#include <common>
attribute float aOffset;
varying vec2 vUv;
uniform float uTime;
uniform float uStrength;
// Simplex 4D Noise
// by Ian McEwan, Ashima Arts
//
vec4 permute(vec4 x){return mod(((x*34.0)+1.0)*x, 289.0);}
float permute(float x){return floor(mod(((x*34.0)+1.0)*x, 289.0));}
vec4 taylorInvSqrt(vec4 r){return 1.79284291400159 - 0.85373472095314 * r;}
float taylorInvSqrt(float r){return 1.79284291400159 - 0.85373472095314 * r;}
vec4 grad4(float j, vec4 ip)
{
const vec4 ones = vec4(1.0, 1.0, 1.0, -1.0);
vec4 p,s;
p.xyz = floor( fract (vec3(j) * ip.xyz) * 7.0) * ip.z - 1.0;
p.w = 1.5 - dot(abs(p.xyz), ones.xyz);
s = vec4(lessThan(p, vec4(0.0)));
p.xyz = p.xyz + (s.xyz*2.0 - 1.0) * s.www;
return p;
}
float simplexNoise4d(vec4 v)
{
const vec2 C = vec2( 0.138196601125010504, // (5 - sqrt(5))/20 G4
0.309016994374947451); // (sqrt(5) - 1)/4 F4
// First corner
vec4 i = floor(v + dot(v, C.yyyy) );
vec4 x0 = v - i + dot(i, C.xxxx);
// Other corners
// Rank sorting originally contributed by Bill Licea-Kane, AMD (formerly ATI)
vec4 i0;
vec3 isX = step( x0.yzw, x0.xxx );
vec3 isYZ = step( x0.zww, x0.yyz );
// i0.x = dot( isX, vec3( 1.0 ) );
i0.x = isX.x + isX.y + isX.z;
i0.yzw = 1.0 - isX;
// i0.y += dot( isYZ.xy, vec2( 1.0 ) );
i0.y += isYZ.x + isYZ.y;
i0.zw += 1.0 - isYZ.xy;
i0.z += isYZ.z;
i0.w += 1.0 - isYZ.z;
// i0 now contains the unique values 0,1,2,3 in each channel
vec4 i3 = clamp( i0, 0.0, 1.0 );
vec4 i2 = clamp( i0-1.0, 0.0, 1.0 );
vec4 i1 = clamp( i0-2.0, 0.0, 1.0 );
// x0 = x0 - 0.0 + 0.0 * C
vec4 x1 = x0 - i1 + 1.0 * C.xxxx;
vec4 x2 = x0 - i2 + 2.0 * C.xxxx;
vec4 x3 = x0 - i3 + 3.0 * C.xxxx;
vec4 x4 = x0 - 1.0 + 4.0 * C.xxxx;
// Permutations
i = mod(i, 289.0);
float j0 = permute( permute( permute( permute(i.w) + i.z) + i.y) + i.x);
vec4 j1 = permute( permute( permute( permute (
i.w + vec4(i1.w, i2.w, i3.w, 1.0 ))
+ i.z + vec4(i1.z, i2.z, i3.z, 1.0 ))
+ i.y + vec4(i1.y, i2.y, i3.y, 1.0 ))
+ i.x + vec4(i1.x, i2.x, i3.x, 1.0 ));
// Gradients
// ( 7*7*6 points uniformly over a cube, mapped onto a 4-octahedron.)
// 7*7*6 = 294, which is close to the ring size 17*17 = 289.
vec4 ip = vec4(1.0/294.0, 1.0/49.0, 1.0/7.0, 0.0) ;
vec4 p0 = grad4(j0, ip);
vec4 p1 = grad4(j1.x, ip);
vec4 p2 = grad4(j1.y, ip);
vec4 p3 = grad4(j1.z, ip);
vec4 p4 = grad4(j1.w, ip);
// Normalise gradients
vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
p0 *= norm.x;
p1 *= norm.y;
p2 *= norm.z;
p3 *= norm.w;
p4 *= taylorInvSqrt(dot(p4,p4));
// Mix contributions from the five corners
vec3 m0 = max(0.6 - vec3(dot(x0,x0), dot(x1,x1), dot(x2,x2)), 0.0);
vec2 m1 = max(0.6 - vec2(dot(x3,x3), dot(x4,x4) ), 0.0);
m0 = m0 * m0;
m1 = m1 * m1;
return 49.0 * ( dot(m0*m0, vec3( dot( p0, x0 ), dot( p1, x1 ), dot( p2, x2 )))
+ dot(m1*m1, vec2( dot( p3, x3 ), dot( p4, x4 ) ) ) ) ;
}
`
);
shader.vertexShader = shader.vertexShader.replace(
"#include <fog_vertex>",
`#include <fog_vertex>
vec3 newPos = position;
float strength = uStrength;
newPos += normal * simplexNoise4d(vec4(position, uTime)) * strength;
gl_Position = projectionMatrix * modelViewMatrix * vec4(newPos, 1.0);
`
);
shader.fragmentShader = shader.fragmentShader.replace(
"#include <common>",
`#include <common>
uniform float uTime;
uniform float uStrength;
`
);
shader.fragmentShader = shader.fragmentShader.replace(
"#include <opaque_fragment>",
`#include <opaque_fragment>
gl_FragColor = vec4(vNormal, 1.);
`
);
};
depthMaterial.onBeforeCompile = (shader) => {
shader.uniforms.uTime = uniform.uTime;
shader.uniforms.uStrength = uniform.uStrength;
shader.vertexShader = shader.vertexShader.replace(
"#include <common>",
`
#include <common>
attribute float aOffset;
varying vec2 vUv;
uniform float uTime;
uniform float uStrength;
// Simplex 4D Noise
// by Ian McEwan, Ashima Arts
//
vec4 permute(vec4 x){return mod(((x*34.0)+1.0)*x, 289.0);}
float permute(float x){return floor(mod(((x*34.0)+1.0)*x, 289.0));}
vec4 taylorInvSqrt(vec4 r){return 1.79284291400159 - 0.85373472095314 * r;}
float taylorInvSqrt(float r){return 1.79284291400159 - 0.85373472095314 * r;}
vec4 grad4(float j, vec4 ip)
{
const vec4 ones = vec4(1.0, 1.0, 1.0, -1.0);
vec4 p,s;
p.xyz = floor( fract (vec3(j) * ip.xyz) * 7.0) * ip.z - 1.0;
p.w = 1.5 - dot(abs(p.xyz), ones.xyz);
s = vec4(lessThan(p, vec4(0.0)));
p.xyz = p.xyz + (s.xyz*2.0 - 1.0) * s.www;
return p;
}
float simplexNoise4d(vec4 v)
{
const vec2 C = vec2( 0.138196601125010504, // (5 - sqrt(5))/20 G4
0.309016994374947451); // (sqrt(5) - 1)/4 F4
// First corner
vec4 i = floor(v + dot(v, C.yyyy) );
vec4 x0 = v - i + dot(i, C.xxxx);
// Other corners
// Rank sorting originally contributed by Bill Licea-Kane, AMD (formerly ATI)
vec4 i0;
vec3 isX = step( x0.yzw, x0.xxx );
vec3 isYZ = step( x0.zww, x0.yyz );
// i0.x = dot( isX, vec3( 1.0 ) );
i0.x = isX.x + isX.y + isX.z;
i0.yzw = 1.0 - isX;
// i0.y += dot( isYZ.xy, vec2( 1.0 ) );
i0.y += isYZ.x + isYZ.y;
i0.zw += 1.0 - isYZ.xy;
i0.z += isYZ.z;
i0.w += 1.0 - isYZ.z;
// i0 now contains the unique values 0,1,2,3 in each channel
vec4 i3 = clamp( i0, 0.0, 1.0 );
vec4 i2 = clamp( i0-1.0, 0.0, 1.0 );
vec4 i1 = clamp( i0-2.0, 0.0, 1.0 );
// x0 = x0 - 0.0 + 0.0 * C
vec4 x1 = x0 - i1 + 1.0 * C.xxxx;
vec4 x2 = x0 - i2 + 2.0 * C.xxxx;
vec4 x3 = x0 - i3 + 3.0 * C.xxxx;
vec4 x4 = x0 - 1.0 + 4.0 * C.xxxx;
// Permutations
i = mod(i, 289.0);
float j0 = permute( permute( permute( permute(i.w) + i.z) + i.y) + i.x);
vec4 j1 = permute( permute( permute( permute (
i.w + vec4(i1.w, i2.w, i3.w, 1.0 ))
+ i.z + vec4(i1.z, i2.z, i3.z, 1.0 ))
+ i.y + vec4(i1.y, i2.y, i3.y, 1.0 ))
+ i.x + vec4(i1.x, i2.x, i3.x, 1.0 ));
// Gradients
// ( 7*7*6 points uniformly over a cube, mapped onto a 4-octahedron.)
// 7*7*6 = 294, which is close to the ring size 17*17 = 289.
vec4 ip = vec4(1.0/294.0, 1.0/49.0, 1.0/7.0, 0.0) ;
vec4 p0 = grad4(j0, ip);
vec4 p1 = grad4(j1.x, ip);
vec4 p2 = grad4(j1.y, ip);
vec4 p3 = grad4(j1.z, ip);
vec4 p4 = grad4(j1.w, ip);
// Normalise gradients
vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
p0 *= norm.x;
p1 *= norm.y;
p2 *= norm.z;
p3 *= norm.w;
p4 *= taylorInvSqrt(dot(p4,p4));
// Mix contributions from the five corners
vec3 m0 = max(0.6 - vec3(dot(x0,x0), dot(x1,x1), dot(x2,x2)), 0.0);
vec2 m1 = max(0.6 - vec2(dot(x3,x3), dot(x4,x4) ), 0.0);
m0 = m0 * m0;
m1 = m1 * m1;
return 49.0 * ( dot(m0*m0, vec3( dot( p0, x0 ), dot( p1, x1 ), dot( p2, x2 )))
+ dot(m1*m1, vec2( dot( p3, x3 ), dot( p4, x4 ) ) ) ) ;
}
`
);
shader.vertexShader = shader.vertexShader.replace(
"#include <clipping_planes_vertex>",
`#include <clipping_planes_vertex>
vec3 newPos = position;
float strength = uStrength;
newPos += normal * simplexNoise4d(vec4(position, uTime)) * strength;
gl_Position = projectionMatrix * modelViewMatrix * vec4(newPos, 1.0);
`
);
};
// const geometry = new THREE.SphereGeometry(0.5, 256, 256);
const geometry = new THREE.IcosahedronGeometry(2.5, 50);
mesh = new THREE.Mesh(geometry, material);
mesh.customDepthMaterial = depthMaterial;
mesh.castShadow = true;
scene.add(mesh);
const plane = new THREE.Mesh(
new THREE.PlaneGeometry(25, 25),
new THREE.MeshStandardMaterial()
);
plane.rotation.x = -Math.PI * 0.5;
plane.position.y = -5;
plane.receiveShadow = true;
scene.add(plane);
/**
* Lights
*/
const ambientLight = new THREE.AmbientLight(0xffffff, 0.3);
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight("#ffffff", 0.3);
directionalLight.castShadow = true;
directionalLight.shadow.mapSize.set(1024, 1024);
directionalLight.shadow.camera.far = 40;
directionalLight.castShadow = true;
directionalLight.position.set(2, 2, -2);
scene.add(directionalLight);
const directionalLightCameraHelper = new THREE.CameraHelper(
directionalLight.shadow.camera
);
// 关闭助手
scene.add(directionalLightCameraHelper);
/**
* Sizes
*/
const sizes = {
width: box.clientWidth,
height: box.clientHeight,
};
window.addEventListener("resize", () => {
// Update sizes
sizes.width = box.clientWidth;
sizes.height = box.clientHeight;
// Update camera
camera.aspect = sizes.width / sizes.height;
camera.updateProjectionMatrix();
// Update renderer
renderer.setSize(sizes.width, sizes.height);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
});
/**
* Camera
*/
// Base camera
camera = new THREE.PerspectiveCamera(
75,
sizes.width / sizes.height,
0.1,
100
);
camera.position.set(4, 4, 6);
scene.add(camera);
/**
* Renderer
*/
renderer = new THREE.WebGLRenderer();
renderer.setSize(sizes.width, sizes.height);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.setClearColor("#111");
renderer.shadowMap.enabled = true;
box.appendChild(renderer.domElement);
// Controls
controls = new OrbitControls(camera, renderer.domElement);
// controls.enableDamping = true;
};
const tick = () => {
const elapsedTime = clock.getElapsedTime();
controls?.update();
// Update material
updateOffsetData();
if (uniform?.uTime) {
uniform.uTime.value = elapsedTime;
}
// Render
renderer.render(scene, camera);
// Call tick again on the next frame
window.requestAnimationFrame(tick);
};
const updateOffsetData = () => {
if (analyser?.getFrequencyData) {
analyser.getFrequencyData();
const analyserData = analyser?.data;
let sum = 0;
for (let i = 0; i < analyserData.length; i++) {
sum += analyserData[i];
}
sum /= analyserData.length * 25.5;
uniform.uStrength.value = sum;
}
};
const play = () => {
const listener = new THREE.AudioListener();
const audio = new THREE.Audio(listener);
const file = "/three-cesium-examples/public/files/audio/Avicii-WeBurn.mp3";
mediaElement = new Audio(file);
mediaElement.play();
audio.setMediaElementSource(mediaElement);
analyser = new THREE.AudioAnalyser(audio, fftSize);
};
const pause = () => {
mediaElement.pause();
};
const createButton = () => {
const playButton = document.createElement("button");
playButton.textContent = "Play";
playButton.style.position = "absolute";
playButton.style.right = "140px";
playButton.style.top = "30px";
playButton.style.padding = "10px 20px";
box.appendChild(playButton);
playButton.addEventListener("click", play);
const pauseButton = document.createElement("button");
pauseButton.textContent = "Pause";
pauseButton.style.position = "absolute";
pauseButton.style.right = "30px";
pauseButton.style.top = "30px";
pauseButton.style.padding = "10px 20px";
box.appendChild(pauseButton);
pauseButton.addEventListener("click", pause);
};
init();
createButton();
tick();
तकनीकी आदान-प्रदान समूह
सः ३० वर्षाणाम् अनुसरणं प्रौयोगिक क्रमबद्धता युक्तं, आलंकार, जावा, जावास्विस्च, ph, css, सद्भावना संस्कृती, ph, css निर्वहनशील भाषा सुनावंश, ससरोत विद्वान विपक्षी विद्वान विनियोग विनियोग विनियोग विनियोग्य विवेचन विनियोग विनियोग विनियोग विनियोग विनियोग विनियोग विनियोग विनियोग विनियोग विनियोग विनियोग विनियोग
