import { Canvas, useFrame } from '@react-three/fiber'
import { OrbitControls } from '@react-three/drei'
import { useMemo } from 'react'
import * as THREE from 'three'
function MarqueeRingScreen() {
// 使用 useMemo 確保 Canvas 只被創建一次，提升效能
const texture = useMemo(() => {
// 1. 建立隱藏的 2D 畫布
const canvas = document.createElement('canvas')
canvas.width = 2048 // 寬度拉大以容納長文字
canvas.height = 256
const ctx = canvas.getContext('2d')
// 2. 畫黑色背景
ctx.fillStyle = '#000000'
ctx.fillRect(0, 0, canvas.width, canvas.height)
// 3. 畫上跑馬燈文字 (模擬 LED 高亮度綠色)
ctx.fillStyle = '#00FF00'
ctx.font = 'bold 150px Arial'
ctx.textAlign = 'center'
ctx.textBaseline = 'middle'
ctx.fillText('★ HIGH DEFINITION LED DISPLAY ★', canvas.width / 2, canvas.height / 2)
// 4. 將 Canvas 轉換為 Three.js 的貼圖
const tex = new THREE.CanvasTexture(canvas)
tex.wrapS = THREE.RepeatWrapping // 允許貼圖在水平方向無縫重複拼接
tex.wrapT = THREE.RepeatWrapping
return tex
}, [])
// useFrame 會在瀏覽器每一次畫面刷新時執行 (約每秒 60 次)
useFrame(() => {
// 不斷改變貼圖的 X 軸偏移量，創造出文字滾動的視覺效果
texture.offset.x -= 0.002
})
return (
{/* 環形屏：使用圓柱體 (半徑 2, 高 1, 側邊分段 64, openEnded=true 代表上下不封頂) */}
{/* side={THREE.DoubleSide} 讓圓柱體的內外兩側都能顯示畫面 */}
)
}
export default function App() {
return (
{/* 攝影機稍微拉高一點 (Y軸設為2)，並往下看，比較容易看出環形的立體感 */}
)
}
目前搶購人潮眾多，請耐心等候
若離開此頁面，可能會延長等待時間。
