使用纹理遮罩更改 3D 网格的颜色

Question

我是一名 3D 艺术家，试图帮助客户，所以我对代码的了解非常有限，但是，他正在尝试制作一个纹理遮罩来驱动一些鞋带的颜色，以便用户可以根据自己的喜好进行个性化设置。

由于我是一名 3D 艺术家并且无权访问代码，因此以下是它在搅拌机中的工作原理。

驱动颜色的蒙版位于左上角。我正在通过左下角的色轮更改右侧显示的鞋带模型的颜色。

如果有人知道适用于大多数情况的通用解决方案，我们将不胜感激！

干杯！

Answer 1

这是一个相当全面的问题，有多种方法可以解决。下面是一个包含本机对象和注释模型的示例，该模型可能是从 Blender 等导出的鞋带。

<script type="importmap">
  {
    "imports": {
      "three": "https://unpkg.com/[email protected]/build/three.module.js",
      "three/addons/": "https://unpkg.com/[email protected]/examples/jsm/"
    }
  }
</script>
<canvas class="webglHH"> </canvas>
<script type="module">
import * as THREE from "three";
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

const scene = new THREE.Scene();

const sizes = {
  width: window.innerWidth,
  height: window.innerHeight,
};

const canvas = document.querySelector("canvas.webglHH");

const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
camera.position.z = 5;

const renderer = new THREE.WebGLRenderer({
  canvas: canvas,
  antialias: true,
});
renderer.setSize(sizes.width, sizes.height);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.setClearColor(0x1e0029);
renderer.render(scene, camera);
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
scene.add(directionalLight);

//-------Primitive

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshStandardMaterial({
  color: 0xffffff,
  roughness: 0.4,
  metalness: 0.6,
});
const cube = new THREE.Mesh(geometry, material);
cube.position.x = -1.5;
cube.scale.set(2, 2, 2)
scene.add(cube);

// -------GLB

// const loader = new GLTFLoader();
// let shoe;

// loader.load("REACT.glb", function (gltf) {
//   shoe = gltf.scene;
//   shoe.position.set(0, 0, 2);
//   shoe.scale.set(3, 3, 3);
//   scene.add(shoe);
// });

// function onColorChanged2(event) {
//   const colorHex = event.target.value;
//   shoe.traverse((child) => {
//     if (child.isMesh) {
//       child.material.color.set(colorHex);
//     }
//   });
// }

//-------picker

function onColorChanged(event) {
  const colorHex = event.target.value;
  cube.material.color.set(colorHex);
}

const colorPicker = document.createElement("input");
colorPicker.type = "color";
colorPicker.style.position = "absolute";
colorPicker.style.top = "44%";
colorPicker.style.left = "55%";
colorPicker.style.width = "100px";
colorPicker.style.height = "70px";
colorPicker.style.borderRadius = "50%";
document.body.appendChild(colorPicker);

// function onColorChanged - primitive, onColorChanged2 - GLB
colorPicker.addEventListener("input", onColorChanged);

function onWR() {
  sizes.width = window.innerWidth;
  sizes.height = window.innerHeight;
  camera.aspect = sizes.width / sizes.height;
  camera.updateProjectionMatrix();
  renderer.setSize(sizes.width, sizes.height);
}

window.addEventListener("resize", onWR);
onWR();

function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();
</script>