Hi friends, i am new and beginner to three js i was creating a static color customizing to my model object but i want to do some dynamic thing in model so that when ever i click any part of my gltf model color should change or give me some options of color to choose, please can anyone help me out in this. below is my static model source code
var theModel;
var cameraFar = 5;
const BACKGROUND_COLOR = 0xf1f1f1;
const scene = new THREE.Scene();
scene.background = new THREE.Color(BACKGROUND_COLOR );
scene.fog = new THREE.Fog(BACKGROUND_COLOR, 20, 100);
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = cameraFar;
camera.position.x = 0;
//render
renderer = new THREE.WebGLRenderer({ antialias: true, });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
document.body.appendChild(renderer.domElement);
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.minDistance = 3;
controls.maxDistance = 5;
var dirLight = new THREE.DirectionalLight( 0xffffff, 0.54 );
dirLight.position.set( -8, 12, 8 );
dirLight.castShadow = true;
dirLight.shadow.mapSize = new THREE.Vector2(1024, 1024);
// Add directional Light to scene
scene.add( dirLight );
function init2(){
const legsMaterial = new THREE.MeshPhysicalMaterial( {
color: 0xff0000, metalness: 0.25, roughness: 0
} );
const cushionsMaterial = new THREE.MeshStandardMaterial( {
color: 0xffffff, metalness: 0.25, roughness: 0
} );
const backMaterial = new THREE.MeshPhysicalMaterial( {
color: 0xffffff, metalness: 0.25, roughness: 0
} );
const supportsMaterial = new THREE.MeshPhysicalMaterial( {
color: 0xffffff, metalness: 0.25, roughness: 0
} );
const baseMaterial = new THREE.MeshPhysicalMaterial( {
color: 0xffffff, metalness: 0.25, roughness: 0,
} );
const legsColorInput = document.getElementById( 'legs' );
legsColorInput.addEventListener( 'input', function () {
theModel.getObjectByName( 'legs' ).material = legsMaterial;
legsMaterial.color.set( this.value );
} );
const cushionsColorInput = document.getElementById( 'cushions' );
cushionsColorInput.addEventListener( 'input', function () {
theModel.getObjectByName( 'cushions' ).material = cushionsMaterial;
cushionsMaterial.color.set( this.value );
} );
const backColorInput = document.getElementById( 'back' );
backColorInput.addEventListener( 'input', function () {
theModel.getObjectByName( 'back' ).material = backMaterial;
backMaterial.color.set( this.value );
} );
const supportsColorInput = document.getElementById( 'supports' );
supportsColorInput.addEventListener( 'input', function () {
theModel.getObjectByName( 'supports' ).material = supportsMaterial;
supportsMaterial.color.set(this.value);
} );
const baseColorInput = document.getElementById( 'base' );
baseColorInput.addEventListener( 'input', function () {
theModel.getObjectByName( 'base' ).material = baseMaterial;
baseMaterial.color.set(this.value );
} );
}
function init(){
var loader = new THREE.GLTFLoader();
loader.load('assets/chair.glb', function(gltf) {
gltf.scene.scale.set(1,1,1);
gltf.scene.rotation.y = Math.PI/4;
gltf.scene.position.y = -1;
theModel = gltf.scene;
scene.add( theModel );
//console.log(theModel);
theModel.traverse(function (child) {
if (child instanceof THREE.Mesh) {
console.log(child);
}
});
});
}
function animate() {
renderer.render(scene, camera);
requestAnimationFrame(animate);
if (resizeRendererToDisplaySize(renderer)) {
const canvas = renderer.domElement;
camera.aspect = canvas.clientWidth / canvas.clientHeight;
camera.updateProjectionMatrix();
}
}
animate();
// Function - New resizing method
function resizeRendererToDisplaySize(renderer) {
const canvas = renderer.domElement;
var width = window.innerWidth;
var height = window.innerHeight;
var canvasPixelWidth = canvas.width / window.devicePixelRatio;
var canvasPixelHeight = canvas.height / window.devicePixelRatio;
const needResize = canvasPixelWidth !== width || canvasPixelHeight !== height;
if (needResize) {
renderer.setSize(width, height, false);
}
return needResize;
}
init();
init2();