[对于初学者]介绍三个光纤X DREI X打字稿！从图像创建像素艺术和动态动画

//导入React和与“ React”中导入{USESTATE}的Trix.js相关库； //常数设置：const default_pixel_size = 64; // - DEFAULT_PIXEL_SIZE: Default size (pixel count) when shrinking an image // ==== // App components: // - Central management of UI (image loading, pixel size setting, animation operations) // - Place two Canvas (pixel scenes and background scenes) // ==== const App = () => { // State Management: const [tempPixelSize, SetTemppixelsize] = Usestate<number> （default_pixel_size）; //- temppixelsize：输入表单上的临时像素大小返回（<div style={{ width: "100vw", height: "100vh" }}> {/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------<div className="absolute top-4 left-4 bg-white shadow-lg p-4 rounded-lg z-10 w-64 space-y-4"> {/ *选择图像文件 */} <input type="file" accept="image/*" className="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none" /> {/ *像素大小输入字段 */}<div className="flex items-center space-x-2"><label className="text-sm text-gray-700">像素大小：</label><input type="number" value={tempPixelSize} onChange={(e) => setteMppixelSize（number（e.target.value））} min =“ 1” max =“ 128” className =“ W-16边界边界边界灰色-300圆形MD PX-PX-2 PY-1 PY-1 TEXT-SM焦点：RING-2焦点：Ring-Blue-500 focus：Ring-blue-500 focus：outline ofline ofline ofline nline none” /> none“ />></div> {/ * RedisPlay按钮 */} <button className="w-full bg-green-600 text-white py-2 px-4 rounded-md hover:bg-green-700 transition">redisplay</button> {/ *动画控制按钮 */}<div className="flex flex-wrap gap-2"><button className="flex-1 bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 transition">爆炸</button><button className="flex-1 bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 transition">波</button></div></div></div>）； };导出默认应用；

//导入React和与“ React”中导入{USESTATE}的Trix.js相关库； //常数设置：const default_pixel_size = 64; // - DEFAULT_PIXEL_SIZE: Default size (pixel count) when shrinking an image // ==== // App components: // - Central management of UI (image loading, pixel size setting, animation operations) // - Place two Canvas (pixel scenes and background scenes) // ==== const App = () => { // State Management: const [tempPixelSize, SetTemppixelsize] = Usestate<number> （default_pixel_size）; //- temppixelsize：输入表单上的临时像素大小const [pixelsize，setpixelsize] = usestate<number> （temppixelsize）; //- temppixelsize：输入表单上的临时像素大小const [imagesrc，setImagesrc] = usestate<string | null> （无效的）; //- imagesRC：导入图像的数据URL // ---- //选择图像文件时该怎么做：//-加载文件，将其转换为数据URL并将其设置在Imagesrc //中 -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------<HTMLInputElement> ）=> {const file = e.target.files？。[0];如果（！文件）返回； const Reader = new FileReader（）; reader.onload =（ev）=> {const url = ev.target?.result; if（type url！==“字符串”）返回; //更新像素大小，然后设置image sear setPixelsize（temppixelsize）; setImagesRC（url）; }; Reader.ReadAsdataurl（file）; };返回 （<div style={{ width: "100vw", height: "100vh" }}> {/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------<div className="absolute top-4 left-4 bg-white shadow-lg p-4 rounded-lg z-10 w-64 space-y-4"> {/ *选择图像文件 */} <input type="file" accept="image/*" onChange={handleFileChange} className="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none" /> {/ *像素大小输入字段 */} ...</div></div> ）； };导出默认应用；

//导入React和与“ React”中导入{USESTATE}的Trix.js相关库； //常数设置：const default_pixel_size = 64; // - DEFAULT_PIXEL_SIZE: Default size (pixel count) when shrinking an image // ==== // App components: // - Central management of UI (image loading, pixel size setting, animation operations) // - Place two Canvas (pixel scenes and background scenes) // ==== const App = () => { // State Management: const [tempPixelSize, SetTemppixelsize] = Usestate<number> （default_pixel_size）; //- temppixelsize：输入表单上的临时像素大小const [pixelsize，setpixelsize] = usestate<number> （temppixelsize）; //- temppixelsize：输入表单上的临时像素大小const [imagesrc，setImagesrc] = usestate<string | null> （无效的）; //- imagesRC：导入图像的数据URL // ---- //选择图像文件时该怎么做：//-加载文件，将其转换为数据URL并将其设置在Imagesrc //中 -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------<HTMLInputElement> ）=> {...}; // ----- //按下“评论”按钮时处理：//-通过反映pixelsize中的temppixels的值来重新绘制图像// -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------<div style={{ width: "100vw", height: "100vh" }}> {/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------<div className="absolute top-4 left-4 bg-white shadow-lg p-4 rounded-lg z-10 w-64 space-y-4"> ... {/ * RedisPlay按钮 */} <button className="w-full bg-green-600 text-white py-2 px-4 rounded-md hover:bg-green-700 transition" onClick={reloadImage} >redisplay</button> {/ *动画控制按钮 */}<div className="flex flex-wrap gap-2"><button className="flex-1 bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 transition">爆炸</button><button className="flex-1 bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 transition">波</button></div></div></div>）； };导出默认应用；

//导入react和三分。与js相关的库导入{usestate}从“ react”; //常数设置：const default_pixel_size = 64; //- default_pixel_size：默认尺寸（以像素为单位）缩小图像const andimation_time = 3; //- animation_time：time（秒）到动画// ============================= //-中央UI管理（图像加载，像素尺寸，动画操作）//-安排2个canvas（像素和背景场景）<number> （default_pixel_size）; //- temppixelsize：输入表单上的临时像素大小const [pixelsize，setpixelsize] = usestate<number> （temppixelsize）; //- temppixelsize：输入表单上的临时像素大小const [imagesrc，setImagesrc] = usestate<string | null> （无效的）; //- imagesRC：导入图像const [animation，setAnimation] = usestate（“ default”）的数据URL; //  - 动画：当前动画模式//  -   -   -  //选择图像文件时该怎么做：//-加载文件，将其转换为数据URL并将其设置在Imagesrc // ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ React.ChangeEvent<HTMLInputElement> ）=> {...}; // ----- //按下“评论”按钮时处理：//-通过反映pixelsize中的temppixels的值来重新粉刷图像// --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Explosion动画控制：//-与超时//依次启动，结束和撤消爆炸// ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ setAnimation（“默认”）; }，animation_time * 2000）; }; // ----- //控制Wave动画：//  - 启动，结束和撤消Wave依次执行超时// ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- setAnimation（“ wave_end”）; }，animation_time * 1000）; setTimeout（（）=> {setAnimation（“ default”）;}，animation_time * 2000）; };返回 （<div style={{ width: "100vw", height: "100vh" }}> {/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------<div className="absolute top-4 left-4 bg-white shadow-lg p-4 rounded-lg z-10 w-64 space-y-4"> ... {/ *动画控制按钮 */}<div className="flex flex-wrap gap-2"> <button className="flex-1 bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 transition" onClick={controlExplosionAnimation} >爆炸</button><button className="flex-1 bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 transition" onClick={controlWaveAnimation} >波</button></div></div></div>）； };导出默认应用；

//导入react和三分。与js相关的库导入{usestate}从“ react”; //常数设置：const default_pixel_size = 64; //- default_pixel_size：默认尺寸（以像素为单位）缩小图像const andimation_time = 3; //- animation_time：time（秒）到动画// ============================= //-中央UI管理（图像加载，像素尺寸，动画操作）//-安排2个canvas（像素和背景场景）<number> （default_pixel_size）; //- temppixelsize：输入表单上的临时像素大小const [pixelsize，setpixelsize] = usestate<number> （temppixelsize）; //- temppixelsize：输入表单上的临时像素大小const [imagesrc，setImagesrc] = usestate<string | null> （无效的）; //- imagesRC：导入图像const [animation，setAnimation] = usestate（“ default”）的数据URL; //  - 动画：当前动画模式//  -   -   -  //选择图像文件时该怎么做：//-加载文件，将其转换为数据URL并将其设置在Imagesrc // ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ React.ChangeEvent<HTMLInputElement> ）=> {const file = e.target.files？。[0];如果（！文件）返回； const Reader = new FileReader（）; reader.onload =（ev）=> {const url = ev.target?.result; if（type url！==“字符串”）返回; //一次更新像素大小，然后设置image set setPixelsize（temppixelsize）; setImagesRC（url）; }; Reader.ReadAsdataurl（file）; }; // ----- //按下“评论”按钮时的操作：//-通过反映pixelsize中的temppixelsize的值//来重新绘制图像。 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ---- // Wave Animation Control：//-与超时依次启动，结束和撤消波动// ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ => {setAnimation（“ default”）; }，animation_time * 2000）; };返回 （<div style={{ width: "100vw", height: "100vh" }}> {/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------<div className="absolute top-4 left-4 bg-white shadow-lg p-4 rounded-lg z-10 w-64 space-y-4"> {/ *选择图像文件 */} <input type="file" accept="image/*" onChange={handleFileChange} className="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none" /> {/ *像素大小输入字段 */}<div className="flex items-center space-x-2"><label className="text-sm text-gray-700">像素大小：</label><input type="number" value={tempPixelSize} onChange={(e) => setteMppixelSize（number（e.target.value））} min =“ 1” max =“ 128” className =“ W-16边界边界边界灰色-300圆形MD PX-PX-2 PY-1 PY-1 TEXT-SM焦点：RING-2焦点：Ring-Blue-500 focus：Ring-blue-500 focus：outline ofline ofline ofline nline none” /> none“ />></div> {/ * RedisPlay按钮 */} <button className="w-full bg-green-600 text-white py-2 px-4 rounded-md hover:bg-green-700 transition" onClick={reloadImage} >redisplay</button> {/ *动画控制按钮 */}<div className="flex flex-wrap gap-2"> <button className="flex-1 bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 transition" onClick={controlExplosionAnimation} >爆炸</button><button className="flex-1 bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 transition" onClick={controlWaveAnimation} >波</button></div></div></div>）； };导出默认应用；

//导入react和三分。与js相关的库导入{usestate}从“ react”;从“三”中导入 *为三个； // ----- // PIXELINFO类型：管理每个像素的位置（X，Y，Z）和颜色（三。彩色）// -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- PixelInfo = { X：数字; Y：数字； Z：数字；颜色：三。彩色； }; //常数设置：const default_pixel_size = 64; //- default_pixel_size：默认尺寸（以像素为单位）缩小图像const andimation_time = 3; //- animation_time：花费到动画（秒）// ========= //应用程序组件：//-中央UI管理（图像加载，像素尺寸，动画操作）//-安排两个Canvas（Pixel Scene和croppppent Scenes）// ===================== const App =（）导出默认应用； // ===== // / createPixelData function: // - Get pixel data from the specified image using Canvas and convert it to an array of type PixelInfo // ===== const createPixelData = ( img: HTMLImageElement, targetWidth: number, targetHeight: number ): PixelInfo[] => { // Create a Canvas element and set it to the指定的尺寸const canvas = document.createelement（“ canvas”）; canvas.width = targetWidth; canvas.height = targetheight; const ctx = canvas.getContext（“ 2d”）;如果（！ctx）抛出新错误（“无2D上下文可用”）; //在画布上绘制图像并获取像素信息ctx.drawimage（img，0，0，targetWidth，targetheight）; const imgdata = ctx.getimagedata（0，0，targetWidth，targetheiight）; const data = imgdata.data; const结果：pixelinfo [] = [];令IDX = 0; //对于图像中的每个像素，获取RGBA值并将其转换为PixelInfo（令y = 0; y <targetheight; y ++）{for（让x = 0; x = 0; x <targetWidth; x ++）{const r = data [idx]，g = data [idx]，g = data [idx+1]，b = data [idx+1]，b = data [id data [id data [id data [idx+2] IDX += 4; //如果（a <30）继续； //忽略低透明像素（如果<30）； result.push（{//调整x，y坐标，以使图像中心是原点x：x- targetwidth / y：-y + targetheight / 2，z：0，//创建三个color，通过将rgb值转换为范围0到1 color：new three three.color：r / 255，r / 255，g / g / g / 255，b / 255）; }}返回结果; };

//导入react和与“ react”的trip.js相关库导入{usestate，usefeft};从“三”中导入 *为三个； // ----- // PIXELINFO类型：管理每个像素的位置（X，Y，Z）和颜色（三。彩色）// -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- type PixelInfo = { X：数字; Y：数字； Z：数字；颜色：三。彩色； }; //常数设置：const default_pixel_size = 64; //- default_pixel_size：默认尺寸（以像素为单位）缩小图像const andimation_time = 3; //- animation_time：花费到动画（秒）// ========== //应用程序组件：//-中央UI管理（图像加载，像素尺寸，动画操作）//-放置两个canvas（pixel场景和背景场景）<PixelInfo[] | null> （无效的）; //-像素：从图像const [FileChangeCount，setFileChangeCount]生成的像素信息数组<number>（0）; //- filechangecount：图像的更改数（用于触发重新加载）const [temppixelsize，setteMppixelSize] = usestate<number> （default_pixel_size）; //- temppixelsize：输入表单上的临时像素大小const [pixelsize，setpixelsize] = usestate<number> （temppixelsize）; //- temppixelsize：输入表单上的临时像素大小const [imagesrc，setImagesrc] = usestate<string | null> （无效的）; //- imagesRC：导入图像const [animation，setAnimation] = usestate（“ default”）的数据URL; //  - 动画：当前动画模式... // ----- //当图像或像素化更改时，从图像生成像素数据// -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Update fileChangeCount as a当图像更改setFileChangeCount（（（prev）=> prev + 1）时，触发器; //加载新图像并使用Onload事件const img = new Image（）生成像素数据; img.onload =（）=> {const pixel = createpixeldata（img，pixelsize，pixelsize）; setPixels（pix）; }; img.src = imagesrc; }，[pixelsize，imagesrc]）;返回 （<div style={{ width: "100vw", height: "100vh" }}> {/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</div> ）； };导出默认应用； // ==== // createpixeldata函数：//-使用画布从指定图像中获取像素数据，然后将其转换为一系列PixelInfo // ================================（img：img：htmlimageelement，htmlimageElement，htmlimageElement，targetWidth，targetWidth，norume norume，number，targetheight：targetheight and a cixeliatify and cixelinfo and cixelinfo/ cixelinfo/ cixelinfo = pixelinfo = /////////]大小const canvas = document.createelement（“ canvas”）; canvas.width = targetWidth; canvas.height = targetheight; const ctx = canvas.getContext（“ 2d”）;如果（！ctx）抛出新错误（“无2D上下文可用”）; //在画布上绘制图像并获取像素信息ctx.drawimage（img，0，0，targetWidth，targetheight）; const imgdata = ctx.getimagedata（0，0，targetWidth，targetheiight）; const data = imgdata.data; const结果：pixelinfo [] = [];令IDX = 0; //对于图像中的每个像素，获取RGBA值并将其转换为PixelInfo（令y = 0; y <targetheight; y ++）{for（让x = 0; x = 0; x <targetWidth; x ++）{const r = data [idx]，g = data [idx]，g = data [idx+1]，b = data [idx+1]，b = data [id data [id data [id data [idx+2] IDX += 4; //如果（a <30）继续，请忽略透明度较低的像素（a <30）； result.push（{//调整x，y坐标，因此图像中心是原点x：x- targetWidth / y：-y + targetheight / 2，z：0，//创建三个color，通过将RGB值转换为范围0到1 color：new three three.color：r / 255，r / 255，g / g / 255，b / b /}）， }}返回结果; };

//导入React和与“@react-three/drei”的triph.js相关库导入{orbitControls};从“@react-three/fiber”导入{canvas};导入{usestate，usefeft，useref}来自“ react”；从“三”中导入 *为三个； // ----- // PIXELINFO类型：管理每个像素的位置（X，Y，Z）和颜色（三。彩色）// --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------以秒为单位花费的时间// ================ //- central UI管理（图像加载，像素大小，动画操作）//-安排两个Canvas（Pixel场景和背景场景）// ====================（）=（）=> {...<div style={{ width: "100vw", height: "100vh" }}> {/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ <div className="absolute top-0 left-0 w-full h-full z-[1]"><Canvas camera={{ far: 5000, position: [0, 0, 100] }}> {/ *基本照明设置 */}<ambientLight intensity={1} /><directionalLight position={[100, 200, 100]} intensity={1} /> {/ * OrbitControls允许您使用鼠标操作旋转场景 */}<OrbitControls /> {/ *仅当存在像素数据时 */}}}}}}}}}}}</Canvas></div></div> ）； };导出默认应用； // ==== // createPixelData function: // - Get pixel data from the specified image using Canvas and convert it to an array of type PixelInfo // ===== const createPixelData = ( img: HTMLImageElement, targetWidth: number, targetHeight: number ): PixelInfo[] => { ... return result; };

//导入React和与“@react-three/drei”的triph.js相关库导入{orbitControls};从“@react-three/fiber”导入{canvas};导入{usestate，usefeft，useref}来自“ react”；从“三”中导入 *为三个； // ----- // PIXELINFO类型：管理每个像素的位置（X，Y，Z）和颜色（三。彩色）// --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------秒为动画的时间// ==== // pixelgrid组件：//-呈现像素数据的组组，和//-控制示例显示动画（逐渐放大）和移动动画（爆炸/wave）// =====像素：Pixelinfo [];动画：字符串； Filechangecount：数字； }; const pixelgrid =（{{pixelsize，pixels，animation，filechangecount，}：pixelgridprops）=> {// triph.js中对组对象的引用。用于对所有像素进行分组<THREE.Group>（无效的）; //将每个Pixelbox组件放入由GroupRef管理的组中以渲染返回（<group ref={groupRef}> {pixels.map（（Pixel，i）=>（（<PixelBox key={i} pixel={pixel} scale={1} /> ）}}</group> ）； }; // ==== // Pixelbox组件：//-用于绘制单个Pixel（box）// ==============================比例：数字； }; const pixelbox =（{{pixel，scale}：pixelboxprops）=> {//网格：使用框的几何和材料与位置和比例返回（ <mesh position={[pixel.x, pixel.y, pixel.z]} scale={[scale, scale, scale]}><boxGeometry args={[1, 1, 1]} /><meshStandardMaterial color={pixel.color} /></mesh> ）； }; // ==== //应用程序组件：//-中央UI管理（图像加载，像素大小，动画操作）//-安排两个画布（像素场景和背景场景）// =============== const app =（）=> {...<div style={{ width: "100vw", height: "100vh" }}> {/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ <div className="absolute top-0 left-0 w-full h-full z-[1]"><Canvas camera={{ far: 5000, position: [0, 0, 100] }}> {/ *基本照明设置 */}<ambientLight intensity={1} /><directionalLight position={[100, 200, 100]} intensity={1} /> {/ * OrbitControls允许您使用鼠标操作旋转场景 */}<OrbitControls /> {/ *仅当存在像素数据时 */} {pixels &&（ <PixelGrid pixelSize={pixelSize} pixels={pixels} animation={animation} fileChangeCount={fileChangeCount} /> ）</Canvas></div></div> ）； };导出默认应用； // ==== // createpixeldata函数：//-使用帆布从指定图像获取像素数据，然后将其转换为一系列PixelInfo // =======================================（img：htmlimageelement，htmlimageelement，htmlimageelement，targetWidth，targetWidth，targetWidth：number，targetheight：targetheight：number）：

//导入React和与“@react-three/drei”的triph.js相关库导入{orbitControls};从“@react-three/fiber”中导入{canvas，useframe};导入{usestate，usefeft，useref}来自“ react”；从“三”中导入 *为三个； // ----- // PIXELINFO类型：每个像素的位置（X，Y，Z）和颜色（三。彩色）// -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Animation_Time：时间（以秒为单位）到动画// ====================================== //-呈现像素数据的组，和//-控制显示动画（逐渐放大）和移动动画（爆炸/wave/wave）// =================== type pixelgridprops = pixelgridprops = {pixelsize：{pixelsize：编号：编号：编号;像素：Pixelinfo [];动画：字符串； Filechangecount：数字； }; const pixelgrid =（{{pixelsize，pixels，animation，filechangecount，}：pixelgridprops）=> {// triph.js中对组对象的引用。用于对所有像素进行分组<THREE.Group>（无效的）; // ----- //显示动画：以阶段显示的像素的处理// ---- //管理每个像素的比例尺状态（初始状态全部为0 =隐藏）const [scales，setScales] = usestate<number[]> （array（pixels.length）.fill（0））; // ScaleProgressRef：保持每个批次const scar scaleprogressref = useref（0）的显示进度（累积时间）; // BatchIndexRef：管理当前显示的批处理const batchindexref = useref（0）; // UseFrame to update each frame and display pixels step by step useFrame((_, delta) => { // If all batches are displayed, no further processing is performed if (batchIndexRef.current > pixels.length / pixelSize) return; // Adds the time since the previous frame scaleProgressRef.current += delta; // Calculates the time threshold to display the当前const阈值= batchindexref.current *（animation_time /（pixels.length / pixelsize））;属于当前批处理startindex = batchindexref.current * pixelsize; setScales（新闻范围）; //将每个Pixelbox组件放入由GroupRef管理的组中并渲染（<group ref={groupRef}> {pixels.map（（Pixel，i）=>（（<PixelBox key={i} pixel={pixel} scale={scales[i]} /> ）}}</group> ）； }; // ==== // Pixelbox组件：//-用于绘制单个Pixel（box）// ==============================比例：数字； }; const pixelbox =（{{pixel，scale}：pixelboxprops）=> {//网格：使用框的几何和材料与位置和比例返回（ <mesh position={[pixel.x, pixel.y, pixel.z]} scale={[scale, scale, scale]}><boxGeometry args={[1, 1, 1]} /><meshStandardMaterial color={pixel.color} /></mesh> ）； }; // ==== //应用程序组件：//-中央UI管理（图像加载，像素大小，动画操作）//-安排两个画布（像素场景和背景场景）// =============== const app =（）=> {...<div style={{ width: "100vw", height: "100vh" }}> {/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ <div className="absolute top-0 left-0 w-full h-full z-[1]"><Canvas camera={{ far: 5000, position: [0, 0, 100] }}> {/ *基本照明设置 */}<ambientLight intensity={1} /><directionalLight position={[100, 200, 100]} intensity={1} /> {/ * OrbitControls允许您使用鼠标操作旋转场景 */}<OrbitControls /> {/ *仅当存在像素数据时 */} {pixels &&（ <PixelGrid pixelSize={pixelSize} pixels={pixels} animation={animation} fileChangeCount={fileChangeCount} /> ）</Canvas></div></div> ）； };导出默认应用； // ==== // createpixeldata函数：//-使用帆布从指定图像获取像素数据，然后将其转换为一系列PixelInfo // =======================================（img：htmlimageelement，htmlimageelement，htmlimageelement，targetWidth，targetWidth，targetWidth：number，targetheight：targetheight：number）：

//导入React和与“@react-three/drei”的triph.js相关库导入{orbitControls};从“@react-three/fiber”中导入{canvas，useframe};导入{usestate，usefeft，useref}来自“ react”；从“三”中导入 *为三个； // ----- // PIXELINFO类型：每个像素的位置（X，Y，Z）和颜色（三。彩色）// -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Animation_Time：时间（以秒为单位）到动画// ====================================== //-呈现像素数据的组，和//-控制显示动画（逐渐放大）和移动动画（爆炸/wave/wave）// =================== type pixelgridprops = pixelgridprops = {pixelsize：{pixelsize：编号：编号：编号;像素：Pixelinfo [];动画：字符串； Filechangecount：数字； }; const pixelgrid =（{{pixelsize，pixels，animation，filechangecount，}：pixelgridprops）=> {// triph.js中对组对象的引用。用于对所有像素进行分组<THREE.Group>（无效的）; // ----- //显示动画：以阶段显示的像素的处理// ---- //管理每个像素的比例尺状态（初始状态全部为0 =隐藏）const [scales，setScales] = usestate<number[]> （array（pixels.length）.fill（0））; // ScaleProgressRef：保持每个批次const scar scaleprogressref = useref（0）的显示进度（累积时间）; // BatchIndexRef：管理当前显示的批处理const batchindexref = useref（0）; //参考以确定图像文件是否已更改，const prevfilechangecountref = useref（filechangecount）; //重新加载图像useseffect（（）=> {if（filechangecount！== prevfilechangecountref.current）时，请重置所有像素的显示状态（比例） scaleprogressref.current = 0; //使用Frame更新每个帧，并逐步显示Pixels Useframe delta）=> {//如果可见所有批处理，则在（batchindexexref.current> pixels.length / pixelsize）return; //添加时间以来，自上一个帧scaleprogressref.current += delta; //计算显示当前批处理const阈值的时间阈值= batchindexref.current *（animation_time /（pixels.length / pixelsize）））; //当经过的时间超过阈值时，请开始显示下一个批次的像素，如果（ScaleProgressRef.Current> threshold）{//创建当前比例尺状态const newscales = [... scales]的副本; //计算属于当前批处理const startIndex = batchindexref.current * pixelsize的像素的索引范围; const endIndex = math.min（startIndex + pixelsize，pixels.length）; //将相应的像素刻度显示为1（让i = startIndex; i <endIndex; i ++）{newscales [i] = 1; } //设置更新的比例尺状态setScales（newscales）; //继续进行下一个Batchindexref.current += 1; }}）; //每个像素框组件都放在由GroupRef管理的组中以渲染返回（<group ref={groupRef}> {pixels.map（（Pixel，i）=>（（<PixelBox key={i} pixel={pixel} scale={scales[i]} /> ）}}</group> ）； }; // ==== // Pixelbox组件：//-用于绘制单个Pixel（box）// ==============================比例：数字； }; const pixelbox =（{{pixel，scale}：pixelboxprops）=> {//网格：使用框的几何和材料与位置和比例返回（ <mesh position={[pixel.x, pixel.y, pixel.z]} scale={[scale, scale, scale]}><boxGeometry args={[1, 1, 1]} /><meshStandardMaterial color={pixel.color} /></mesh> ）； }; // ==== //应用程序组件：//-中央UI管理（图像加载，像素大小，动画操作）//-安排两个画布（像素场景和背景场景）// =============== const app =（）=> {...<div style={{ width: "100vw", height: "100vh" }}> {/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ <div className="absolute top-0 left-0 w-full h-full z-[1]"><Canvas camera={{ far: 5000, position: [0, 0, 100] }}> {/ *基本照明设置 */}<ambientLight intensity={1} /><directionalLight position={[100, 200, 100]} intensity={1} /> {/ * OrbitControls允许您使用鼠标操作旋转场景 */}<OrbitControls /> {/ *仅当存在像素数据时 */} {pixels &&（ <PixelGrid pixelSize={pixelSize} pixels={pixels} animation={animation} fileChangeCount={fileChangeCount} /> ）</Canvas></div></div> ）； };导出默认应用； // ==== // createpixeldata函数：//-使用帆布从指定图像获取像素数据，然后将其转换为一系列PixelInfo // =======================================（img：htmlimageelement，htmlimageelement，htmlimageelement，targetWidth，targetWidth，targetWidth：number，targetheight：targetheight：number）：

//导入React和与“@react-three/drei”的triph.js相关库导入{orbitControls};从“@react-three/fiber”中导入{canvas，useframe};导入{usestate，usefeft，useref}来自“ react”；从“三”中导入 *为三个； // ----- // PIXELINFO类型：每个像素的位置（X，Y，Z）和颜色（三。彩色）// -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Animation_Time：时间（以秒为单位）到动画// ====================================== //-呈现像素数据的组，和//-控制显示动画（逐渐放大）和移动动画（爆炸/wave/wave）// =================== type pixelgridprops = pixelgridprops = {pixelsize：{pixelsize：编号：编号：编号;像素：Pixelinfo [];动画：字符串； Filechangecount：数字； }; const pixelgrid =（{{pixelsize，pixels，animation，filechangecount，}：pixelgridprops）=> {// triph.js中对组对象的引用。用于对所有像素进行分组<THREE.Group>（无效的）; // ---- //显示动画：以各个阶段显示的像素的处理// ----- ... // ----- // ----- //移动动画：使用爆炸或波效应更改像素位置//-----------------------------------如果有一个更改const lastAnimationRef = useref = useRef = useRef（animation） //管理动画进度（0到1） //为每个像素（爆炸效应）生成随机散射目的地坐标，const const scatspositionsRef = useref（pixels.map.map（（）=>（{x：{x：（Math.random（） -  0.5） -  0.5） * 100，y： //再生随机散射时，当图像或像素数据更新时使用useffect（（）=> {sctatepositionsref.current = pixels.map.map（（）=>（{x：{x：at math.random（） -  0.5） * 100，y： [像素]）; // Update the position of each pixel every frame with useFrame to match the animation progress useFrame((_, delta) => { // Reset progress if the animation state changes if (animation !== lastAnimationRef.current) { lastAnimationRef.current = animation; animationProgressRef.current = 0; } // No position updates occur in the "default" state if (animation ===“默认”; //更新动画进度（使用Animation_time归一化）（AnimationProgressref.current <1） SmoothProgress = Math.sin（（（AnimationProgressRef.Current * Math.pi） / 2）;从原始位置到随机散射位置，如果（动画===“爆炸式”）{targetx = scatterpositionsref.current [i] .x * smoothprogress + pixel.x *（1-平滑progress）; sctationpositionsref.current [i] .z *平滑progress + pixel.z *（1-平滑播放）; sctatePositionSref.Current [i] .y *（1-平滑播放） + pixel.y * speame targez = sctatepositionsref.current [i] .z *（1-平滑型） Targetz）;}）; //将每个Pixelbox组件放入由GroupRef管理的组中以渲染返回（<group ref={groupRef}> {pixels.map（（Pixel，i）=>（（<PixelBox key={i} pixel={pixel} scale={scales[i]} /> ）}}</group> ）； }; // ==== // Pixelbox组件：//-用于绘制单个Pixel（box）// ==============================比例：数字； }; const pixelbox =（{{pixel，scale}：pixelboxprops）=> {//网格：使用框的几何和材料与位置和比例返回（ <mesh position={[pixel.x, pixel.y, pixel.z]} scale={[scale, scale, scale]}><boxGeometry args={[1, 1, 1]} /><meshStandardMaterial color={pixel.color} /></mesh> ）； }; // ==== //应用程序组件：//-中央UI管理（图像加载，像素大小，动画操作）//-安排两个画布（像素场景和背景场景）// =============== const app =（）=> {...<div style={{ width: "100vw", height: "100vh" }}> {/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ <div className="absolute top-0 left-0 w-full h-full z-[1]"><Canvas camera={{ far: 5000, position: [0, 0, 100] }}> {/ *基本照明设置 */}<ambientLight intensity={1} /><directionalLight position={[100, 200, 100]} intensity={1} /> {/ * OrbitControls允许您使用鼠标操作旋转场景 */}<OrbitControls /> {/ *仅当存在像素数据时 */} {pixels &&（ <PixelGrid pixelSize={pixelSize} pixels={pixels} animation={animation} fileChangeCount={fileChangeCount} /> ）</Canvas></div></div> ）； };导出默认应用； // ==== // createpixeldata函数：//-使用帆布从指定图像获取像素数据，然后将其转换为一系列PixelInfo // =======================================（img：htmlimageelement，htmlimageelement，htmlimageelement，targetWidth，targetWidth，targetWidth：number，targetheight：targetheight：number）：

//导入React和与“@react-three/drei”的triph.js相关库导入{orbitControls};从“@react-three/fiber”中导入{canvas，useframe};导入{usestate，usefeft，useref}来自“ react”；从“三”中导入 *为三个； // ----- // PIXELINFO类型：每个像素的位置（X，Y，Z）和颜色（三。彩色）// -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Animation_Time：时间（以秒为单位）到动画// ====================================== //-呈现像素数据的组，和//-控制显示动画（逐渐放大）和移动动画（爆炸/wave/wave）// =================== type pixelgridprops = pixelgridprops = {pixelsize：{pixelsize：编号：编号：编号;像素：Pixelinfo [];动画：字符串； Filechangecount：数字； }; const pixelgrid =（{{pixelsize，pixels，animation，filechangecount，}：pixelgridprops）=> {// triph.js中对组对象的引用。用于对所有像素进行分组<THREE.Group>（无效的）; // ---- //显示动画：以各个阶段显示的像素的处理// ----- ... // ----- // ----- //移动动画：使用爆炸或波效应更改像素位置//-----------------------------------如果有一个更改const lastAnimationRef = useref = useRef = useRef（animation） //管理动画进度（0到1） //为每个像素（爆炸效应）生成随机散射目的地坐标，const const scatspositionsRef = useref（pixels.map.map（（）=>（{x：{x：（Math.random（） -  0.5） -  0.5） * 100，y： //再生随机散射时，当图像或像素数据更新时使用useffect（（）=> {sctatepositionsref.current = pixels.map.map（（）=>（{x：{x：at math.random（） -  0.5） * 100，y： [像素]）; // Update the position of each pixel every frame with useFrame to match the animation progress useFrame((_, delta) => { // Reset progress if the animation state changes if (animation !== lastAnimationRef.current) { lastAnimationRef.current = animation; animationProgressRef.current = 0; } // No position updates occur in the "default" state if (animation ===“默认”; //更新动画进度（使用Animation_time归一化）（AnimationProgressref.current <1） SmoothProgress = Math.sin（（（AnimationProgressRef.Current * Math.pi） / 2）;从原始位置到随机散射位置，如果（动画===“爆炸式”）{targetx = scatterpositionsref.current [i] .x * smoothprogress + pixel.x *（1-平滑progress）; sctationpositionsref.current [i] .z *平滑progress + pixel.z *（1-平滑播放）; sctatepositionsref.current [i] .y *（1-平滑播放） + pixel.y *平滑progress; “ wave_start”）{targetz = math.sin（（Pixel.x + pixel.z + andionprogressref.current * 10） * 0.3） * 5 * speame progress; AnimationProgressRef.current） * 10） * 0.3 * 5 *（1-平滑播放）//更新相应的Pixel groupRef.current的网格位置？ //将每个Pixelbox组件放入由GroupRef管理的组中以渲染返回（<group ref={groupRef}> {pixels.map（（Pixel，i）=>（（<PixelBox key={i} pixel={pixel} scale={scales[i]} /> ）}}</group> ）； }; // ==== // Pixelbox组件：//-用于绘制单个Pixel（box）// ==============================比例：数字； }; const pixelbox =（{{pixel，scale}：pixelboxprops）=> {//网格：使用框的几何和材料与位置和比例返回（ <mesh position={[pixel.x, pixel.y, pixel.z]} scale={[scale, scale, scale]}><boxGeometry args={[1, 1, 1]} /><meshStandardMaterial color={pixel.color} /></mesh> ）； }; // ==== //应用程序组件：//-中央UI管理（图像加载，像素大小，动画操作）//-安排两个画布（像素场景和背景场景）// =============== const app =（）=> {...<div style={{ width: "100vw", height: "100vh" }}> {/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ <div className="absolute top-0 left-0 w-full h-full z-[1]"><Canvas camera={{ far: 5000, position: [0, 0, 100] }}> {/ *基本照明设置 */}<ambientLight intensity={1} /><directionalLight position={[100, 200, 100]} intensity={1} /> {/ * OrbitControls允许您使用鼠标操作旋转场景 */}<OrbitControls /> {/ *仅当存在像素数据时 */} {pixels &&（ <PixelGrid pixelSize={pixelSize} pixels={pixels} animation={animation} fileChangeCount={fileChangeCount} /> ）</Canvas></div></div> ）； };导出默认应用； // ==== // createpixeldata函数：//-使用帆布从指定图像获取像素数据，然后将其转换为一系列PixelInfo // =======================================（img：htmlimageelement，htmlimageelement，htmlimageelement，targetWidth，targetWidth，targetWidth：number，targetheight：targetheight：number）：

//导入react和三分。与js相关的库导入react，{usestate，useref，memo，semo，useffect}来自“ react”；从“@react-three/fiber”中导入{canvas，useframe};导入{cloud，orbitControls，stars}来自“@react-three/drei”；从“三”中导入 *为三个； // ----- // PIXELINFO类型：管理每个像素的位置（X，Y，Z）和颜色（三。彩色）// -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- default_pixel_size = 64; const animation_time = 3; // ==== // PixelGrid组件：//-渲染像素数据的组和//-控制示例显示动画（逐渐放大）和移动动画（爆炸/wave）// ================= pixelgridprops = {pixelsize = {pixelsize：pixelsize：number;像素：Pixelinfo [];动画：字符串； Filechangecount：数字； }; const pixelgrid =（{{pixelsize，pixels，animation，filechangecount，}：pixelgridprops）=> {... // / /将每个pixelbox组件放在由GroupRef管理的组中以呈现返回的组（<group ref={groupRef}> {pixels.map（（Pixel，i）=>（（<PixelBox key={i} pixel={pixel} scale={scales[i]} /> ）}}</group> ）； }; // ==== // Pixelbox组件：//-用于绘制单个Pixel（box）// ==============================比例：数字； }; const pixelbox =（{{pixel，scale}：pixelboxprops）=> {//网格：使用框的几何和材料与位置和比例返回（ <mesh position={[pixel.x, pixel.y, pixel.z]} scale={[scale, scale, scale]}><boxGeometry args={[1, 1, 1]} /><meshStandardMaterial color={pixel.color} /></mesh> ）； }; // ==== //应用程序组件：//-中央UI管理（图像加载，像素大小，动画操作）//-安排两个画布（像素场景和背景场景）// =============== const app =（）=> {...<div style={{ width: "100vw", height: "100vh" }}> {/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- <div className="absolute top-0 left-0 w-full h-full z-[-1]"><Canvas camera={{ position: [0, 5, 15], fov: 50 }} style={{ background: "black" }} ><ambientLight intensity={0.5} /><pointLight position={[10, 10, 10]} intensity={0.5} color="white" /><BackgroundScene /></Canvas></div></div> ）； }; // ==== // createPixelData function: // - Get pixel data from the specified image using Canvas and convert it to an array of type PixelInfo // ===== const createPixelData = ( img: HTMLImageElement, targetWidth: number, targetHeight: number ): PixelInfo[] => { ... return result; }; // ===== //背景Scene组件：//-一个用于在背景中显示星空和云的组件//-与备忘录包裹以防止不必要的重新刷新// ================= <Stars radius={100} // 星が存在する空間の半径 depth={50} // 星の配置される深さの範囲 count={5000} // 表示する星の総数 factor={6} // 星の大きさ調整用の係数 saturation={1} // 色の鮮やかさ fade // 遠くの星がフェードアウトする効果 /> {/ *带有云组件的Express Clouds */} <Cloud position={[0, 0, 0]} // 雲の中心位置 opacity={0.1} // 雲の不透明度（低いほど透明） speed={0.2} // 雲の動く速度 scale={[10, 10, 10]} // 雲全体のサイズ segments={20} // 雲を構成するパーティクルの数 /></> ）； }）;导出默认应用；

//导入react和三分。与js相关的库导入react，{usestate，useref，memo，semo，useffect}来自“ react”；从“@react-three/fiber”中导入{canvas，useframe};导入{cloud，orbitControls，stars}来自“@react-three/drei”；从“三”中导入 *为三个； // ----- // PIXELINFO类型：管理每个像素的位置（X，Y，Z）和颜色（三。彩色）// -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- default_pixel_size = 64; const animation_time = 3; // ==== // PixelGrid组件：//-渲染像素数据的组和//-控制示例显示动画（逐渐放大）和移动动画（爆炸/wave）// ================= pixelgridprops = {pixelsize = {pixelsize：pixelsize：number;像素：Pixelinfo [];动画：字符串； Filechangecount：数字； }; const pixelgrid =（{{pixelsize，pixels，animation，filechangecount，}：pixelgridprops）=> {// triph.js中对组对象的引用。用于对所有像素进行分组<THREE.Group>（无效的）; // ----- //显示动画：以阶段显示的像素的处理// ---- //管理每个像素的比例尺状态（初始状态全部为0 =隐藏）const [scales，setScales] = usestate<number[]> （array（pixels.length）.fill（0））; // ScaleProgressRef：保持每个批次const scar scaleprogressref = useref（0）的显示进度（累积时间）; // BatchIndexRef：管理当前显示的批处理const batchindexref = useref（0）; //参考以确定图像文件是否已更改，const prevfilechangecountref = useref（filechangecount）; //重新加载图像useseffect（（）=> {if（filechangecount！== prevfilechangecountref.current）时，请重置所有像素的显示状态（比例） scaleprogressref.current = 0; //使用Frame更新每个帧，并逐步显示Pixels Useframe delta）=> {//如果可见所有批处理，则在（batchindexexref.current> pixels.length / pixelsize）return; //添加时间以来，自上一个帧scaleprogressref.current += delta; //计算显示当前批处理const阈值的时间阈值= batchindexref.current *（animation_time /（pixels.length / pixelsize）））; //当经过的时间超过阈值时，请开始显示下一个批次的像素，如果（ScaleProgressRef.Current> threshold）{//创建当前比例尺状态const newscales = [... scales]的副本; //计算属于当前批处理const startIndex = batchindexref.current * pixelsize的像素的索引范围; const endIndex = math.min（startIndex + pixelsize，pixels.length）; //将相应的像素刻度显示为1（让i = startIndex; i <endIndex; i ++）{newscales [i] = 1; } //设置更新的比例尺状态setScales（newscales）; //继续进行下一个Batchindexref.current += 1; }}）; // ---- //移动动画：使用爆炸或波浪效应更改像素位置//--- //参考以与先前的动画状态进行比较，如果存在更改const lastAnimationRef = useref（animation）； //管理动画进度（0-1）const AnimationProgressref = useref（0）; //为每个像素（爆炸效应）生成随机散射坐标，const const sctationPositionsRef = useref（pixels.map.map（（）=>（{x：{x：（Math.random（） -  0.5） -  0.5） * 100，y： //在图像或像素数据被更新时，再生随机散射坐标坐标（（（）=> {sctatePositionSref.current = pixels.map.map（（）=>（{x：{x：atrandom（） -  0.5） * 100，y： [像素]）; // Update the position of each pixel every frame with useFrame to match the animation progress useFrame((_, delta) => { // Reset the progress if the animation state changes if (animation !== lastAnimationRef.current) { lastAnimationRef.current = animation; animationProgressRef.current = 0; } // No position updates occur in the "default" state if (animation ===“默认”; //更新动画进度（使用Animation_time归一化）（AnimationProgressref.current <1） SmoothProgress = Math.sin（（（AnimationProgressRef.Current * Math.pi） / 2）;从原始位置到随机散射位置，如果（动画===“爆炸式”）{targetx = scatterpositionsref.current [i] .x * smoothprogress + pixel.x *（1-平滑progress）; sctatepositionsref.current [i] .z *平滑progress + pixel.z *（1-平滑播放）; sctatepositionsref.current [i] .y *（1-平滑播放） + pixel.y *平滑progress; “ wave_start”）{targetz = math.sin（（Pixel.x + pixel.z + andionprogressref.current * 10） * 0.3） * 5 * speame progress; AnimationProgressRef.current） * 10） * 0.3 * 5 *（1-平滑播放）//更新相应的Pixel groupRef.current的网格位置？ //将每个Pixelbox组件放入由GroupRef管理的组中以渲染返回（<group ref={groupRef}> {pixels.map（（Pixel，i）=>（（<PixelBox key={i} pixel={pixel} scale={scales[i]} /> ）}}</group> ）； }; // ==== // Pixelbox组件：//-用于绘制单个Pixel（box）// ==============================比例：数字； }; const pixelbox =（{{pixel，scale}：pixelboxprops）=> {//网格：使用框的几何和材料与位置和比例返回（ <mesh position={[pixel.x, pixel.y, pixel.z]} scale={[scale, scale, scale]}><boxGeometry args={[1, 1, 1]} /><meshStandardMaterial color={pixel.color} /></mesh> ）； }; // ==== //应用程序组件：//-中央UI管理（图像加载，像素大小，动画操作）//-安排两个帆布（像素场景和背景场景）// ==========================（）=> {//状态管理：//状态管理：//-- PixelSize：应用的实际像素大小//- -FileChangeCount：图像更改的数量（用于触发重新加载）//- imagesRC：导入image的数据URL //  - 动画：当前动画模式const [Pixels，setPixels = USESTATE] = USESTATE<PixelInfo[] | null> （无效的）; const [temppixelsize，setteMppixelSize] = usestate<number> （default_pixel_size）; const [pixelsize，setpixelsize] = usestate<number> （temppixelsize）; const [filechangecount，setFilechangecount] = Usestate<number> （0）; const [imagesrc，setImagesrc] = usestate<string | null> （无效的）; const [动画，setAnimation] = usestate（“ default”）; // ----- //选择图像文件时该怎么办：//-加载文件，将其转换为数据URL并将其设置为Imagesrc // ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------<HTMLInputElement> ）=> {const file = e.target.files？。[0];如果（！文件）返回； const Reader = new FileReader（）; reader.onload =（ev）=> {const url = ev.target?.result; if（type url！==“字符串”）返回; //一次更新像素大小，然后设置image set setPixelsize（temppixelsize）; setImagesRC（url）; }; Reader.ReadAsdataurl（file）; }; // ----- //按下“评论”按钮时处理：//-通过反映pixelsize中的temppixels的值来重新绘制图像// -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- }，[pixelsize，imagesrc]）; // ----- //控制爆炸动画：//  - 启动，结束和撤消爆炸依次执行超时// ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- setAnimation（“ fresposion_end”）; }，animation_time * 1000）; setTimeout（（）=> {console.log（“ default”）; setAnimation（“ default”）;}，animation_time * 2000）; }; // ----- // Wave Animation Control：//  - 启动，结束和撤消Waves顺序执行超时// ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------<div style={{ width: "100vw", height: "100vh" }}> {/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------<div className="absolute top-4 left-4 bg-white shadow-lg p-4 rounded-lg z-10 w-64 space-y-4"> {/ *选择图像文件 */} <input type="file" accept="image/*" onChange={handleFileChange} className="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none" /> {/ *像素大小输入字段 */}<div className="flex items-center space-x-2"><label className="text-sm text-gray-700">像素大小：</label><input type="number" value={tempPixelSize} onChange={(e) => setteMppixelSize（number（e.target.value））} min =“ 1” max =“ 128” className =“ W-16边界边界边界灰色-300圆形MD PX-PX-2 PY-1 PY-1 TEXT-SM焦点：RING-2焦点：Ring-Blue-500 focus：Ring-blue-500 focus：outline ofline ofline ofline nline none” /> none“ />></div> {/ * RedisPlay按钮 */} <button className="w-full bg-green-600 text-white py-2 px-4 rounded-md hover:bg-green-700 transition" onClick={reloadImage} >redisplay</button> {/ *动画控制按钮 */}<div className="flex flex-wrap gap-2"> <button className="flex-1 bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 transition" onClick={controlExplosionAnimation} >爆炸</button><button className="flex-1 bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 transition" onClick={controlWaveAnimation} >波</button></div></div>{/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ <div className="absolute top-0 left-0 w-full h-full z-[1]"><Canvas camera={{ far: 5000, position: [0, 0, 100] }}> {/ *基本照明设置 */}<ambientLight intensity={1} /><directionalLight position={[100, 200, 100]} intensity={1} /> {/ * OrbitControls允许您使用鼠标操作旋转场景 */}<OrbitControls /> {/ *仅当存在像素数据时 */} {pixels &&（ <PixelGrid pixelSize={pixelSize} pixels={pixels} animation={animation} fileChangeCount={fileChangeCount} /> ）</Canvas></div> {/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- <div className="absolute top-0 left-0 w-full h-full z-[-1]"><Canvas camera={{ position: [0, 5, 15], fov: 50 }} style={{ background: "black" }} ><ambientLight intensity={0.5} /><pointLight position={[10, 10, 10]} intensity={0.5} color="white" /><BackgroundScene /></Canvas></div></div> ）； }; // ==== // createpixeldata函数：//-使用画布从指定图像中获取像素数据，然后将其转换为一系列PixelInfo // ================================（img：img：htmlimageelement，htmlimageElement，htmlimageElement，targetWidth，targetWidth，norume norume，number，targetheight：targetheight and a cixeliatify and cixelinfo and cixelinfo/ cixelinfo/ cixelinfo = pixelinfo = /////////]大小const canvas = document.createelement（“ canvas”）; canvas.width = targetWidth; canvas.height = targetheight; const ctx = canvas.getContext（“ 2d”）;如果（！ctx）抛出新错误（“无2D上下文可用”）; //在画布上绘制图像并获取像素信息ctx.drawimage（img，0，0，targetWidth，targetheight）; const imgdata = ctx.getimagedata（0，0，targetWidth，targetheiight）; const data = imgdata.data; const结果：pixelinfo [] = [];令IDX = 0; //对于图像中的每个像素，获取RGBA值并将其转换为PixelInfo（令y = 0; y <targetheight; y ++）{for（让x = 0; x = 0; x <targetWidth; x ++）{const r = data [idx]，g = data [idx]，g = data [idx+1]，b = data [idx+1]，b = data [id data [id data [id data [idx+2] IDX += 4; //如果（a <30）继续，请忽略透明度较低的像素（a <30）； result.push（{//调整x，y坐标，以使图像中心是原点x：x- targetwidth / y：-y + targetheight / 2，z：0，//创建三个color，通过将rgb值转换为范围0到1 color：new three three.color：r / 255，r / 255，g / g / g / 255，b / 255）; }}返回结果; }; // ====== //背景Scene组件：//-一个用于在背景中显示星空和云的组件//-与备忘录包装以防止不必要的重新绘制// ================= <Stars radius={100} // 星が存在する空間の半径 depth={50} // 星の配置される深さの範囲 count={5000} // 表示する星の総数 factor={6} // 星の大きさ調整用の係数 saturation={1} // 色の鮮やかさ fade // 遠くの星がフェードアウトする効果 /> {/ *带有云组件的Express Clouds */} <Cloud position={[0, 0, 0]} // 雲の中心位置 opacity={0.1} // 雲の不透明度（低いほど透明） speed={0.2} // 雲の動く速度 scale={[10, 10, 10]} // 雲全体のサイズ segments={20} // 雲を構成するパーティクルの数 /></> ）； }）;导出默认应用；