i can select just one color how to do to cheange others
// three.js example - hiding walls based on camera position
import * as THREE from '../three.js/build/three.module.js';
import { OrbitControls } from '../three.js/examples/jsm/controls/OrbitControls.js';
import { GLTFLoader } from '../three.js/examples/jsm/loaders/GLTFLoader.js';
var renderer, scene, camera, controls, material, material2, material3, material4, materialflor;
var raycaster, mouse;
init();
animate();
function init() {
// renderer
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x889988);
document.body.appendChild(renderer.domElement);
renderer.domElement.addEventListener('click', onClick, false);
// scene
scene = new THREE.Scene();
// camera
camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(20, 20, 20);
scene.add(camera); // required, since adding light as child of camera
// controls
controls = new OrbitControls(camera, renderer.domElement);
controls.enableZoom = true;
controls.enablePan = false;
controls.maxPolarAngle = Math.PI / 2;
// ambient
var ambient = new THREE.AmbientLight(0x444444)
scene.add(ambient);
// light
var light = new THREE.PointLight(0xffffff, 0.8);
camera.add(light);
// axes
//scene.add( new THREE.AxisHelper( 20 ) );
// geometry
var geometry = new THREE.BoxGeometry(4, 2, 2);
// material
var material1 = new THREE.MeshPhongMaterial({
color: 'sandybrown'
});
// meshTable1
var meshTable1 = new THREE.Mesh(geometry, material1);
meshTable1.position.set(2, - 4, 6);
scene.add(meshTable1);
// geometry
var geometry = new THREE.BoxGeometry(2, 2, 2);
// material
var material1 = new THREE.MeshPhongMaterial({
color: 'gray'
});
// meshTable2
var meshTable2 = new THREE.Mesh(geometry, material1);
meshTable2.position.set(-2, - 4, - 6);
scene.add(meshTable2);
// geometry
var geometry = new THREE.BoxGeometry(20.5, 10, 0.25);
let textureBlue = new THREE.TextureLoader().load('modules/room/textures/Blue_2_normal.png')
let textureCyan = new THREE.TextureLoader().load('modules/room/textures/Cyan_2_baseColor.jpeg')
let textureCyan5 = new THREE.TextureLoader().load('modules/room/textures/Cyan_5_baseColor.jpeg')
let textureCyan6 = new THREE.TextureLoader().load('modules/room/textures/Cyan_6_baseColor.jpeg')
material = new THREE.MeshPhysicalMaterial({
map: textureCyan,
});
material2 = new THREE.MeshPhysicalMaterial({
map: textureCyan,
});
material3 = new THREE.MeshPhysicalMaterial({
map: textureCyan,
});
material4 = new THREE.MeshPhysicalMaterial({
map: textureCyan,
});
materialflor = new THREE.MeshPhysicalMaterial({
map: textureCyan,
});
// callbacks
var onBeforeRender = function () {
var v = new THREE.Vector3();
return function onBeforeRender(renderer, scene, camera, geometry, material, group) {
// this is one way. adapt to your use case.
if (v.subVectors(camera.position, this.position).dot(this.userData.normal) < 0) {
geometry.setDrawRange(0, 0);
}
};
}();
var onAfterRender = function (renderer, scene, camera, geometry, material, group) {
geometry.setDrawRange(0, Infinity);
};
var mesh1 = new THREE.Mesh(geometry, material);
mesh1.position.set(0, 0, 10);
mesh1.rotation.set(0, 0, 0);
scene.add(mesh1);
mesh1.userData.normal = new THREE.Vector3(0, 0, - 1);
mesh1.onBeforeRender = onBeforeRender;
mesh1.onAfterRender = onAfterRender;
// mesh
var mesh2 = new THREE.Mesh(geometry, material2);
mesh2.position.set(0, 0, - 10);
mesh2.rotation.set(0, 0, 0);
scene.add(mesh2);
mesh2.userData.normal = new THREE.Vector3(0, 0, 1);
mesh2.onBeforeRender = onBeforeRender;
mesh2.onAfterRender = onAfterRender;
// mesh
var mesh3 = new THREE.Mesh(geometry, material3);
mesh3.position.set(10, 0, 0);
mesh3.rotation.set(0, - Math.PI / 2, 0);
scene.add(mesh3);
mesh3.userData.normal = new THREE.Vector3(- 1, 0, 0);
mesh3.onBeforeRender = onBeforeRender;
mesh3.onAfterRender = onAfterRender;
// mesh
var mesh4 = new THREE.Mesh(geometry, material4);
mesh4.position.set(- 10, 0, 0);
mesh4.rotation.set(0, Math.PI / 2, 0);
scene.add(mesh4);
mesh4.userData.normal = new THREE.Vector3(1, 0, 0);
mesh4.onBeforeRender = onBeforeRender;
mesh4.onAfterRender = onAfterRender;
// geometry
var geometry = new THREE.BoxGeometry(20.5, 20.5, 0.25);
// mesh - floor
var meshFlor = new THREE.Mesh(geometry, materialflor);
meshFlor.position.set(0, - 5, 0);
meshFlor.rotation.set(- Math.PI / 2, 0, 0);
scene.add(meshFlor);
meshFlor.userData.normal = new THREE.Vector3(0, 1, 0);
meshFlor.onBeforeRender = onBeforeRender;
meshFlor.onAfterRender = onAfterRender;
raycaster = new THREE.Raycaster();
mouse = new THREE.Vector2()
var materialSelected;
function onClick(event) {
event.preventDefault();
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
var intersects = raycaster.intersectObjects(scene.children, true);
if (intersects.length > 0) {
console.log('Intersection:', intersects[0]);
let show = document.querySelector('#show');
if (show.style.display === "block") {
show.style.display = "none";
} else {
show.style.display = "block";
}
if (materialSelected == null) {
materialSelected = intersects[0].object.material;
}
$('.red').click(function () {
materialSelected.map = textureBlue;
materialSelected = null;
})
$('.blue').click(function () {
materialSelected.map = textureCyan5;
materialSelected = null;
})
$('.black').click(function () {
materialSelected.map = textureCyan;
materialSelected = null;
})
$('.green').click(function () {
materialSelected.map = textureCyan6;
materialSelected = null;
})
}
}
}
function animate() {
requestAnimationFrame(animate);
//controls.update();
renderer.render(scene, camera);
}
// mesh
// new GLTFLoader().load('modules/wall/scene.gltf', function(gltf){
// scene.add( gltf.scene );
// gltf.scene.position.set(0, 0, 10)
// gltf.scene.rotation.set(0, 0, 0)
// gltf.scene.userData.normal = new THREE.Vector3(0, 0, - 1)
// gltf.scene.onBeforeRender = onBeforeRender;
// gltf.scene.onAfterRender = onAfterRender;
// })
// new GLTFLoader().load('modules/wall/scene.gltf', function(gltf){
// scene.add( gltf.scene );
// gltf.scene.position.set(0, 0, -10)
// gltf.scene.rotation.set(0, 0, 0)
// gltf.scene.userData.normal = new THREE.Vector3(0, 0, 1)
// gltf.scene.onBeforeRender = onBeforeRender;
// gltf.scene.onAfterRender = onAfterRender;
// })
// new GLTFLoader().load('modules/wall/scene.gltf', function(gltf){
// scene.add( gltf.scene );
// gltf.scene.position.set(10, 0, 0)
// gltf.scene.rotation.set(0, - Math.PI / 2, 0)
// gltf.scene.userData.normal = new THREE.Vector3(-1, 0, 0)
// gltf.scene.onBeforeRender = onBeforeRender;
// gltf.scene.onAfterRender = onAfterRender;
// })
// new GLTFLoader().load('modules/wall/scene.gltf', function(gltf){
// scene.add( gltf.scene );
// gltf.scene.position.set(-10, 0, 0)
// gltf.scene.rotation.set(0, Math.PI / 2, 0)
// gltf.scene.userData.normal = new THREE.Vector3(1, 0, 0)
// gltf.scene.onBeforeRender = onBeforeRender;
// gltf.scene.onAfterRender = onAfterRender;
// })
