0
// 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

6
  • What exactly is intersects? intersectObjects returns an array of objects, not vectors. Could you show how you define the variable intersects? Commented Nov 22, 2022 at 16:38
  • intersects array is the array of point of intersections with the object. Commented Nov 23, 2022 at 6:35
  • Ok. Next question: what does this.render_triangle() look like? Commented Nov 23, 2022 at 10:19
  • render_triangle(triangle:Triangle){ let triangle_geom = new THREE.BufferGeometry() triangle_geom.setFromPoints([triangle.a, triangle.b, triangle.c]) console.log(triangle.a, triangle.b, triangle.c) let triangle_material = new THREE.MeshBasicMaterial({ color:0xff0000 }) let triangle_mesh = new THREE.Mesh(triangle_geom, triangle_material) console.log(triangle_mesh) // triangle_mesh.worldToLocal(triangle.a) this.scene.add(triangle_mesh) this.animate() } Commented Nov 23, 2022 at 13:58
  • Edited the question, Please have a look Commented Nov 25, 2022 at 7:16

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.