How to make spline working in spefific area?

Questions
, , , , ,
1

please How to make spline working only in green area

Capture
Capture914×778 59.9 KB

here is the code

  function handleClick(event) {
        const x = (event.clientX / window.innerWidth) * 2 - 1;
        const y = -(event.clientY / window.innerHeight) * 2 + 1;
        const vector = new THREE.Vector3(x, y, 0.5);
        vector.unproject(camera);
        const dir = vector.sub(camera.position).normalize();
        const distance = -camera.position.z / dir.z;
        const pos = camera.position.clone().add(dir.multiplyScalar(distance));
        vertices.push(pos);
console.log(pos.x,pos.y,pos.z)
        const customGeometry = new THREE.BufferGeometry().setFromPoints(vertices);
        points.geometry.dispose(), points.geometry = customGeometry;
        if (vertices.length >= 3) {
          const curve = new THREE.CatmullRomCurve3(vertices);
          const po = curve.getPoints(150);
          const geometry = new THREE.BufferGeometry().setFromPoints(po);
          const material = new THREE.LineBasicMaterial({ color: 0xff0000 });
          curveObject.geometry.dispose(), curveObject.geometry = geometry, curveObject.material = material;
        }
      }

      function init() {
        scene = new THREE.Scene();
        camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.set(0, 0, 5);
        scene.add(camera);
        renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);
        scene.add(points);
        scene.add(curveObject);
        window.addEventListener('click', handleClick);
const geometry = new THREE.PlaneGeometry( 5,5,10, 10 );
const material = new THREE.MeshBasicMaterial( {color:'green', side: THREE.DoubleSide,wireframe:true} );
const plane = new THREE.Mesh( geometry, material );
scene.add( plane );
      }
2

What does it mean?
How does the desired result have to look like?

3

I Want To be like This

Capture
Capture759×695 57.9 KB

I need the spline to be inside the green area not outside

4

Either Box2 or Box3 has .clampPoint() method. So you can use it to restrict a point to get outside of a specified rectangle/box.

5

Thank you sir workedd :ok_hand: :ok_hand: but not box3 I used new THREE.Vector3().clamp(min:Vector3,max:Vector3)

1 Like