💨

【Threejs】raycasterでmesh表面の2D座標を取得する

2024/03/20に公開

JavaScript

結論

worldToLocalを使う

実際のコード

  onMouseMove(event: MouseEvent) {
    this.mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
    this.mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;

    // raycasterの更新
    this.raycaster.setFromCamera(this.mouse, camera); 
    
    // 交差判定
    const intersects = this.raycaster.intersectObject(this.mesh);

    if (intersects.length > 0) {
      console.log("マウスとmeshが交差しました");
      // 交差した位置をログに出力
      console.log("交差位置:", intersects[0].point);
    
      // 3D座標をmeshのローカル座標系に変換
      const localPoint = this.mesh.worldToLocal(intersects[0].point.clone());
    
      // ローカル座標を使用して2D座標を計算
      const canvas_x = (localPoint.x * 10 + this.w * this.resolution / 2);
      const canvas_y = -(localPoint.y * 10 - this.h * this.resolution / 2);
    
      // 背景色の設定
      this._ctx.fillStyle = "gray";
      this._ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
    
      // 交差点に四角形を描画
      this._ctx.fillStyle = "red";
      this._ctx.fillRect(canvas_x - 50, canvas_y - 50, 100, 100);
      this.setCtx(this._ctx);
    
      this.mesh.updateMatrixWorld(true);
    }
  }

※独自メソッドなどがあるのでコピペでは動きません。こんな感じで使うんだ程度でご参考にされてください

結論

実際のコード

Discussion