fix selecting 3d

src/components/D3Panel.js

@@ -117,6 +117,7 @@ class D3Panel extends React.Component {
     this.plane.rotation.x = Math.PI / 2;
     this.plane.position.y = -0.01;
     this.plane.name = 'bed-plane';
+    this.plane.isBedPlane = true;
     this.scene.add(this.plane);
 
     const directionalLight = new THREE.PointLight(0xffffff, 0.6);

src/d3/ShapeMesh.js

@@ -38,6 +38,7 @@ class ShapeMesh extends THREE.Object3D {
 
     this._mesh = new THREE.Mesh(new THREE.BufferGeometry(), material);
     this._mesh.name = shapeData.UID;
+    this._mesh.isShapeMesh = true;
     this.add(this._mesh);
 
     this._toonShader = toonShader;
@@ -61,6 +62,7 @@ class ShapeMesh extends THREE.Object3D {
 
     this._holeMesh = new THREE.Mesh(new THREE.Geometry().fromBufferGeometry(this._mesh.geometry), material);
     this._holeMesh.name = shapeData.UID;
+    this._holeMesh.isShapeMesh = true;
     this.add(this._holeMesh);
 
     this.updateSolid(solid, active);

src/d3/transformers/BaseTransformer.js

@@ -59,8 +59,8 @@ export default class BaseTransformer extends EventObject3D {
     this.dispatch(actions.d3MultitouchEnd(positions));
   }
   select(intersections) {
-    const mesh = intersections.find(({ object }) => object instanceof ShapeMesh);
-    const bed = intersections.find(({ object }) => object.name === 'bed-plane');
+    const mesh = intersections.find(({ object }) => object.isShapeMesh);
+    const bed = intersections.find(({ object }) => object.isBedPlane);
 
     if (mesh) {
       this.dispatch(actions.toggleSelect(mesh.object.name));
@@ -132,7 +132,7 @@ export default class BaseTransformer extends EventObject3D {
   }
   updateSpriteScale() {
     for (const sprite of this.children) {
-      if (!(sprite instanceof SpriteHandle) || !sprite.material.map) continue;
+      if (!(sprite.isUIHandle) || !sprite.material.map) continue;
 
       const scale = sprite.position.distanceTo(this.camera.getWorldPosition()) / 2000.0;
       const { width, height } = sprite.material.map.image;

src/d3/transformers/StampTransformer.js

@@ -42,7 +42,7 @@ export default class SculptTransformer extends BaseTransformer {
   }
 
   tap(event) {
-    const intersection = event.intersections.find(({ object }) => object instanceof ShapeMesh);
+    const intersection = event.intersections.find(({ object }) => object.isShapeMesh);
     if (this.hasSelection && intersection) {
       this.dispatch(actions.stamp(intersection));
     } else {

src/utils/threeUtils.js

@@ -41,6 +41,7 @@ export function createTextureFromBlob(blob) {
 }
 
 export class SpriteHandle extends THREE.Sprite {
+  isUIHandle = true;
   constructor(texture, scale) {
     if (!texture.image) {
       debug('Error: Texture not loaded');