Threejs Coordinates not matching with the coordinates of the Intesects of the Ray Caster

90 Views Asked by At
// Step 1 
this.camera = new THREE.PerspectiveCamera(10,aspectRatio,0.0001,100000)
    this.camera.position.x = 2;
    this.camera.position.y = 2;
    this.camera.position.z = 2;
// Step 2
    this.scene = new THREE.Scene();
    this.scene.background = new THREE.Color(this.background_color)
    this.create_sphere(this.camera.position, 0.01)
//Step 3
    const mtlLoader = new MTLLoader();
    var mtl = await mtlLoader.loadAsync( this.url +'baked_mesh.mtl')

    this.loaderOBJ.setMaterials(mtl)
    this.model = await this.loaderOBJ.loadAsync(this.url + 'baked_mesh.obj') // url = https://wound-care.azurewebsites.net/models/bfe59b59-da40-4db4-b662-24461c0cff1d/
// Step 4
    this.renderer = new THREE.WebGLRenderer({ canvas: this.canvas, antialias: true });
    this.renderer.setPixelRatio(devicePixelRatio);
    this.renderer.setSize(this.canvas.clientWidth, this.canvas.clientHeight);

Step 1: Setup Camera

Step 2 : Setup Scene

Step 3: Load OBJ

Step 4: Setup Renderer


const mouse_click = (event:any) => {      
      if(event.which == 1){
        setRaycaster(event)
        var intersect = this.raycaster.intersectObject(this.pickableObjects[0])
        console.log(intersect)
        if(intersect.length >0){
          this.scene.add(measurementLabel)
          this.points.push(intersect[0].point)
          this.mouse_points.push(Object.assign({}, this.mouse))
          this.count+=1
          if(this.count == 1){
            var line_geometry = new THREE.BufferGeometry().setFromPoints([intersect[0].point,intersect[0].point.clone()])
            this.line = new THREE.LineSegments(             line_geometry,new THREE.LineBasicMaterial({                color:0x00FF00,transparent:true,opacity:1,               side:THREE.FrontSide,depthWrite:true,linecap:'square'              }))
            this.line.position.z = 0.002
            this.scene.add(this.line)
            this.drawingLine = true
          }
              this.ctrl_renderer.domElement.addEventListener('mousemove', on_move, false)

     }
}
let tirangle = new THREE.Triangle( intersects[0],new THREE.Vector3(2,2,2), intersects[intersects.length - 1])
      this.render_triangle(tirangle) // intersects[0] = ray Caster Intersect point 1
                                     // intersect[intersects.length -1] is the last intersect [!

The render triangle is implemented as

    render_triangle(triangle:Triangle){    
          let triangle_geom = new THREE.BufferGeometry()
          triangle_geom.setFromPoints([triangle.a, triangle.b, triangle.c])
          let triangle_material = new THREE.MeshBasicMaterial({color:0xff0000})
let triangle_mesh = new THREE.Mesh(triangle_geom,triangle_material)
          this.scene.add(triangle_mesh)
          this.animate()
}

The rendered Triangle is not on the with the intersect points is not on the Model but else where, where as the points given to the triangle are the intersects captured from the ray caster intesectObject

output of the above code snippet

enter image description here

0

There are 0 best solutions below