Hello I have a wall and color buttons i whant to when i click to color show me onother texture but i do not now what shouli i write
here code
// 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 mesh, renderer, scene, camera, controls ,material;
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'
});
// mesh
mesh = new THREE.Mesh(geometry, material1);
mesh.position.set(2, - 4, 6);
scene.add(mesh);
// geometry
var geometry = new THREE.BoxGeometry(2, 2, 2);
// material
var material1 = new THREE.MeshPhongMaterial({
color: 'gray'
});
// mesh
mesh = new THREE.Mesh(geometry, material1);
mesh.position.set(-2, - 4, - 6);
scene.add(mesh);
// geometry
var geometry = new THREE.BoxGeometry(20.5, 10, 0.25);
// material
// material = new THREE.MeshPhysicalMaterial({
// color: 0xffffff,
// });
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')
material = new THREE.MeshLambertMaterial({
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);
};
// mesh
mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0, 0, 10);
mesh.rotation.set(0, 0, 0);
scene.add(mesh);
mesh.userData.normal = new THREE.Vector3(0, 0, - 1);
mesh.onBeforeRender = onBeforeRender;
mesh.onAfterRender = onAfterRender;
// mesh
mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0, 0, - 10);
mesh.rotation.set(0, 0, 0);
scene.add(mesh);
mesh.userData.normal = new THREE.Vector3(0, 0, 1);
mesh.onBeforeRender = onBeforeRender;
mesh.onAfterRender = onAfterRender;
// mesh
mesh = new THREE.Mesh(geometry, material);
mesh.position.set(10, 0, 0);
mesh.rotation.set(0, - Math.PI / 2, 0);
scene.add(mesh);
mesh.userData.normal = new THREE.Vector3(- 1, 0, 0);
mesh.onBeforeRender = onBeforeRender;
mesh.onAfterRender = onAfterRender;
// mesh
mesh = new THREE.Mesh(geometry, material);
mesh.position.set(- 10, 0, 0);
mesh.rotation.set(0, Math.PI / 2, 0);
scene.add(mesh);
mesh.userData.normal = new THREE.Vector3(1, 0, 0);
mesh.onBeforeRender = onBeforeRender;
mesh.onAfterRender = onAfterRender;
// geometry
var geometry = new THREE.BoxGeometry(20.5, 20.5, 0.25);
// mesh - floor
mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0, - 5, 0);
mesh.rotation.set(- Math.PI / 2, 0, 0);
scene.add(mesh);
mesh.userData.normal = new THREE.Vector3(0, 1, 0);
mesh.onBeforeRender = onBeforeRender;
mesh.onAfterRender = onAfterRender;
raycaster = new THREE.Raycaster();
mouse = new THREE.Vector2()
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";
}
$('.red').click(function () {
})
$('.blue').click(function () {
})
$('.black').click(function () {
})
$('.green').click(function () {
})
}
}
}
function animate() {
requestAnimationFrame(animate);
//controls.update();
renderer.render(scene, camera);
}