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