Как изменить при помощи одного dat GUI цвет двух объектов GLTF в THREE JS?

Question

Существует возможность изменить цвет объектов (или частей объектов), загруженных в формате gltf в THREE JS.

Пример здесь https://threejs.org/examples/webgl_loader_gltf_variants.html.

Описание здесь https://github.com/KhronosGroup/glTF/tree/main/extensions/2.0/Khronos/KHR_materials_variants.

Как изменить при помощи одного dat GUI цвет двух (и более) объектов gltf (или их частей) в THREE JS одновременно? Например, если рядом стоят два кроссовка разных моделей?

Answer 1

Разные объекты, разные материалы, один цвет.

body{
  overflow: hidden;
  margin: 0;
}

<script type="module">
import * as THREE from "https://cdn.skypack.dev/[email protected]";
import {GUI} from "https://cdn.skypack.dev/[email protected]/examples/jsm/libs/lil-gui.module.min.js";

let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 1000);
camera.position.set(0, 0, 10);
let renderer = new THREE.WebGLRenderer();
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

let light = new THREE.DirectionalLight(0xffffff, 1.);
light.position.setScalar(1);
scene.add(light, new THREE.AmbientLight(0xffffff, 0.5));

let colorController = {
  color: "#ff00ff"
}

let obj1 = new THREE.Mesh(new THREE.SphereGeometry(), new THREE.MeshStandardMaterial({color: colorController.color, metalness: 0.75, roughness: 0.25}));
let obj2 = new THREE.Mesh(new THREE.BoxGeometry(2, 2, 2), new THREE.MeshLambertMaterial({color: colorController.color}));

let selectedMaterials = [];

[obj1, obj2].forEach((o, idx) => {
  let shift = (-0.5 + idx) * 3;
  o.position.x = shift;
  scene.add(o);
  selectedMaterials.push(o.material);
});

let gui = new GUI();
gui.addColor(colorController, "color").onChange(val => {
  //console.log(val);
  selectedMaterials.forEach(m => {m.color.set(val)});
});

renderer.setAnimationLoop(() => {
  renderer.render(scene, camera);
});

</script>

Answer 2

Я смог скрыть панели GUI для других объектов, применив в коде:

var gui = new GUI();
var gui29 = new GUI({ autoPlace: false });

БЛОГ НА HUSL

Как изменить при помощи одного dat GUI цвет двух объектов GLTF в THREE JS?

Ответы (2 шт):