Существует возможность изменить цвет объектов (или частей объектов), загруженных в формате 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 одновременно? Например, если рядом стоят два кроссовка разных моделей?
Наверное, я не совсем правильно задал вопрос. Ниже мой код. Он работает. У меня есть два объекта GLTF (в действительности их больше) с прописанными "KHR_materials_variants". Я добавляю для каждого объекта свою cube camera и добавляю "envMap = cubeRenderTarget" для каждого объекта. Для каждого объекта добавлена панель GUI. Цвет обоих объектов может меняться при помощи только одной панели. Как мне скрыть вторую панель (gui29)? Или изменить код, чтобы панель была только одна для двух объектов?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>salunMagia1</title>
<linc rel="stylesheet" href="css/styles.css">
</head>
<canvas id="sal6"></canvas>
<div id="stats"></div>
<div id="container"></div>
<div id = "cursor" style="cursor:crosshair">
</div>
<div id="blocker">
<div id="instructions">
</div>
</div>
<body>
<!--<script type="module" src='bundle1-utf8.js'>-->
<script type="module">
import * as THREE from '../build/three.module.js';
import Stats from './jsm/libs/stats.module.js';
import { OrbitControls } from './jsm/controls/OrbitControls.js';
import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
import { PointerLockControls } from './jsm/controls/PointerLockControls.js';
import { TrackballControls } from './jsm/controls/TrackballControls.js';
import { FirstPersonControls } from './jsm/controls/FirstPersonControls.js';
import { GUI } from './jsm/libs/dat.gui.module.js';
var scene, camera, mesh;
var camControls;
var clock;
clock = new THREE.Clock();
var width = window.innerWidth;
var height = window.innerHeight;
var canvas = document.getElementById('sal6');
var blocker = document.getElementById('blocker');
var statsNode = document.getElementById('stats');
canvas.setAttribute('width', width);
canvas.setAttribute('height', height);
scene = new THREE.Scene();
var renderer = new THREE.WebGLRenderer({canvas: canvas, antialias:true,alpha:true,transparent:true,premultipliedAlpha:false});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xffffff);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.BasicShadowMap;
renderer.gammaInput = true;
renderer.gammaOutput = true;
camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
camera.position.set(0, 10, 15);
var maxanisotropy=renderer.capabilities.getMaxAnisotropy();
const color = 0xFFFFFF;
const intensity = 1;
const light = new THREE.DirectionalLight(color, intensity);
light.position.set(2, 0.35, 0);
light.target.position.set(0, -0.2, 0);
scene.add(light,light.target);
light.target.updateMatrixWorld();
var loaderMatFloo = new THREE.TextureLoader();
loaderMatFloo.crossOrigin = "use-credentials";
var textureFloo = loaderMatFloo.load('js/textures/parket.jpg');
textureFloo.wrapS = THREE.MirroredRepeatWrapping;
textureFloo.wrapT = THREE.MirroredRepeatWrapping;
var timesToRepeatHorizontally = 4;
var timesToRepeatVertically = 4;
textureFloo.repeat.set(timesToRepeatHorizontally, timesToRepeatVertically);
textureFloo.anisotropy = maxanisotropy;
var materialFloo = new THREE.MeshBasicMaterial({map: textureFloo,});
var meshFloor = new THREE.Mesh(
new THREE.PlaneGeometry(20,20,1,1),
materialFloo);
meshFloor.rotation.x -= Math.PI / 2;
meshFloor.position.y = 0;
meshFloor.receiveShadow = true;
meshFloor.name = "floo";
scene.add(meshFloor);
camControls = new OrbitControls(camera, renderer.domElement );
camControls.enableDamping = true; // an animation loop is required when either damping or auto-rotation are enabled
camControls.dampingFactor = 0.25;
camControls.screenSpacePanning = false;
camControls.minDistance = 0.2;
camControls.maxDistance = 1;
camControls.maxPolarAngle = Math.PI;
camControls.minPolarAngle = -Math.PI/4;
camControls.keyPanSpeed = 1;
camControls.rotateSpeed = 0.05;
var gui;
var gui29;
gui = new GUI();
gui29 = new GUI();
const cubeRenderTarget2 = new THREE.WebGLCubeRenderTarget(512, {
format: THREE.RGBFormat,
generateMipmaps: true,
minFilter: THREE.LinearMipmapLinearFilter,
encoding: THREE.sRGBEncoding
});
const cubeCamera2 = new THREE.CubeCamera(0.1,1000,cubeRenderTarget2
);
//------------object1-----------
var Door30 = new GLTFLoader();
Door30.load('gltfmodels/door27_r2.gltf', function(ball2){
ball2.scene;
var door30Bbox = new THREE.Box3();
door30Bbox.setFromObject(ball2.scene);
var bboxDoor30Center = door30Bbox.getCenter().clone();
bboxDoor30Center.multiplyScalar(-1);
ball2.scene.traverse(function(child){
if (child.isMesh) {
child.material.envMap = cubeRenderTarget2.texture;
}
child.castShadow = true;
child.receiveShadow = true;
if (child instanceof THREE.Mesh){
child.geometry.translate(bboxDoor30Center.x, bboxDoor30Center.y, bboxDoor30Center.z); ;
}
});
door30Bbox.setFromObject(ball2.scene);
//------------------------------------------------
scene.add(ball2.scene);
ball2.scene.variant = 'Alum';
const parser = ball2.parser;
const variantsExtension = ball2.userData.gltfExtensions[ 'KHR_materials_variants' ];
const variants = variantsExtension.variants.map( ( variant ) => variant.name );
const variantsCtrl = gui.add( ball2.scene, 'variant', variants ).name( 'Fasad Colour' );
selectVariant( scene, parser, variantsExtension, ball2.scene.variant );
variantsCtrl.onChange( ( value ) => selectVariant( scene, parser, variantsExtension, value ) );
ball2.scene.position.set(+0.5, 0.5, -1);
ball2.scene.rotation.y = Math.PI/2;
cubeCamera2.position.copy( ball2.scene.position );
render();
});
function selectVariant( scene, parser, extension, variantName ) {
const variantIndex = extension.variants.findIndex( ( v ) => v.name.includes( variantName ) );
scene.traverse( async ( objectgui ) => {
if ( ! objectgui.isMesh || ! objectgui.userData.gltfExtensions ) return;
const meshVariantDef = objectgui.userData.gltfExtensions[ 'KHR_materials_variants' ];
if ( ! meshVariantDef ) return;
if ( ! objectgui.userData.originalMaterial ) {
objectgui.userData.originalMaterial = objectgui.material;
}
const mapping = meshVariantDef.mappings
.find( ( mapping ) => mapping.variants.includes( variantIndex ) );
if ( mapping ) {
objectgui.material = await parser.getDependency( 'material', mapping.material );
parser.assignFinalMaterial(objectgui);
} else {
objectgui.material = objectgui.userData.originalMaterial;
}
if (objectgui.isMesh) {
objectgui.material.envMap = cubeRenderTarget2.texture;
}
render();
} );
}
const cubeRenderTarget3 = new THREE.WebGLCubeRenderTarget(512, {
format: THREE.RGBFormat,
generateMipmaps: true,
minFilter: THREE.LinearMipmapLinearFilter,
encoding: THREE.sRGBEncoding
});
const cubeCamera3 = new THREE.CubeCamera(0.1,1000,cubeRenderTarget3
);
//------------object2-----------
var Door29 = new GLTFLoader();
Door29.load('gltfmodels/door29.gltf', function(ball29){
ball29.scene;
var door29Bbox = new THREE.Box3();
door29Bbox.setFromObject(ball29.scene);
var bboxDoor29Center = door29Bbox.getCenter().clone();
bboxDoor29Center.multiplyScalar(-1);
ball29.scene.traverse(function(child){
if (child.isMesh) {
child.material.envMap = cubeRenderTarget3.texture;
}
child.castShadow = true;
child.receiveShadow = true;
if (child instanceof THREE.Mesh){
child.geometry.translate(bboxDoor29Center.x, bboxDoor29Center.y, bboxDoor29Center.z); ;
}
});
door29Bbox.setFromObject(ball29.scene);
//------------------------------------------------
scene.add(ball29.scene);
ball29.scene.variant = 'Alum';
const parser = ball29.parser;
const variantsExtension = ball29.userData.gltfExtensions[ 'KHR_materials_variants' ];
const variants = variantsExtension.variants.map( ( variant ) => variant.name );
const variantsCtrl = gui29.add( ball29.scene, 'variant', variants ).name( 'Fasad Colour' );
selectVariant29( scene, parser, variantsExtension, ball29.scene.variant );
variantsCtrl.onChange( ( value ) => selectVariant( scene, parser, variantsExtension, value ) );
ball29.scene.position.set(-0.5, 0.5, -1);
cubeCamera3.position.copy( ball29.scene.position );
render();
});
function selectVariant29( scene, parser, extension, variantName ) {
const variantIndex = extension.variants.findIndex( ( v ) => v.name.includes( variantName ) );
scene.traverse( async ( objectgui ) => {
if ( ! objectgui.isMesh || ! objectgui.userData.gltfExtensions ) return;
const meshVariantDef = objectgui.userData.gltfExtensions[ 'KHR_materials_variants' ];
if ( ! meshVariantDef ) return;
if ( ! objectgui.userData.originalMaterial ) {
objectgui.userData.originalMaterial = objectgui.material;
}
const mapping = meshVariantDef.mappings
.find( ( mapping ) => mapping.variants.includes( variantIndex ) );
if ( mapping ) {
objectgui.material = await parser.getDependency( 'material', mapping.material );
parser.assignFinalMaterial(objectgui);
} else {
objectgui.material = objectgui.userData.originalMaterial;
}
if (objectgui.isMesh) {
objectgui.material.envMap = cubeRenderTarget3.texture;
}
render();
} );
}
function animate() {
requestAnimationFrame(animate);
var delta = clock.getDelta();
camControls.update(delta);
cubeCamera3.update( renderer, scene );
cubeCamera2.update( renderer, scene );
render()
}
function render() {
renderer.render( scene, camera );
}
animate();
</script>
</body>
</html>