I use raycaster of threejs in vue.My question is ,
when raycaster get intersectObjects ,and I can move the selected object position using custom div tag arrow.
But I moved the selected object two ~ three times, the object can not be selected using raycaster of threejs again.
if I refrash the web, I can select it again.
this is my code problem,or threejs sdk question?
Thank you.
this is my code:
onPointerDown_move( event ) {
var self =this;
self.onDownPosition.x = event.clientX;
self.onDownPosition.y = event.clientY;
self.pointer.x = ( event.clientX / window.innerWidth ) * 2 - 1;
self.pointer.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
// console.log(self.onDownPosition.x+";"+self.onDownPosition.y);
// console.log(self.pointer.x+";"+self.pointer.y);
var raycaster = new THREE.Raycaster(); // create once
raycaster.setFromCamera(self.pointer, self.camera);
// this.raycaster.linePrecision =0.1;
// console.log(this.raycaster);
// console.log(this.pointer);
// console.log(this.camera);
const intersects = raycaster.intersectObjects( this.splineHelperObjects );
console.log(intersects);
if ( intersects.length > 0 ) {
const object = intersects[0].object;
console.log(object);
self.splineHelperObjects.forEach(element => {
// console.log(element);
if(element == object)
{
element.material = self.material_select;
self.spline_Object_select.main = element;
self.spline_Object_select.pos_screen = self.getScreenPos(self.spline_Object_select.main);
//console.log(self.spline_Object_select.pos_screen);
}
else
{
element.material = self.material;
}
});
}
else
{
if(this.mouseEnter_x == false && this.mouseEnter_y == false)
{
//如果沒有點選東西 把點選的東西取消掉
if(this.spline_Object_select.main !=null)
{
this.spline_Object_select.main.material = self.material;
this.spline_Object_select.main =null;
this.spline_Object_select.pos_screen =null;
}
}
}
}