能否基于three.js 编写一个可以改变图片局部颜色的例子-Go服务器开发

当然可以！以下是一个基于 Three.js 的示例，演示如何改变图片的局部颜色。在这个例子中，我们将使用一个平面（Plane）上的纹理，并在某些区域改变其颜色。

// 引入Three.js库
import * as THREE from 'three';

// 创建场景、相机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建平面几何体并加载纹理
const geometry = new THREE.PlaneGeometry(5, 5);
const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('path/to/your/image.jpg'); // 替换为你的图片路径

// 创建材质，并设置纹理
const material = new THREE.MeshBasicMaterial({ map: texture });
const plane = new THREE.Mesh(geometry, material);
scene.add(plane);

// 设置相机位置
camera.position.z = 5;

// 准备要改变颜色的区域
function changeColor(x, y) {
    const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d');

    // 将原始纹理绘制到canvas上以便处理像素数据
    context.drawImage(texture.image, 0, 0);

    const width = texture.image.width;
    const height = texture.image.height;

    // 获取像素数据
    const pixelData = context.getImageData(0, 0, width, height);
    
    // 改变指定位置的颜色 (这里以x,y为中心点)
    for (let i = -10; i <= 10; i++) { // 改变范围可调整
        for (let j = -10; j <= 10; j++) {
            const pxIndex = ((y + j) * width + (x + i)) * 4;
            if (pxIndex >= 0 && pxIndex < pixelData.data.length) {
                pixelData.data[pxIndex]   = 255;     // Red channel
                pixelData.data[pxIndex+1] = 0;       // Green channel
                pixelData.data[pxIndex+2] = 0;       // Blue channel
            }
        }
    }

    context.putImageData(pixelData, 0, 0);

    // 更新纹理以应用变化
    material.map.needsUpdate = true;
}

// 渲染循环
function animate() {
    requestAnimationFrame(animate);
    
    renderer.render(scene, camera);
}

animate();

// 添加鼠标点击事件来改变颜色局部区域 
window.addEventListener('click', (event) => {
   // 获取鼠标在画布中的坐标并转换为纹理坐标系统 
   const mouseX = ((event.clientX / window.innerWidth) * 2 - 1) * (texture.image.width / texture.image.height); 
   const mouseY = -((event.clientY / window.innerHeight) * 2 - 1); 

   changeColor(Math.floor(mouseX), Math.floor(mouseY));
});