Я хочу создать литофанную головоломку, используя три ⇐ Javascript

[Anonymous]

Я создаю литофан загруженного изображения, который можно загрузить и работать нормально, теперь мне нужна помощь в сокращении созданного литофана на кусочки головоломки и загрузку головоломки. < /p>
Я добавляю код литофана и работающего скриншота. Я использую Angular 19 в проекте.
Я действительно буду признателен, если кто -то сможет помочь мне создать головоломку. Я также могу заплатить человеку за помощь.

Код: Выделить всё

private addLithophane(shapeType: 'flat' | 'bowl' | 'bell' | 'cylinder' | 'custom', textureUrl: string | null, options: any = {}): void {
if (this.lithophane) this.scene.remove(this.lithophane);

const   processImage = (img: HTMLImageElement | HTMLCanvasElement) => {
this.canvas = document.createElement('canvas');
const ctx = this.canvas.getContext('2d')!;
this.canvas.width = img.width;

this.canvas.height = img.height;

// Draw and blur image
ctx.drawImage(img, 0, 0);
ctx.filter = 'blur(3px)'; // Smooth the image
ctx.drawImage(this.canvas, 0, 0);
ctx.filter = 'none';

const imageData = ctx.getImageData(0, 0, this.canvas.width, this.canvas.height);
const data = imageData.data;

// Improved brightness processing with gamma correction
for (let i = 0; i < data.length; i += 4) {
const brightness = (data[i] * 0.299 + data[i + 1] * 0.587 + data[i + 2] * 0.114);
const invertedValue = 255 - brightness;
const correctedValue = Math.pow(invertedValue / 255, 2.2) * 255;
data[i] = correctedValue;
data[i + 1] = correctedValue;
data[i + 2] = correctedValue;
}
ctx.putImageData(imageData, 0, 0);

const shapeOptions = {
flat: {
width: 20,
height: 10,
depth: 0.1,
segments: 256
},
bowl: {
radius: 5,
height: 5,
segments: 256,
curvature: 0.3
},
bell: {
radius: 5,
height: 10,
segments: 256,
profile: [
{ r: 0.2, h: 1.0 },
{ r: 0.8, h: 0.8 },
{ r: 0.9, h: 0.5 },
{ r: 1.0, h: 0.2 },
{ r: 1.1, h: 0.0 }
]
},
cylinder: {
radius: 5,
height: 10,
segments: 256
}
};

const finalOptions = {
...(shapeType === 'custom' ? {} : shapeOptions[shapeType]),
...options,
width: options.width || 20,
height: options.height || 10,
baseThickness: options.baseThickness || 0.8,
maxDepth: options.maxDepth || 1.0,
segments: options.segments || 256
};

if (shapeType === 'flat') {
// Create box geometry with segments
const geometry = new THREE.BoxGeometry(
finalOptions.width,
finalOptions.height,
finalOptions.baseThickness,
finalOptions.segments,
finalOptions.segments,
1
);

// Get vertices for the front face only
const positions = geometry.attributes['position'];
const vertexCount = positions.count;

for (let i = 0; i < vertexCount; i++) {
const x = positions.getX(i);
const y = positions.getY(i);
let z = positions.getZ(i);

// Only modify vertices on the front face (z > 0)
if (z > 0) {
// Calculate UV coordinates
const u = (x / finalOptions.width + 0.5) * this.canvas.width;
const v = (-y / finalOptions.height + 0.5) * this.canvas.height;

const px = Math.floor(u) % this.canvas.width;
const py = Math.floor(v) % this.canvas.height;
const idx = (py * this.canvas.width + px) * 4;
const brightness = data[idx] / 255;  // Normalized to 0-1

// Adjust the z-position based on brightness
z = finalOptions.baseThickness - brightness * finalOptions.maxDepth;
positions.setZ(i, z);
}
}

positions.needsUpdate = true;
geometry.computeVertexNormals();
geometry.center();

const texture = new THREE.CanvasTexture(this.canvas);
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
texture.flipY = false;

// Create materials for front and back
const frontMaterial = new THREE.MeshPhongMaterial({
color: 0xdddddd,
specular: 0x444444,
shininess: 30,
bumpMap: texture,
bumpScale: -0.5,
map: textureUrl ? new THREE.TextureLoader().load(textureUrl) : null
});

const backMaterial = new THREE.MeshPhongMaterial({
color: 0xdddddd,
specular: 0x000000,
shininess: 0,
flatShading: true
});

const sideMaterial = new THREE.MeshPhongMaterial({
color: 0xdddddd,
specular: 0x000000,
shininess: 0,
flatShading: true
});

// Create mesh with different materials for each face
const materials = [
sideMaterial, // right
sideMaterial, // left
sideMaterial, // top
sideMaterial, // bottom
frontMaterial, // front
backMaterial  // back
];

this.lithophane = new THREE.Mesh(geometry, materials);
this.lithophane.position.set(0, 5, 0);
this.lithophane.castShadow = true;
this.lithophane.receiveShadow = true;

this.scene.add(this.lithophane);
} else {
// Handle other shape types as before...
}
};

if (textureUrl) {
const img = new Image();
img.onload = () => processImage(img);
img.crossOrigin = "anonymous";
img.src = textureUrl;
} else {
const grayCanvas = this.createGrayCanvas(256, 256);
processImage(grayCanvas);
}
}

Подробнее здесь: https://stackoverflow.com/questions/794 ... ng-threejs