use partical texture for plus button

src/clientSideScene/sceneEntities.ts

@@ -12,6 +12,7 @@ import {
   OrthographicCamera,
   PerspectiveCamera,
   PlaneGeometry,
+  Points,
   Quaternion,
   Scene,
   Shape,
@@ -393,6 +394,7 @@ export class SceneEntities {
           isDraftSegment,
           scale: factor,
           callExpName,
+          texture: sceneInfra.extraSegmentTexture,
         })
       }
       seg.layers.set(SKETCH_LAYER)
@@ -1271,7 +1273,7 @@ function colorSegment(object: any, color: number) {
   ])
   if (straightSegmentBody) {
     straightSegmentBody.traverse((child) => {
-      if (child instanceof Mesh) {
+      if (child instanceof Mesh && !child.userData.ignoreColorChange) {
         child.material.color.set(color)
       }
     })
@@ -1375,7 +1377,7 @@ function massageFormats(a: any): Vector3 {
 
 function mouseEnterLeaveCallbacks() {
   return {
-    onMouseEnter: ({ selected }: OnMouseEnterLeaveArgs) => {
+    onMouseEnter: ({ selected, dragSelected }: OnMouseEnterLeaveArgs) => {
       if ([X_AXIS, Y_AXIS].includes(selected?.userData?.type)) {
         const obj = selected as Mesh
         const mat = obj.material as MeshBasicMaterial
@@ -1400,8 +1402,8 @@ function mouseEnterLeaveCallbacks() {
         const extraSegmentGroup = parent.getObjectByName(EXTRA_SEGMENT_HANDLE)
         if (extraSegmentGroup) {
           extraSegmentGroup.traverse((child) => {
-            if (child instanceof Mesh) {
+            if (child instanceof Points) {
-              child.material.opacity = 1
+              child.material.opacity = dragSelected ? 0 : 1
             }
           })
         }
@@ -1424,7 +1426,7 @@ function mouseEnterLeaveCallbacks() {
       const extraSegmentGroup = parent?.getObjectByName(EXTRA_SEGMENT_HANDLE)
       if (extraSegmentGroup) {
         extraSegmentGroup.traverse((child) => {
-          if (child instanceof Mesh) {
+          if (child instanceof Points) {
             child.material.opacity = 0
           }
         })

src/clientSideScene/sceneInfra.ts

@@ -18,6 +18,8 @@ import {
   Intersection,
   Object3D,
   Object3DEventMap,
+  TextureLoader,
+  Texture,
 } from 'three'
 import { compareVec2Epsilon2 } from 'lang/std/sketch'
 import { useModelingContext } from 'hooks/useModelingContext'
@@ -54,6 +56,7 @@ export const ARROWHEAD = 'arrowhead'
 
 export interface OnMouseEnterLeaveArgs {
   selected: Object3D<Object3DEventMap>
+  dragSelected?: Object3D<Object3DEventMap>
   mouseEvent: MouseEvent
 }
 
@@ -98,6 +101,7 @@ export class SceneInfra {
   isFovAnimationInProgress = false
   _baseUnit: BaseUnit = 'mm'
   _baseUnitMultiplier = 1
+  extraSegmentTexture: Texture
   onDragStartCallback: (arg: OnDragCallbackArgs) => void = () => {}
   onDragEndCallback: (arg: OnDragCallbackArgs) => void = () => {}
   onDragCallback: (arg: OnDragCallbackArgs) => void = () => {}
@@ -220,6 +224,13 @@ export class SceneInfra {
     const light = new AmbientLight(0x505050) // soft white light
     this.scene.add(light)
 
+    const textureLoader = new TextureLoader()
+    this.extraSegmentTexture = textureLoader.load(
+      '/clientSideSceneAssets/extra-segment-texture.png'
+    )
+    this.extraSegmentTexture.anisotropy =
+      this.renderer.capabilities.getMaxAnisotropy()
+
     SceneInfra.instance = this
   }
 
@@ -368,6 +379,7 @@ export class SceneInfra {
         this.hoveredObject = firstIntersectObject
         this.onMouseEnter({
           selected: this.hoveredObject,
+          dragSelected: this.selected?.object,
           mouseEvent: mouseEvent,
         })
       }
@@ -375,6 +387,7 @@ export class SceneInfra {
       if (this.hoveredObject) {
         this.onMouseLeave({
           selected: this.hoveredObject,
+          dragSelected: this.selected?.object,
           mouseEvent: mouseEvent,
         })
         this.hoveredObject = null

src/clientSideScene/segments.ts

@@ -12,8 +12,11 @@ import {
   Mesh,
   MeshBasicMaterial,
   NormalBufferAttributes,
+  Points,
+  PointsMaterial,
   Shape,
   SphereGeometry,
+  Texture,
   Vector2,
   Vector3,
 } from 'three'
@@ -72,6 +75,7 @@ export function straightSegment({
   isDraftSegment,
   scale = 1,
   callExpName,
+  texture,
 }: {
   from: Coords2d
   to: Coords2d
@@ -80,6 +84,7 @@ export function straightSegment({
   isDraftSegment?: boolean
   scale?: number
   callExpName: string
+  texture: Texture
 }): Group {
   const group = new Group()
 
@@ -133,16 +138,30 @@ export function straightSegment({
   group.add(mesh)
   if (callExpName !== 'close') group.add(arrowGroup)
 
-  const mat = new MeshBasicMaterial({
+  const particleMaterial = new PointsMaterial({
-    color: 0xffffff,
+    size: 16,
+    map: texture,
     transparent: true,
     opacity: 0,
   })
-  const sphereMesh = new Mesh(new SphereGeometry(0.03 * scale, 12, 12), mat)
+  const mat = new MeshBasicMaterial({
+    transparent: true,
+    color: 0xff0000,
+    opacity: 0,
+  })
+  const particleGeometry = new BufferGeometry().setFromPoints([
+    new Vector3(0, 0, 0),
+  ])
+  const particle = new Points(particleGeometry, particleMaterial)
+  particle.userData.ignoreColorChange = true
+  particle.userData.type = EXTRA_SEGMENT_HANDLE
+  const sphereMesh = new Mesh(new SphereGeometry(0.55, 12, 12), mat)
+  sphereMesh.userData.ignoreColorChange = true
 
   const extraSegmentGroup = new Group()
   extraSegmentGroup.userData.type = EXTRA_SEGMENT_HANDLE
   extraSegmentGroup.name = EXTRA_SEGMENT_HANDLE
+  extraSegmentGroup.add(particle)
   extraSegmentGroup.add(sphereMesh)
   const offsetFromBase = new Vector2(to[0] - from[0], to[1] - from[1])
     .normalize()