123 企業版網站標題

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)，並往下看，比較容易看出環形的立體感 */}

) }