HEY, im changing texture onclick but it rerender whole scene.Im wrapping threejs with react in use effect and use effect is having a dependencies array on which its rerender.
rerender cause a glitch effect which is not acceptable in react.
can anybody help me in it?
type or paste code here
``` const cearteCanvas = (ColorChange, PattrenChange) => {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera2 = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
renderer = new THREE.WebGLRenderer({
antialias: true,
preserveDrawingBuffer: true,
});
renderer.autoClear = false;
renderer.setClearColor(0xEEEEEE);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
// container.appendChild(renderer.domElement);
ref.current.appendChild(renderer.domElement);
scene.background = new THREE.Color(0xCCCDC9);
const saveAsImage =()=>{
var imgData, imgNode;
try {
var strMime = "image/jpeg";
imgData = renderer.domElement.toDataURL(strMime);
saveFile(imgData.replace(strMime, strDownloadMime), "test.jpg");
} catch (e) {
console.log(e);
return;
}
}
var saveFile=(strData, filename)=>{
var link = document.createElement('a');
if (typeof link.download === 'string') {
ref.current.appendChild(link); //Firefox requires the link to be in the body
link.download = filename;
link.href = strData;
link.click();
ref.current.removeChild(link); //remove the link when done
} else {
console.log("error");
}
}
var strDownloadMime = "image/octet-stream";
var saveLink = document.createElement('div');
saveLink.style.position = 'absolute';
saveLink.style.top = '10px';
saveLink.style.width = '100%';
saveLink.style.color = 'white !important';
saveLink.style.textAlign = 'center';
saveLink.innerHTML =
'<a href="#" id="saveLink">Save Frame</a>';
ref.current.appendChild(saveLink);
document.getElementById("saveLink").addEventListener('click', saveAsImage);
// var manager = new THREE.LoadingManager();
// manager.onProgress = function ( url, itemsLoaded, itemsTotal ) {
// progressElement.style.width = (itemsLoaded / itemsTotal * 100) + '%';
// };
// white spotlight shining from the side, casting a shadow
const spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(40.916, 35.437, -67.685);
spotLight.castShadow = true;
spotLight.shadow.mapSize.width = 1024;
spotLight.shadow.mapSize.height = 1024;
spotLight.shadow.camera.near = 500;
spotLight.shadow.camera.far = 4000;
spotLight.shadow.camera.fov = 30;
scene.add(spotLight);
const light = new THREE.AmbientLight(0x404040); // soft white light
scene.add(light);
const texture = new THREE.TextureLoader().load(PattrenChange, function (texture) {
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
texture.offset.set(0, 0);
texture.repeat.set(2, 2);
});
// immediately use the texture for material creation
const material = new THREE.MeshBasicMaterial({map: texture});
// material.blending =THREE.MultiplyBlending;
material.transparent = true;
const lefttexture = new THREE.TextureLoader().load(PattrenChange, function (texture) {
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
texture.offset.set(0, 0);
texture.repeat.set(0.4, 2);
});
// immediately use the texture for material creation
const leftwallmaterial = new THREE.MeshBasicMaterial({map: lefttexture});
leftwallmaterial.transparent = true;
const walltexture = new THREE.TextureLoader().load(ColorChange, function (texture) {
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
texture.offset.set(0, 0);
texture.repeat.set(4, 4);
});
// immediately use the texture for material creation
const Wallmaterial = new THREE.MeshBasicMaterial({map: walltexture});
// FRONT_Wall
const geometry = new THREE.BoxGeometry(14, 10, 0.40);
// const material = new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.DoubleSide} );
const Frontwall = new THREE.Mesh(geometry, Wallmaterial);
scene.add(Frontwall);
Frontwall.position.set(2.946, 5.00, -5.00);
// FRONT_Wall_TEXTURE
var geometryLateral = new THREE.PlaneGeometry(14, 10);
var FrontwallTexture = new THREE.Mesh(geometryLateral, material);
scene.add(FrontwallTexture);
FrontwallTexture.position.set(2.946, 5.00, -4.78);
// FRONT_LEFTWALL
var geometryLateral = new THREE.BoxGeometry(3, 10, 0.40);
var Leftwall = new THREE.Mesh(geometryLateral, Wallmaterial);
scene.add(Leftwall);
Leftwall.position.set(-8.500, 5.000, -5.000);
// FRONT_LEFTWALL_TEXTURE
var geometryLateral = new THREE.PlaneGeometry(3, 10);
var LeftwallTexture = new THREE.Mesh(geometryLateral, leftwallmaterial);
scene.add(LeftwallTexture);
LeftwallTexture.position.set(-8.500, 5.000, -4.78);
// RIGHTWALL
var geometryLateral = new THREE.BoxGeometry(12.00, 10, 0.40);
var Rightwall = new THREE.Mesh(geometryLateral, Wallmaterial);
scene.add(Rightwall);
Rightwall.position.set(10.144, 5.000, 0.810);
Rightwall.rotation.set(0, 90 * (Math.PI / 180), 0);
// RIGHTWALL_TEXTURE
var geometryLateral = new THREE.PlaneGeometry(12.00, 10);
var RightwallTexture = new THREE.Mesh(geometryLateral, material);
scene.add(RightwallTexture);
RightwallTexture.position.set(9.93, 5.000, 0.810);
RightwallTexture.rotation.set(0, -90 * (Math.PI / 180), 0);
camera.position.x = -0.760;
camera.position.y = 16.347;
camera.position.z = 11.649;
camera.rotation.x = -41.40 * (Math.PI / 180);
camera.rotation.y = 0 * (Math.PI / 180);
camera.rotation.z = 0 * (Math.PI / 180);
camera2.position.x = -0.760;
camera2.position.y = 16.347;
camera2.position.z = 11.649;
camera2.rotation.x = -41.40 * (Math.PI / 180);
camera2.rotation.y = 0 * (Math.PI / 180);
camera2.rotation.z = 0 * (Math.PI / 180);
// const controls = new OrbitControls(camera, renderer.domElement);
const loader = new GLTFLoader()
loader.load(gymmodel, function (glb) {
console.log(glb)
const root = glb.scene;
root.castShadow = true;
root.receiveShadow = true;
scene2.add(root);
}, function (xhr) {
console.log((xhr.loaded / xhr.total * 100) + "% loaded")
}, function (error) {
console.log('ann error')
})
const render = () => {
// requestAnimationFrame(animate);
console.log("Number of Triangles :", renderer.info.render.triangles);
console.log("done")
//render scene1
renderer.render(scene, camera);
//don't let renderer eraase canvas
renderer.autoClear = false;
//render scene2
renderer.render(scene2, camera2);
//let renderer clean next time
// (next time is when we render scene1 again)
renderer.autoClear = true;
};
THREE.DefaultLoadingManager.onLoad = function () {
// console.log( 'everything loaded' ); // debug
render();
};
}