Hello, everyone, I’m new to threejs and I’m having trouble getting the scene using screen coordinates min(x,y) and max(x,y). Any one Know help me

Questions
1

const scene = new THREE.Scene()

        var light = new THREE.SpotLight()
        light.position.set(12.5, 12.5, 12.5)
        light.castShadow = true
        light.shadow.mapSize.width = 1024
        light.shadow.mapSize.height = 1024
        scene.add(light)

        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
        camera.position.x = 15
        camera.position.y = 15
        camera.position.z = 15
       

        const renderer = new THREE.WebGLRenderer()
        renderer.physicallyCorrectLights = true;
        renderer.shadowMap.enabled = true
        renderer.outputEncoding = THREE.sRGBEncoding
        renderer.setSize(window.innerWidth, window.innerHeight)
        document.body.appendChild(renderer.domElement)

        
        const labelRenderer = new CSS2DRenderer()
        labelRenderer.setSize(window.innerWidth, window.innerHeight)
        labelRenderer.domElement.style.position = 'absolute'
        labelRenderer.domElement.style.top = '0px'
        labelRenderer.domElement.style.pointerEvents = 'none'
        document.body.appendChild(labelRenderer.domElement)


       const controls = new OrbitControls(camera, renderer.domElement)
       controls.enabled=true
       /* controls.touches = {
                ONE: THREE.TOUCH.ROTATE,
                TWO: THREE.TOUCH.DOLLY_PAN
            }*/
       
      const container=document.getElementById("container")
       
       const pickableObjects = new Array()
        const loader = new GLTFLoader()
        loader.load(
            './ErgonomicTableScene_Nov_22_22.glb',
            function (gltf) {
                gltf.scene.traverse(function (child) {
                    if (child.isMesh) {
                        let m = child
                        switch (m.name) {
                            case 'Plane':
                                m.receiveShadow = true
                                break
                            default:
                                m.castShadow = true
                        }
                        pickableObjects.push(m)
                    }
                })
                scene.add(gltf.scene)
            },
            (xhr) => {
                console.log((xhr.loaded / xhr.total) * 100 + '% loaded')
            },
            (error) => {
                console.log(error)
            }
        )

        window.addEventListener('resize', onWindowResize, false)
        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight
            camera.updateProjectionMatrix()
            renderer.setSize(window.innerWidth, window.innerHeight)
            labelRenderer.setSize(window.innerWidth, window.innerHeight)
            render()
        }
          
       const axesHelper = new THREE.AxesHelper(0.5);
      
	   scene.add( axesHelper );
      
/* orientation helper
const ohOptions = {
    className: 'orientation-helper-in-scene'
    }, 
    ohLabels = {
        px: 'East',
        nx: 'West',
        pz: 'South',
        nz: 'North',
        py: 'Sky',
        ny: 'Ground'
    };
     let _lastCLick = Date.now();
     let orientationHelper = new OrientationHelper( camera, controls, ohOptions, ohLabels );
        orientationHelper.addEventListener( 'change', onOrientationHelperChange );
        orientationHelper.addEventListener( 'click', onOrientationHelperClick );

        document.body.appendChild(orientationHelper.domElement);
    */
      
       
        let intersects
       // const touchs= new THREE.Vector2()
     
    
        let ctrlDown = false
        let lineId = 0
        let line
        let drawingLine = false
     
        let pickpoint=null
        const measurementLabels = {}
        
       // let buttonClicks=document.getElementById("button-click")
        let canvas

        let firstIntersection;

            // Set up the raycaster
            const raycaster = new THREE.Raycaster();
            const mouse = new THREE.Vector2();

            // Set up a touch event listener on the canvas element
            window.addEventListener('touchstart', onTouchStart);

            function onTouchStart(event) {
            // Calculate the mouse position in NDC
            mouse.x =( (event.touches[0].clientX / renderer.domElement.clientWidth) * 2 - 1);
            mouse.y =(-(event.touches[0].clientY / renderer.domElement.clientHeight) * 2 + 1);

            // Update the raycaster's ray to point from the camera
            // to the mouse position in NDC
            raycaster.setFromCamera(mouse, camera);

           // Calculate intersections between the ray and the objects in the scene
            const intersects = raycaster.intersectObjects(scene.children, true);
           
            // If there are any intersections, do something with the first one
            if (intersects.length > 0) {
            const intersect = intersects[0];
            const positions = intersect.point;
            const position= positions.project(camera)
           // const screenCoords = camera.updateMatrixWorld(positions);
            console.log(position)
            //console.log("Screen:",screenCoords);
            console.log("coordinates",mouse)
            console.log("world",positions)
            }

        }


  var animate = function () {
            requestAnimationFrame(animate)
            controls.update()
            render()
        }
        
        function render() {
            
            labelRenderer.render(scene, camera)
            renderer.render(scene, camera)
            camera.updateMatrixWorld()
        
            
        }
        animate()
        window.focus()

output :slight_smile: Vector3 {x: -0.3029310380651597, y: 0.12227428004884018, z: 0.9660929573563517}
index.html:227 coordinates Vector2 {x: -0.30293103806515953, y: 0.12227428004884056}
index.html:228 world Vector3 {x: -0.3029310380651597, y: 0.12227428004884018, z: 0.9660929573563517}