C .
ODE
G
AMELET
# three.js three.js 是一個基於 JavaScript 的瀏覽器 3D 繪圖引擎,允許開發者在網頁上輕鬆創建和顯示 3D 場景。 ## 使用方法 以下是一個簡單的範例,展示如何使用 `three.js` 創建一個基本的 3D 場景: ```ts import three = CG.ThreeJs.three; import OrbitControls = CG.ThreeJs.examples.jsm.controls.OrbitControls; function start(): void { // 初始化 three,用於自動建立場景、攝影機、渲染循環。 three.initialize(800, 600); // 建立一個軸心輔助物件,用於查看 x, y, z 的方向 const axesHelper = new THREE.AxesHelper(2); three.scene.add(axesHelper); // 添加至場景中 // 創建一個平面作為地板 const planeGeometry = new THREE.PlaneGeometry(10, 10); // 表示平面的幾何形狀 const planeMaterial = new THREE.MeshBasicMaterial({ color: 0xAAAAAA, side: THREE.DoubleSide }); // 基本紋理 const plane = new THREE.Mesh(planeGeometry, planeMaterial); plane.rotation.x = Math.PI / 2; // 平面一開始為垂直,調整 X 軸旋轉角度使其水平 three.scene.add(plane); // 將平面添加至場景中 // 創建方塊 const boxGeometry = new THREE.BoxGeometry(0.5, 0.5, 0.5); // 表示立方體的幾何形狀 const noxMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // 基本紋理 const box = new THREE.Mesh(boxGeometry, noxMaterial); box.position.y = 0.25; // 將方塊抬高 0.25,使其貼地 three.scene.add(box); // 將方塊添加至場景中 three.camera.position.set(0, 2, 5); // 調整攝影機位置 three.camera.lookAt(0, 0, 0); // 讓攝影機看向 (0, 0, 0) // 本模組初始化時會自動建立攝影機,一般需自行建立 // 新增一個控制器,可以用滑鼠來控制攝影機的視角,像是自由旋轉、平移和縮放效果。 const controls = new OrbitControls(three.camera, three.renderer.domElement); let lastFrame = Date.now(); three.beforeRender = () => { // 你可以複寫這個函數,在渲染畫面前做點事 const currentFrame = Date.now(); // 為當前幀時間 const deltaTime = currentFrame - lastFrame; // 計算自上幀以來的時間差 lastFrame = currentFrame; // 更新 lastFrame 為當前幀時間 // 如果 controls.enableDamping 或 controls.autoRotate 設為 true 則必須每次渲染畫面前更新。 controls.update(deltaTime); // 更新 OrbitControls }; } start(); ``` ## Resources - [three.js](https://threejs.org/) - 基於 JavaScript 的瀏覽器 3D 繪圖引擎。 ## Authors **[cook1470](/profile/cook1470)**
# TestTube TestTubes is a simple library for the CG platform. ## Usage ### Basic Usage First, import the required functions from the library: ```typescript const {test, expect, runTests} = CG.TestTube; ``` ### Writing Tests You can write tests using the `test` function. Each test is defined with a description, a test function, and optional tags for categorization: ```typescript test("adds numbers correctly", () => { expect(1 + 2).toBe(3); }, ["math"]); ``` ### Running Tests To run all registered tests, use the `runTests` function: ```typescript runTests(); ``` You can also run tests with a specific tag: ```typescript runTests("math"); ``` ### Assertions TestTubes provides a simple `expect` function to make assertions, including: - `toBe(expected)`: Asserts that the actual value is strictly equal to the expected value. - `toEqual(expected)`: Asserts that the actual value is deeply equal to the expected value. - `toBeTruthy()`: Asserts that the actual value is truthy. - `toBeFalsy()`: Asserts that the actual value is falsy. - `toThrow(expectedMessage?)`: Asserts that the actual function throws an error, optionally matching the expected message. ### Example Here's a very simple example demonstrating the usage of TestTubes for a simple math library and a DOM manipulation library: ```typescript const {test, expect, runTests} = CG.TestTube; // Math library export const MathLib = { add(a: number, b: number): number { return a + b; }, subtract(a: number, b: number): number { // Typing error return a + b; }, multiply(a: number, b: number): number { return a * b; }, divide(a: number, b: number): number { if (b === 0) throw new Error("Cannot divide by zero"); return a / b; } }; // DOM manipulation library export const DomLib = { createElement(tag: string, content: string): HTMLElement { const element = document.createElement(tag); element.textContent = content; return element; }, appendToBody(element: HTMLElement): void { document.body.appendChild(element); } }; // Math library tests test("adds numbers correctly", () => { expect(MathLib.add(1, 2)).toBe(3); }, ["math"]); test("subtracts numbers correctly", () => { expect(MathLib.subtract(2, 1)).toBe(1); }, ["math"]); test("multiplies numbers correctly", () => { expect(MathLib.multiply(2, 2)).toBe(4); }, ["math"]); test("divides numbers correctly", () => { expect(MathLib.divide(4, 2)).toBe(2); }, ["math", "division"]); test("throws error when dividing by zero", () => { expect(() => MathLib.divide(4, 0)).toThrow("Cannot divide by zero"); }, ["math", "division"]); // DOM manipulation tests test("creates an element with correct tag and content", () => { const element = DomLib.createElement("div", "Hello, World!"); expect(element.tagName.toLowerCase()).toBe("div"); expect(element.textContent).toBe("Hello, World!"); }, ["dom"]); test("appends an element to the body", () => { const element = DomLib.createElement("div", "Appended Element"); DomLib.appendToBody(element); expect(document.body.contains(element)).toBeTruthy(); }, ["dom"]); // Run all tests runTests(); // Optionally run only tests with a specific tag // runTests("math"); ``` The output looks like this: ```text Running 7 tests... ✅ adds numbers correctly ❌ subtracts numbers correctly Expected 3 to be 1 ✅ multiplies numbers correctly ✅ divides numbers correctly ✅ throws error when dividing by zero ✅ creates an element with correct tag and content ✅ appends an element to the body ``` ## API ### `test(description: string, fn: TestFunction, tags: string[] = [])` Registers a new test. - `description`: A description of the test. - `fn`: The test function to execute. - `tags`: Optional tags to categorize the test. ### `runTests(tag?: string)` Runs all registered tests, or only tests with the specified tag. - `tag`: Optional tag to filter tests to run. ### `expect(actual: unknown)` Creates an expectation for a value. Returns an object with assertion methods. ## Authors **[FOBShippingPoint](/profile/FOBShippingPoint)**
ⒸCode.Gamelet.com | Privacy Policy | Terms of Service