import { useState } from 'react'; import { motion } from 'framer-motion'; import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'; import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism'; const cubeGeneratorScript = ` -- 立方體生成函數 local function createCube(position, size, color, transparency) local cube = Instance.new("Part") cube.Size = Vector3.new(size, size, size) cube.Position = position cube.Anchored = true cube.CanCollide = false cube.Material = Enum.Material.Neon cube.Color = color or Color3.fromRGB(0, 170, 255) cube.Transparency = transparency or 0.5 cube.Parent = workspace -- 添加發光效果 local light = Instance.new("PointLight") light.Range = size * 2 light.Brightness = 0.5 light.Color = color or Color3.fromRGB(0, 170, 255) light.Parent = cube return cube end -- 創建立方體網格陣列 local function createCubeGrid(centerPosition, gridSize, cubeSize, spacing) local model = Instance.new("Model") model.Name = "CubeGrid" model.Parent = workspace for x = -gridSize/2, gridSize/2 do for y = -gridSize/2, gridSize/2 do for z = -gridSize/2, gridSize/2 do -- 計算位置 local position = centerPosition + Vector3.new( x * (cubeSize + spacing), y * (cubeSize + spacing), z * (cubeSize + spacing) ) -- 根據位置計算顏色（漸變效果） local color = Color3.fromHSV( (x + gridSize/2) / gridSize, (y + gridSize/2) / gridSize, (z + gridSize/2) / gridSize ) -- 創建立方體 local cube = createCube(position, cubeSize, color, 0.5) cube.Parent = model end end end return model end `; const dnaStructureScript = ` -- 創建DNA雙螺旋結構 local function createDNAStructure(centerPosition, height, radius, turns) local model = Instance.new("Model") model.Name = "DNAStructure" model.Parent = workspace local pointsPerTurn = 20 -- 每圈點數 local totalPoints = turns * pointsPerTurn -- 總點數 -- 創建兩條螺旋骨架 for i = 0, totalPoints do local angle = (i / pointsPerTurn) * math.pi * 2 local y = (i / totalPoints) * height -- 第一條螺旋 local x1 = math.cos(angle) * radius local z1 = math.sin(angle) * radius local position1 = centerPosition + Vector3.new(x1, y, z1) local cube1 = createCube(position1, 0.4, Color3.fromRGB(0, 200, 255), 0.3) cube1.Parent = model -- 第二條螺旋 (相位差180度) local x2 = math.cos(angle + math.pi) * radius local z2 = math.sin(angle + math.pi) * radius local position2 = centerPosition + Vector3.new(x2, y, z2) local cube2 = createCube(position2, 0.4, Color3.fromRGB(0, 255, 200), 0.3) cube2.Parent = model -- 每隔幾個點添加連接橫桿 if i % 4 == 0 then -- 創建連接兩條螺旋的橫桿 local connector = Instance.new("Part") connector.Size = Vector3.new(radius * 2, 0.2, 0.2) connector.CFrame = CFrame.new( centerPosition + Vector3.new((x1 + x2) / 2, y, (z1 + z2) / 2), centerPosition + Vector3.new(x2, y, z2) ) connector.Anchored = true connector.CanCollide = false connector.Material = Enum.Material.Neon connector.Color = Color3.fromRGB(255, 255, 255) connector.Transparency = 0.7 connector.Parent = model end end return model end `; const holographicProjectionScript = ` -- 服務引用 local RunService = game:GetService("RunService") local TweenService = game:GetService("TweenService") -- 常數設定 local GRID_SIZE = 20 -- 網格大小 local BASE_COLOR = Color3.fromRGB(0, 100, 150) -- 基本顏色（藍色） -- 創建容器模型 local hologramModel = Instance.new("Model") hologramModel.Name = "HologramModel" hologramModel.Parent = workspace -- 創建投影平台 local function createProjectionBase() local base = Instance.new("Part") base.Name = "ProjectionBase" base.Size = Vector3.new(GRID_SIZE * 1.5, 0.5, GRID_SIZE * 1.5) base.Position = Vector3.new(0, 0, 0) base.Anchored = true base.CanCollide = true base.Material = Enum.Material.Neon base.Color = BASE_COLOR base.Transparency = 0.2 base.Parent = hologramModel -- 添加投影光環 local ring = Instance.new("Part") ring.Name = "ProjectionRing" ring.Shape = Enum.PartType.Cylinder ring.Size = Vector3.new(0.2, base.Size.X * 1.1, base.Size.Z * 1.1) ring.CFrame = base.CFrame * CFrame.Angles(0, 0, math.rad(90)) ring.Anchored = true ring.CanCollide = false ring.Material = Enum.Material.Neon ring.Color = Color3.fromRGB(0, 200, 255) ring.Transparency = 0.5 ring.Parent = hologramModel return base end -- 添加投影光束 local function createProjectionBeam(base) -- 創建光束起點 local attachment1 = Instance.new("Attachment") attachment1.Position = Vector3.new(0, -2, 0) attachment1.Parent = base -- 創建光束終點 local attachment2 = Instance.new("Attachment") attachment2.Position = Vector3.new(0, 15, 0) attachment2.Parent = base -- 創建光束 local beam = Instance.new("Beam") beam.Attachment0 = attachment1 beam.Attachment1 = attachment2 beam.Width0 = 5 beam.Width1 = 2 beam.FaceCamera = true beam.LightEmission = 1 beam.LightInfluence = 0 beam.Transparency = NumberSequence.new({ NumberSequenceKeypoint.new(0, 0.7), NumberSequenceKeypoint.new(1, 0.9) }) beam.Color = ColorSequence.new(Color3.fromRGB(0, 200, 255)) beam.Parent = base return beam end `; export default function Lesson4Page() { const [activeSection, setActiveSection] = useState('intro'); const scrollToSection = (sectionId: string) => { setActiveSection(sectionId); const element = document.getElementById(sectionId); if (element) { element.scrollIntoView({ behavior: 'smooth' }); } }; return (
{/* Sidebar Navigation */}

課程目錄

{/* Main Content */}

Roblox 基礎入門第四課 - 視覺化程式設計：科技感立體投影圖像

探索程式與視覺藝術的完美結合，使用立方體 Part 創建令人驚嘆的科技感立體投影

{/* Course Introduction */}

課程簡介

本課程將帶領學習者探索 Roblox 中的視覺化程式設計，通過使用立方體 Part 創建科技感的立體投影圖像，展現程式與視覺藝術的完美結合。學習者將掌握如何使用程式化方法生成複雜的視覺效果，並實現互動式的立體投影展示。

課程目標

  • 在 Roblox Studio 中使用立方體 Part 創建複雜的科技感圖像
  • 設計並實現立體投影效果
  • 編寫程式控制圖像的動態變化與互動
  • 掌握粒子效果與光源運用技巧

前置準備

  • 已安裝最新版本的 Roblox Studio
  • 具備 Roblox Studio 基本操作能力（第一課內容）
  • 了解基本的 Lua 程式語法（第二課與第三課內容）
  • 對視覺設計有基本興趣
{/* Part 1: Design Concepts */}

第一部分：科技感圖像設計概念

步驟 1：了解科技感設計元素

科技感設計通常包含以下元素：

  • 幾何形狀與線條：使用簡潔的幾何形狀、直線和網格
  • 色彩選擇：藍色、青色等冷色調，高對比度
  • 光影效果：發光、半透明、光束
  • 動態變化：脈衝、旋轉、懸浮效果

在 Roblox 中，我們可以通過以下方式實現這些元素：

  • 使用立方體 Part 創建基本形狀
  • 調整材質、顏色和透明度
  • 添加光源和粒子效果
  • 使用腳本控制動態變化

步驟 2：規劃立方體陣列設計

立方體陣列是創建複雜科技感圖像的基礎，主要設計思路包括：

點陣圖像原理

  • 將三維空間劃分為網格
  • 每個網格點放置一個立方體
  • 通過控制立方體的存在、大小、顏色等屬性形成圖像

模塊化設計

  • 將複雜圖像分解為簡單模塊
  • 使用函數生成不同的模塊
  • 組合模塊形成完整圖像

數據驅動設計

  • 使用數學函數生成立方體位置
  • 使用參數控制整體效果
  • 實現動態變化和互動

步驟 3：創建新專案

  1. 打開 Roblox Studio
  2. 選擇「基礎模板」創建新專案
  3. 保存專案，命名為「HolographicProjection」
{/* Part 2: Cube Model Construction */}

第二部分：立方體模型建構

步驟 1：創建基本立方體

  1. 在工作區中插入一個方塊部件（Part）
  2. 調整立方體屬性：
    • Size: 0.5, 0.5, 0.5 (寬, 高, 長)
    • Color: 設置為藍色 (0, 170, 255)
    • Material: Neon
    • Transparency: 0.5
    • Anchored: true
    • CanCollide: false
  3. 添加發光效果：
    • 在立方體中添加 PointLight
    • Range: 1
    • Brightness: 0.5
    • Color: 與立方體相同顏色

步驟 2：創建立方體生成函數

為了更有效地創建多個立方體，我們需要編寫一個函數來生成它們：

  1. 在 ServerScriptService 中添加腳本，命名為「CubeGenerator」
  2. 編寫立方體生成函數
  3. 測試立方體生成
{cubeGeneratorScript}

步驟 3：創建立方體陣列

使用迴圈創建立方體陣列，形成基本的三維網格結構：

-- 創建一個 5x5x5 的立方體網格
local grid = createCubeGrid(Vector3.new(0, 10, 0), 5, 0.5, 0.2)

這段代碼將在空間中創建一個 5x5x5 的立方體網格，每個立方體大小為 0.5，間距為 0.2，中心位置在 (0, 10, 0)。

{/* Part 3: Tech Image Examples */}

第三部分：科技感圖像實例

步驟 1：創建 DNA 雙螺旋結構

DNA 雙螺旋是一個很好的科技感圖像範例，我們可以使用立方體來構建它：

{dnaStructureScript}

-- 創建一個 DNA 雙螺旋結構
local dna = createDNAStructure(Vector3.new(0, 5, 0), 15, 3, 3)

步驟 2：創建全息投影地球

全息地球是另一個很酷的科技感圖像，使用立方體點陣模擬球體：

全息地球實現原理

  • 使用球面坐標系（緯度、經度）計算立方體位置
  • 根據隨機值決定是陸地還是海洋，設置不同顏色
  • 添加經緯線網格增強科技感

實現代碼會創建一個由小立方體組成的球體，模擬地球表面，並添加經緯線網格增強科技感。

步驟 3：創建 3D 數據可視化圖表

數據可視化是科技感圖像的重要應用：

3D 數據圖表實現要點

  • 創建 X、Y、Z 三個坐標軸
  • 根據數據值生成不同高度的柱體
  • 使用顏色漸變表示數據值大小

實現代碼會創建一個三維座標系，並在其中生成數據柱體，柱體高度和顏色根據數據值變化。

{/* Part 4: Holographic Projection */}

第四部分：立體投影效果實現

步驟 1：創建投影平台

投影平台是立體投影效果的基礎：

{holographicProjectionScript}

步驟 2：添加投影光效

為了增強立體投影效果，我們需要添加光效：

投影光效關鍵元素

  • 光束效果：使用 Beam 物件創建從底部向上的光束
  • 環繞粒子：使用 ParticleEmitter 創建環繞投影的粒子效果
  • 脈衝光環：使用 TweenService 創建平台邊緣的脈衝光環

這些視覺效果結合起來，能夠創造出逼真的科幻全息投影感。

步驟 3：實現投影切換效果

為了展示不同的科技感圖像，我們需要實現投影切換功能：

投影切換實現方法

  • 創建切換按鈕，添加點擊事件
  • 設置模型顯示/隱藏邏輯
  • 添加切換時的視覺效果（如淡入淡出、粒子爆發等）

通過這種方式，玩家可以輕鬆切換不同的科技感圖像，增強互動體驗。

{/* Part 5: Interactive Control */}

第五部分：互動控制與優化

步驟 1：添加旋轉控制

為了讓玩家能夠從不同角度觀察投影模型，我們可以添加旋轉控制：

-- 添加旋轉功能
RunService.Heartbeat:Connect(function(deltaTime)
  -- 緩慢旋轉當前顯示的模型
  if displays[currentDisplay].Parent == hologramModel then
    displays[currentDisplay]:SetPrimaryPartCFrame(
      displays[currentDisplay].PrimaryPart.CFrame * CFrame.Angles(0, deltaTime * 0.5, 0)
    )
  end
end)

這段代碼會使當前顯示的模型緩慢旋轉，讓玩家可以看到模型的各個角度。

步驟 2：添加縮放控制

添加縮放控制可以讓玩家更詳細地觀察模型：

縮放控制實現方法

  • 創建縮放按鈕（放大/縮小）
  • 使用 TweenService 平滑過渡縮放效果
  • 設置縮放限制，防止模型過大或過小

通過縮放控制，玩家可以放大查看模型細節，或縮小查看整體效果。

步驟 3：優化性能

由於我們使用了大量立方體，需要注意性能優化：

性能優化技巧

  • 使用 LOD（細節層次）：根據距離調整立方體數量
  • 對象池技術：重用立方體而非創建新的
  • 視錐體剔除：只渲染視野內的立方體
  • 減少光源數量：合理控制發光效果

通過這些優化技巧，可以在保持視覺效果的同時提高遊戲性能。

{/* Summary and Challenge */}

總結與進階挑戰

課程總結

在本課程中，我們學習了如何在 Roblox Studio 中使用立方體 Part 創建科技感的立體投影圖像。我們掌握了以下關鍵技能：

  • 使用程式化方法生成複雜的立方體陣列
  • 創建 DNA 雙螺旋、全息地球等科技感圖像
  • 實現立體投影效果，包括投影平台、光束和粒子效果
  • 添加互動控制，如切換顯示、旋轉和縮放
  • 優化性能，確保流暢運行

這些技能可以應用於各種 Roblox 遊戲和體驗，如科幻遊戲、教育應用、數據可視化等。

進階挑戰

想要進一步提升您的視覺化程式設計技能？嘗試以下挑戰：

  • 創建更複雜的科技感圖像，如太陽系模型、分子結構等
  • 添加聲音效果，增強沉浸感
  • 實現手勢控制，讓玩家可以用手勢旋轉和縮放模型
  • 添加數據連接功能，實時顯示外部數據源的信息
  • 創建可編程界面，讓玩家自定義立方體陣列

資源推薦

{/* Navigation Buttons */}
上一課：機關門與數學題 返回首頁
); }