0

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;

enter image description here

  • You expect someone to trawl through your code? Post offending code here, make it easy for people to help you. – 2pha Jan 14 '18 at 07:27
  • @2pha No, of course not. Since I am still doing research I was initially seeing if anyone had an idea that came to mind. I will update the post with code tomorrow :) – Jonathan Drummond Jan 14 '18 at 09:25
  • @2pha I added some of the code, not the entire thing... let me know if I should post all of it. – Jonathan Drummond Jan 15 '18 at 05:51
  • Hard to understand what the actual problem is. When I open your demo, I see a plane and view direction widget type thing in the top right. The widget thing seems to work as expected, and works very well might I add. I can use the widget thing to rotate the scene as well as click and drag to rotate the scene no problem. When you say "The issue is that the raycaster is not identifying the object, rather the indicators themselves", what object are you talking about? I see nothing in the scene except a box/plane. I see no "indicators" or is the thing in the top right the "indicator"? – 2pha Jan 15 '18 at 13:16
  • @2pha When you scroll down you will see a couple demo models with the "add" button (they are both identical models). Clicking add will load the model into the scene (takes a few seconds), which is where the problem occurs. Raycasting onto the object is not working, but for some reason clicking directly above the model (as seen in the screenshot I added) seems to register. – Jonathan Drummond Jan 16 '18 at 04:36
  • I did try that. It tries to load a model, but gets a 404 error (checked via the network tab in dev tools) – 2pha Jan 16 '18 at 08:33
  • @2pha Sorry for late reply. I was working on making changes to the OBJLoader which is why you got the 404 error. If you are interested I posted a question about it [here](https://stackoverflow.com/questions/48362801/how-to-modify-objloader-to-import-object-size-three-js). – Jonathan Drummond Jan 21 '18 at 01:27

0 Answers0