I'm facing an issue with my project where I am using three.interaction to capture click events on certain objects and add transformControls to them.
The problem I'm encountering is that the transform controls seem to block the click event on other objects, possibly due to interfering with the raycast.
Any suggestions for solutions?
var camera, scene, renderer;
var geometry, material, mesh;
var transformControls;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10);
camera.position.z = 1;
scene = new THREE.Scene();
geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);
material = new THREE.MeshNormalMaterial();
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const interaction = new THREE.Interaction(renderer, scene, camera);
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
mesh.on('click', function(ev) {
click(ev);
});
mesh1 = new THREE.Mesh(geometry, material);
scene.add(mesh1);
mesh1.position.set(0.3, 0, 0);
mesh1.on('click', function(ev) {
click(ev);
});
}
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
function render() {
renderer.render(scene, camera);
}
function click(ev) {
console.log("click");
var transformControls = scene.getObjectByName("transformControls", true);
var objControlled = scene.getObjectByName("objControlled", true);
if (transformControls === undefined || transformControls === null) {
transformControls = new THREE.TransformControls(camera, renderer.domElement);
transformControls.addEventListener('change', render);
transformControls.name = "transformControls";
scene.add(transformControls);
}
if (objControlled === undefined || objControlled === null) {
try {
transformControls.attach(ev.data.target);
ev.data.target.name = "objControlled";
} catch (err) {
console.log(err);
}
} else {
try {
transformControls.detach(objControlled);
objControlled.name = "oldControlled";
transformControls.attach(ev.data.target);
ev.data.target.name = "objControlled";
} catch (err) {
console.log(err);
}
}
}
JS Fiddle Link: https://jsfiddle.net/h80g42wk/4/