I have a 3D project in the works where users will be able to add models into the scene and move them around using movement indicators that pop up after selecting an object. The issue is that the raycaster
is not identifying the object, rather the indicators themselves (or more specifically, the white vertical line drawn on the indicator).
Would anyone have any idea of what the issue may be or how I can fix this?
Here is a link to the project: https://pcforge.tech/3d-viewer/
I suspect the movement indicator is interfering with the raycasting on object... not sure how to fix it.
raycaster = new THREE.Raycaster();
function raycast(eve, object) {
var mouseToRaycaster = new THREE.Vector2(((eve.offsetX / renderer.domElement.offsetWidth ) * 2) - 1, -(( eve.offsetY / renderer.domElement.offsetHeight ) * 2) + 1);
raycaster.setFromCamera(mouseToRaycaster, camera);
intersects = raycaster.intersectObjects(object.children, true);
if (selectedComponent && intersects.length == 0) {
transformControls.detach();
selectedComponent.material = redefineMaterial({ map: selectedComponent.material.map });
scene.remove(transformControls);
scene.remove(lineYHelper);
selectedComponent = false;
}
}
//scene
scene = new THREE.Scene();
renderer = new THREE.WebGLRenderer({
canvas: canvas,
alpha: false,
antialias: false,
depth: false,
logarithmicDepthBuffer: true,
gammaFactor: 1
});
renderer.setClearColor(rgb256(255, 255, 255));
transformControls = new THREE.TransformControls(camera, renderer.domElement);
// SETTINGS FOR KEYBOARD EVENTS
window.addEventListener('keydown', function (event) {
switch (event.keyCode) {
case 81: // Q
transformControls.setSpace(transformControls.space === "local" ? "world" : "local");
break;
case 82: // R
transformControls.setMode("rotate");
transformControls.setSpace("local");
break;
case 84: // T
transformControls.setMode("translate");
transformControls.setSpace("world");
break;
case 187:
case 107: // +, =, num+
transformControls.setSize(transformControls.size + 0.1);
break;
case 189:
case 109: // -, _, num-
transformControls.setSize(Math.max(transformControls.size - 0.1, 0.1));
break;
}
});
var manager = new THREE.LoadingManager();
load_obj = new THREE.OBJLoader(manager);
load_tex = new THREE.TextureLoader();
//lighting
var ambient = new THREE.AmbientLight(rgb256(41, 57, 90));
scene.add(ambient);
var light1 = new THREE.DirectionalLight(rgb256(255, 255, 255), 0.75);
light1.castShadow = false;
light1.shadow.camera.near = 0;
light1.shadow.camera.far = 30;
light1.shadow.camera.left = -5.5;
light1.shadow.camera.right = 5.5;
light1.shadow.camera.top = 5.5;
light1.shadow.camera.bottom = -5.5;
light1.shadow.mapSize.width = 1024;
light1.shadow.mapSize.height = 1024;
light1.shadow.bias = -0.001;
light1.position.set(1, 0.7, 0.4);
light1.position.normalize();
light1.position.multiplyScalar(20);
scene.add(light1);
THREE.Chpok(renderer.domElement, camera, meshes);
var containerGeometry = new THREE.BoxBufferGeometry( 10, 5, 9.8 );
var containerMaterial = new THREE.MeshBasicMaterial( {color: 0xf0f0f0, visible: false, wireframe: true} );
container = new THREE.Mesh( containerGeometry, containerMaterial );
container.position.set(0, 2.5, 0);
scene.add( container );
canvas.addEventListener('click', (e) => {
raycast(e, container);
});
orbitControls = new THREE.OrbitControls( camera, renderer.domElement );
orbitControls.target.set( 0.1, 1.1, 0 );
orbitControls.enableZoom = false;
orbitControls.enablePan = false;
cubeControls = new THREE.CubeControls;
cubeControls.init(viewcubeCanvas, {
'active': true,
'controls': orbitControls,
'camera': camera,
'width': 200,
'height': 200
});
for (var i = 0; i < meshes.length; i++) {
container.add(meshes[i]);
}
//floor
{
var floor_w = 0.1;
var g = new THREE.BoxGeometry(10, 10, floor_w);
var mat = new THREE.MeshPhongMaterial({
wireframe: true,
color: rgb(0.5,0.5,0.5),
specular: rgb(0.15, 0.15, 0.15),
shininess: 20,
flatShading: false,
side: THREE.FrontSide
});
var mesh = new THREE.Mesh(g, mat);
mesh.position.y = -floor_w * -5.5;
mesh.rotation.x = Math.PI * 0.5;
mesh.receiveShadow = true;