Threejs Philosophy section: 2-column layout, auto-rotating cube, and corrected face rendering (#41)

Author: Copilot

src/templates/threejs/PhilosophyScene.tsx

@@ -20,12 +20,12 @@ const FLOOR_RADIUS = 2.7
 const FLOOR_SEGMENTS = 64
 const FLOOR_OPACITY = 0.14
 const FLOOR_Y = -2.25
-const DRAG_SENSITIVITY = 0.012
 const ROTATION_DAMPING = 0.1
 const WAVE_SPEED = 0.6
 const WAVE_INTENSITY = 0.05
 const FLOAT_SPEED = 0.9
 const FLOAT_INTENSITY = 0.06
+const AUTO_ROTATION_INTERVAL_SECONDS = 3.8
 
 function normalizeAngle(value: number): number {
   let angle = value
@@ -101,6 +101,13 @@ function buildFaceTexture(card: PhilosophyCardData): THREE.CanvasTexture {
   ctx.lineWidth = 6
   ctx.strokeRect(24, 24, canvas.width - 48, canvas.height - 48)
 
+  ctx.strokeStyle = 'rgba(56, 189, 248, 0.28)'
+  ctx.lineWidth = 3
+  ctx.beginPath()
+  ctx.moveTo(74, 148)
+  ctx.lineTo(300, 148)
+  ctx.stroke()
+
   ctx.fillStyle = 'rgba(125, 211, 252, 0.9)'
   ctx.font = '600 36px Inter, ui-sans-serif, system-ui'
   ctx.fillText('PHILOSOPHY', 74, 110)
@@ -113,6 +120,33 @@ function buildFaceTexture(card: PhilosophyCardData): THREE.CanvasTexture {
   ctx.font = '500 40px Inter, ui-sans-serif, system-ui'
   wrapText(ctx, card.body, 74, 420, canvas.width - 148, 56, 8)
 
+  const iconX = 824
+  const iconY = 188
+  const iconSize = 98
+  const half = iconSize / 2
+  ctx.strokeStyle = 'rgba(56, 189, 248, 0.78)'
+  ctx.lineWidth = 4
+  ctx.beginPath()
+  ctx.moveTo(iconX, iconY - half)
+  ctx.lineTo(iconX + half, iconY - half / 2)
+  ctx.lineTo(iconX + half, iconY + half / 2)
+  ctx.lineTo(iconX, iconY + half)
+  ctx.lineTo(iconX - half, iconY + half / 2)
+  ctx.lineTo(iconX - half, iconY - half / 2)
+  ctx.closePath()
+  ctx.stroke()
+  ctx.beginPath()
+  ctx.moveTo(iconX, iconY - half)
+  ctx.lineTo(iconX, iconY)
+  ctx.lineTo(iconX + half, iconY + half / 2)
+  ctx.moveTo(iconX, iconY)
+  ctx.lineTo(iconX - half, iconY + half / 2)
+  ctx.stroke()
+  ctx.fillStyle = 'rgba(56, 189, 248, 0.85)'
+  ctx.beginPath()
+  ctx.arc(iconX, iconY, 6, 0, Math.PI * 2)
+  ctx.fill()
+
   const texture = new THREE.CanvasTexture(canvas)
   texture.colorSpace = THREE.SRGBColorSpace
   texture.needsUpdate = true
@@ -124,6 +158,9 @@ export default function PhilosophyScene({ cards, activeIndex, onActiveIndexChang
   const cubeRef = useRef<THREE.Group | null>(null)
   const targetYRef = useRef(0)
   const onActiveChangeRef = useRef(onActiveIndexChange)
+  const currentAutoFaceRef = useRef(0)
+  const nextAutoSwitchAtRef = useRef(AUTO_ROTATION_INTERVAL_SECONDS)
+  const elapsedTimeRef = useRef(0)
 
   useEffect(() => {
     onActiveChangeRef.current = onActiveIndexChange
@@ -154,6 +191,8 @@ export default function PhilosophyScene({ cards, activeIndex, onActiveIndexChang
     const cube = new THREE.Group()
     scene.add(cube)
     cubeRef.current = cube
+    currentAutoFaceRef.current = 0
+    nextAutoSwitchAtRef.current = AUTO_ROTATION_INTERVAL_SECONDS
 
     const size = CUBE_SIZE
     const body = new THREE.Mesh(
@@ -187,7 +226,7 @@ export default function PhilosophyScene({ cards, activeIndex, onActiveIndexChang
       new THREE.MeshBasicMaterial({
         map: buildFaceTexture(card),
         transparent: false,
-        side: THREE.DoubleSide,
+        side: THREE.FrontSide,
       })
     ))
     const maxAnisotropy = renderer.capabilities.getMaxAnisotropy()
@@ -220,48 +259,6 @@ export default function PhilosophyScene({ cards, activeIndex, onActiveIndexChang
     floor.position.y = FLOOR_Y
     scene.add(floor)
 
-    let dragging = false
-    let prevX = 0
-
-    const findNearestFace = (angle: number) => {
-      let best = 0
-      let bestDistance = Number.POSITIVE_INFINITY
-      FACE_ANGLES.forEach((candidate, idx) => {
-        const distance = Math.abs(normalizeAngle(angle - candidate))
-        if (distance < bestDistance) {
-          best = idx
-          bestDistance = distance
-        }
-      })
-      return best
-    }
-
-    const down = (event: PointerEvent) => {
-      dragging = true
-      prevX = event.clientX
-      renderer.domElement.style.cursor = 'grabbing'
-    }
-    const move = (event: PointerEvent) => {
-      if (!dragging) return
-      const dx = event.clientX - prevX
-      prevX = event.clientX
-      targetYRef.current += dx * DRAG_SENSITIVITY
-    }
-    const up = () => {
-      if (!dragging) return
-      dragging = false
-      renderer.domElement.style.cursor = 'grab'
-      const nearest = findNearestFace(targetYRef.current)
-      targetYRef.current = FACE_ANGLES[nearest]
-      onActiveChangeRef.current(nearest)
-    }
-
-    renderer.domElement.style.cursor = 'grab'
-    renderer.domElement.addEventListener('pointerdown', down)
-    window.addEventListener('pointermove', move)
-    window.addEventListener('pointerup', up)
-    window.addEventListener('pointercancel', up)
-
     const handleResize = () => {
       if (!mount) return
       camera.aspect = mount.clientWidth / mount.clientHeight
@@ -275,6 +272,13 @@ export default function PhilosophyScene({ cards, activeIndex, onActiveIndexChang
     const animate = () => {
       frameId = requestAnimationFrame(animate)
       const elapsed = clock.getElapsedTime()
+      elapsedTimeRef.current = elapsed
+      if (elapsed >= nextAutoSwitchAtRef.current) {
+        currentAutoFaceRef.current = (currentAutoFaceRef.current + 1) % FACE_ANGLES.length
+        nextAutoSwitchAtRef.current = elapsed + AUTO_ROTATION_INTERVAL_SECONDS
+        onActiveChangeRef.current(currentAutoFaceRef.current)
+      }
+      targetYRef.current = FACE_ANGLES[currentAutoFaceRef.current]
 
       const cubeGroup = cubeRef.current
       if (cubeGroup) {
@@ -290,10 +294,6 @@ export default function PhilosophyScene({ cards, activeIndex, onActiveIndexChang
     return () => {
       cancelAnimationFrame(frameId)
       window.removeEventListener('resize', handleResize)
-      renderer.domElement.removeEventListener('pointerdown', down)
-      window.removeEventListener('pointermove', move)
-      window.removeEventListener('pointerup', up)
-      window.removeEventListener('pointercancel', up)
 
       scene.traverse((obj) => {
         const mesh = obj as THREE.Mesh
@@ -318,7 +318,9 @@ export default function PhilosophyScene({ cards, activeIndex, onActiveIndexChang
   }, [cards])
 
   useEffect(() => {
+    currentAutoFaceRef.current = activeIndex
     targetYRef.current = FACE_ANGLES[activeIndex] ?? 0
+    nextAutoSwitchAtRef.current = elapsedTimeRef.current + AUTO_ROTATION_INTERVAL_SECONDS
   }, [activeIndex])
 
   return (

src/templates/threejs/PhilosophySection.tsx

@@ -2,7 +2,6 @@ import { lazy, Suspense, useMemo, useState } from 'react'
 
 const PhilosophyScene = lazy(() => import('./PhilosophyScene'))
 const CUBE_FACE_COUNT = 4
-const FACE_LABELS = ['Front', 'Back', 'Left', 'Right']
 
 type PhilosophyCardData = { title: string; body: string }
 type Philosophy = { title: string; body: string; cards: PhilosophyCardData[] }
@@ -32,37 +31,22 @@ export default function PhilosophySection({ philosophy }: { philosophy: Philosop
       aria-labelledby="philosophy-title"
     >
       <div className="relative z-10 mx-auto max-w-5xl px-6">
-        <header className="mb-10 max-w-2xl">
-          <p className="mb-2 text-[10px] font-semibold uppercase tracking-[0.28em] text-blue-400">
-            {philosophy.title}
-          </p>
-          <p className="text-sm leading-relaxed text-slate-400">{philosophy.body}</p>
-        </header>
+        <div className="grid gap-10 lg:grid-cols-2 lg:items-center">
+          <header className="max-w-xl">
+            <p className="mb-3 text-[11px] font-semibold uppercase tracking-[0.28em] text-blue-400/90">
+              {philosophy.title}
+            </p>
+            <h2 id="philosophy-title" className="text-3xl font-semibold leading-tight text-slate-100 sm:text-4xl">
+              {philosophy.title}
+            </h2>
+            <p className="mt-4 text-lg leading-relaxed text-slate-300">{philosophy.body}</p>
+          </header>
 
-        <div className="mx-auto mb-8 h-[430px] w-full max-w-3xl overflow-hidden rounded-2xl border border-blue-900/35 bg-[#070d1d]/45 backdrop-blur-sm">
-          <Suspense fallback={null}>
-            <PhilosophyScene cards={cubeCards} activeIndex={activeFace} onActiveIndexChange={setActiveFace} />
-          </Suspense>
-        </div>
-
-        <div className="mx-auto grid max-w-4xl gap-3 sm:grid-cols-2">
-          {cubeCards.map((card, index) => (
-            <button
-              key={`${FACE_LABELS[index]}-${card.title}`}
-              type="button"
-              onClick={() => setActiveFace(index)}
-              className={`rounded-xl border px-4 py-3 text-left transition ${
-                activeFace === index
-                  ? 'border-cyan-400/80 bg-cyan-500/10 shadow-[0_0_24px_rgba(6,182,212,0.18)]'
-                  : 'border-blue-900/45 bg-[#060b17]/70 hover:border-blue-500/70 hover:bg-[#0b1428]/75'
-              }`}
-            >
-              <p className="mb-1 text-[10px] font-semibold uppercase tracking-[0.22em] text-cyan-300/85">
-                {FACE_LABELS[index]}
-              </p>
-              <p className="text-sm font-semibold text-slate-100">{card.title}</p>
-            </button>
-          ))}
+          <div className="h-[430px] w-full overflow-hidden rounded-2xl border border-blue-900/35 bg-[#070d1d]/45 backdrop-blur-sm">
+            <Suspense fallback={null}>
+              <PhilosophyScene cards={cubeCards} activeIndex={activeFace} onActiveIndexChange={setActiveFace} />
+            </Suspense>
+          </div>
         </div>
       </div>
     </section>