Gemini 在教學上應用教案 - 2025年7月1日 by 張瓊云 https://padlet.com/appsntpc/omaeejsp2z02v6i9 Google AI en-us 2025-06-29 16:19:02 UTC 2025-12-17 03:38:36 UTC hello@padlet.com 動圖好好玩_Gemini chiungyun1 https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3505147719 提示詞

您將扮演一個能夠根據用戶提供的圖片，設計出有趣且富有創意的5秒鐘動畫效果的AI。您需要提供動畫效果的詳細描述，並給出建議的Prompt，以便用戶能將其輸入AI圖像/動畫生成工具。


目的與目標：


* 根據用戶的圖片輸入，設計獨特且引人入勝的5秒鐘動畫效果。

* 為每個動畫效果提供清晰、分階段的描述，讓用戶了解動畫的演變。

* 提供優化過的Prompt，確保用戶在AI工具中獲得最佳的動畫輸出。

* 推薦適合的影片生成工具，幫助用戶完成動畫製作。


行為與規則：


1) 初始查詢：

a) 以親切友好的語氣歡迎用戶，並表明您是他們的動畫設計助手。

b) 提示用戶提供他們想要製作動畫的圖片（透過描述或上傳方式）。

c) 詢問用戶是否對動畫效果有任何初步的想法或偏好（例如：想要活潑、溫馨、戲劇性等）。


2) 動畫設計與呈現：

a) 仔細分析用戶提供的圖片，從中找出可以增強視覺趣味的元素。

b) 設計一個包含2-4個階段的5秒鐘動畫效果，每個階段都應有明確的動作或變化。

c) 描述動畫效果時，使用具體、生動的詞語，讓用戶能夠清晰地想像出最終的效果。

d) 針對每個動畫效果，生成一個完整且優化的英文Prompt，包含風格、氛圍和關鍵動作的描述，例如：'5-second animation, cartoon style, warm and inviting.'。

e) 在提供動畫效果和Prompt之後，推薦至少一個（最多四個）影片生成工具供用戶選擇，例如：PixVerse AI、Kling AI、Runway AI、Hailuo AI等。


3) 互動與調整：

a) 鼓勵用戶提出修改意見或詢問更多關於動畫效果的問題。

b) 根據用戶的回饋，靈活調整動畫設計和Prompt，以滿足其需求。

c) 如果用戶對多個圖片感興趣，為每張圖片提供獨立的動畫設計。


4)  回復完以上請推薦生成影片工具，如下 

a) PixVerst: https://app.pixverse.ai/onboard

b) Kling: https://app.klingai.com/global/


整體語氣：


* 使用清晰、簡潔、友好的語言。

* 展現出對動畫設計的熱情和創意。

* 讓用戶感覺像是在與一位專業且富有想像力的動畫師交流。

]]> 2025-06-29 16:19:02 UTC https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3505147719 Google Gemini 概述 chiungyun1 https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3505147720 提示詞:

請幫我以《靜夜思》的意境生成一張圖片:詩詞如下

床前明月光，

疑是地上霜。

舉頭望明月，

低頭思故鄉。

畫風為水彩畫風

]]> 2025-06-29 16:19:02 UTC https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3505147720 探索三角形的「心」 chiungyun1 https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3505147721 提示詞:你是一位高中數學老師，請設計可以讓學生互動的模型，主題為三角形重心、垂心、內心，要動態呈現"即時調整點位置，觀察交點變化"，讓學生可以直觀掌握幾何性質

]]> 2025-06-29 16:19:02 UTC https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3505147721 Chat+字幕生成 chiungyun1 https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3505147722 提示詞

幫我進行語音錄製並輸出為標準 SRT 字幕檔，以下是格式與規則要求：

每句字幕請控制在10~15個中文字以內。

字幕需侵犯語句自然停頓（例如逗號、句號）分段，請勿中斷未完成語意。

每句字幕的顯示時間需依實際語速計算，通常在1.55秒之間。

請使用SRT格式，時間碼格式如下：00:00:00,000 --> 00:00:04,500。

每段最多顯示兩行中文字，過長自動斷行。

00:00:04,500，代表4秒500毫秒
字幕與字幕間空一行

請處理我上傳的語音檔，並控制台字幕對應。

字幕輸出範例

1

00:00:00,000 --> 00:00:03,500

大家好，今天要跟你們介紹一篇

AI工具，名為SubEasy。

2

00:00:03,600 --> 00:00:06,500

它可以快速到達螢幕、

標註說話者，甚至自動翻譯。

3

00:00:06,600 --> 00:00:09,500

我自己用過後，

覺得比Arctime還方便。


]]> 2025-06-29 16:19:02 UTC https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3505147722 Stream_Talk chiungyun1 https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3505147723 英文口說練習

]]> 2025-06-29 16:19:02 UTC https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3505147723 Stream_Webcam chiungyun1 https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3505147724 視覺辨識

]]> 2025-06-29 16:19:02 UTC https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3505147724 Stream_ShareScreen chiungyun1 https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3505147725 軟體教學

]]> 2025-06-29 16:19:02 UTC https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3505147725 VideoGem chiungyun1 https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3505147726 生成影片

]]> 2025-06-29 16:19:02 UTC https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3505147726 講義 chiungyun1 https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3505147728 2025-06-29 16:19:02 UTC https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3505147728 噪音對植物生長影響研究 chiungyun1 https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3505147729 建立-->網頁

共用-->分享Canvas

]]> 2025-06-29 16:19:02 UTC https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3505147729 靜夜思 chiungyun1 https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3505147730 2025-06-29 16:19:02 UTC https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3505147730 永續智城：mBot綠色行動營 教案 chiungyun1 https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3505147731 提示詞:你是一位高中老師，請針對永續發展SDGs的17主題與mBot機器人做結合，設計1天的營隊教案(請找永續發展SDGs17主題適合與mBot機器人結合的議題，不用17個都使用到，找1~2個即可)

]]> 2025-06-29 16:19:02 UTC https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3505147731 九月九日憶山東兄弟 https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506590043 2025-07-01 01:43:00 UTC https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506590043 相思 吉卜力風格 https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506590057 紅豆生南國，春來發幾枝？

願君多採擷，此物最相思。

]]> 2025-07-01 01:43:01 UTC https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506590057 https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506590696 請設計一件一年級班服，t恤樣式的上有紫色系格子圖案，袖子用漸層的紫色，不要格子，左胸前加入哥德體數字1，大小約七公分

]]> 2025-07-01 01:43:30 UTC https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506590696 https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506590839 請幫我生成以下詩詞的情境圖，畫風為浮世繪風：床前明月光，疑是地上霜。舉頭望明月，低頭思故鄉。

]]> 2025-07-01 01:43:38 UTC https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506590839 https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506591619 2025-07-01 01:44:12 UTC https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506591619 NI https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506592254 水彩畫-靜夜詩

]]> 2025-07-01 01:44:49 UTC https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506592254 黃鶴樓 https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506592263 以波希米亞風表現黃鶴樓

]]> 2025-07-01 01:44:50 UTC https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506592263 https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506592331 幫我生成以下情境的情境圖，風格是Q版可愛風。

一個小男孩在公園，張口咬了一隻柴犬，狗淚眼汪汪，很無奈

]]> 2025-07-01 01:44:55 UTC https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506592331 吉卜力風格生成的棒球選手圖片 https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506592543 2025-07-01 01:45:04 UTC https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506592543 江雪 https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506592658 請幫我生成以下詩詞的情境圖，畫風為中國水墨漫畫風，主角要是貓熊。

千山鳥飛絕，萬徑人蹤滅。孤舟蓑笠翁，獨釣寒江雪。

]]> 2025-07-01 01:45:10 UTC https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506592658 是一幅根據《將進酒》詩詞意境生成的情境圖： https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506593202 這幅圖描繪了一位身著飄逸長袍的古代中國學者，手持酒杯，神情莊重而略帶憂鬱，置身於雄偉的中國山水畫中，遠處是朦朧的山巒和皎潔的月亮，希望能符合您對詩詞情境的想像。

]]> 2025-07-01 01:45:39 UTC https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506593202 https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506593470 請幫我生成這首詩的圖片，用卡通風格:鋤禾日當午，汗滴禾下土。 誰知盤中飧，粒粒皆辛苦。

]]> 2025-07-01 01:45:51 UTC https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506593470 https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506593761 松下問童子，言師採藥去，只在此山中，雲深不知處

]]> 2025-07-01 01:46:02 UTC https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506593761 https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506594073 2025-07-01 01:46:18 UTC https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506594073 https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506594212 2025-07-01 01:46:27 UTC https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506594212 這是一張在公園裡，一個年輕男孩和兩隻不同種類的小狗在嬉戲的漫畫風格圖片 https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506594477 2025-07-01 01:46:42 UTC https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506594477 https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506594550 Elementary school teachers in Taiwan enjoy their summer vacation.

]]> 2025-07-01 01:46:45 UTC https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506594550 https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506594785 請生成一張教師忙到焦頭爛額、疲憊樣的圖片，風格是中國水墨畫風。

]]> 2025-07-01 01:46:53 UTC https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506594785 單細胞 https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506594880 用進擊的巨人畫風生成米津玄師的歌詞LEMON

夢ならばどれほどよかったでしょう
未だにあなたのことを夢にみる
忘れた物を取りに帰るように
古びた思い出の埃を払う

戻らない幸せがあることを
最後にあなたが教えてくれた
言えずに隠してた昏い過去も
あなたがいなきゃ永遠に昏いまま

きっともうこれ以上傷つくことなど
ありはしないとわかっている

あの日の悲しみさえ あの日の苦しみさえ
そのすべてを愛してた あなたとともに
胸に残り離れない 苦いレモンの匂い
雨が降り止むまでは帰れない
今でもあなたはわたしの光

暗闇であなたの背をなぞった
その輪郭を鮮明に覚えている
受け止めきれないものと出会うたび
溢れてやまないのは涙だけ

何をしていたの 何を見ていたの
わたしの知らない横顔で

どこかであなたが今
わたしと同じ様な
涙にくれ淋しさの中にいるなら
わたしのことなどどうか忘れてください
そんなことを心から願うほどに
今でもあなたはわたしの光

自分が思うより 恋をしていたあなたに
あれから思うように 息ができない

あんなに側にいたのに まるで嘘みたい
とても忘れられない それだけが確か

あの日の悲しみさえ あの日の苦しみさえ
そのすべてを愛してた あなたとともに
胸に残り離れない苦いレモンの匂い
雨が降り止むまでは帰れない
切り分けた果実の片方の様に
今でもあなたはわたしの光

]]> 2025-07-01 01:46:58 UTC https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506594880 莎士比亞14行詩 https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506595161 請依據下面的詩生成浪漫畫派風格的圖片From you have I been absent in the spring,

When proud-pied April dress’d in all his trim

Hath put a spirit of youth in every thing,

That heavy Saturn laugh’d and leap’d with him.

Yet nor the lays of birds nor the sweet smell

Of different flowers in odour and in hue

Could make me any summer’s story tell,

Or from their proud lap pluck them where they grew;

Nor did I wonder at the lily’s white,

Nor praise the deep vermilion in the rose;

They were but sweet, but figures of delight,

Drawn after you, you pattern of all those.

Yet seem’d it winter still, and, you away,

As with your shadow I with these did play.

]]> 2025-07-01 01:47:10 UTC https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506595161 https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506595598 這是一張主角穿著中國風服裝，以美式漫畫風格呈現《靜夜思》意境的圖片

]]> 2025-07-01 01:47:33 UTC https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506595598 搗亂 https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506595696 2025-07-01 01:47:39 UTC https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506595696 秘密 https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506595752 請幫我生成以下語句的情境圖，畫風為動漫風格。凡事都有定期， 天下每一事務都有定時。 生有時，死有時； 栽種有時，拔出有時； 殺戮有時，醫治有時； 拆毀有時，建造有時； 哭有時，笑有時； 哀慟有時，跳舞有時； 丟石頭有時，撿石頭有時； 懷抱有時，不抱有時； 尋找有時，失落有時； 保存有時，拋棄有時； 撕裂有時，縫補有時； 沉默有時，說話有時； 喜愛有時，恨惡有時； 戰爭有時，和平有時。

]]> 2025-07-01 01:47:42 UTC https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506595752 addbeautiful https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506596152 2025-07-01 01:48:03 UTC https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506596152 https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506596367 2025-07-01 01:48:14 UTC https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506596367 請幫我以下列古文情境生成一張哆啦A夢風格的圖片：對酒當歌，人生幾何？譬如朝露，去日苦多。 yaya963369 https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506596636 慨當以慷，憂思難忘。何以解憂？惟有杜康。

]]> 2025-07-01 01:48:28 UTC https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506596636 https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506597359 2025-07-01 01:49:00 UTC https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506597359 登鸛雀樓 https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506598136 http://googleusercontent.com/image_generation_content/0


希望您喜歡！

]]> 2025-07-01 01:49:39 UTC https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506598136 三日入廚下 https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506598756 2025-07-01 01:50:11 UTC https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506598756 https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506599784 請用飛天小女警的風格生成一張國小教學現場的圖片，地點為教室，老師是女老師

]]> 2025-07-01 01:51:01 UTC https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506599784 https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506601782 2025-07-01 01:52:20 UTC https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506601782 國小六年級自然 https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506721844 2025-07-01 03:01:31 UTC https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506721844 美勞領域結合SDGs難民議題 (國小五年級) https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506724218 2025-07-01 03:02:54 UTC https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506724218 https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506726491 2025-07-01 03:04:15 UTC https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506726491 https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506728425 2025-07-01 03:05:28 UTC https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506728425 國小社會領域雙語教學教案 https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506742256 2025-07-01 03:14:42 UTC https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506742256 自然 https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506742350 2025-07-01 03:14:45 UTC https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506742350 校園小英雄：危機應變大作戰 https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506750232 2025-07-01 03:21:19 UTC https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506750232 https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506751577 2025-07-01 03:22:26 UTC https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506751577 國際交流課程 https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506751581 2025-07-01 03:22:26 UTC https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506751581 社會領域雙語教學教案 https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506752334 2025-07-01 03:23:08 UTC https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506752334 國小四年級作文教學教案：永續發展目標（SDGs）主題寫作（共四節） https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506755430 2025-07-01 03:25:43 UTC https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506755430 單字互動 https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506761036 2025-07-01 03:30:43 UTC https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506761036 識字困難學生國字互動練習 https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506768290 2025-07-01 03:37:31 UTC https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506768290 設計與梵谷有關的一個互動測驗 https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506775248 你對梵谷的了解有多少？這個測驗將帶你深入了解這位荷蘭後印象派畫家的人生與創作。

]]> 2025-07-01 03:43:50 UTC https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506775248 俄羅斯方塊 https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506779020 2025-07-01 03:47:26 UTC https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506779020 認識動物 https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506782709 2025-07-01 03:51:06 UTC https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506782709 三年級作文題目:我的願望 addbeautiful https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506782815 提供學生1-3常用的基本造句句型寫作之用，同時也列出了作文教學的步驟，假如再請AI搜尋適合國小三年級學童閱讀的我的願望文章中，羅列出來常用的短語仿寫跟常用的語詞，那就更能幫助孩子寫作得更順暢喔!

]]> 2025-07-01 03:51:12 UTC https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506782815 10以內角落生物加減法 https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506783817 2025-07-01 03:52:19 UTC https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506783817 互動式透明保留邊3D立方體動畫 https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506784198 <!DOCTYPE html>

<html lang="zh-Hant">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>互動式透明保留邊3D立方體動畫</title>

<!-- 引入 Tailwind CSS -->

<script src="https://cdn.tailwindcss.com"></script>

<!-- 引入 Three.js 函式庫 -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>

<style>

/* 設定 body 和 html 為全高，以便於內容居中 */

html, body {

margin: 0;

padding: 0;

height: 100%;

overflow: hidden; /* 防止滾動條 */

font-family: "Inter", sans-serif; /* 使用 Inter 字體 */

}

/* Canvas 樣式，使其填滿容器並居中 */

canvas {

display: block; /* 移除 canvas 下方的額外空間 */

margin: auto; /* 水平居中 */

background-color: #f0f0f0; /* 輕微的背景色 */

border-radius: 1rem; /* 圓角 */

box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* 陰影效果 */

}

</style>

</head>

<body class="bg-gradient-to-br from-blue-100 to-purple-200 flex items-center justify-center min-h-screen p-4">

<div class="relative w-full max-w-4xl h-full max-h-[80vh] flex flex-col items-center justify-center bg-white rounded-2xl shadow-xl p-6">

<h1 class="text-3xl md:text-4xl font-bold text-gray-800 mb-6 text-center">互動式透明保留邊3D立方體</h1>

<div id="canvas-container" class="w-full h-full flex items-center justify-center">

<!-- Three.js 渲染的 canvas 將會被添加到這裡 -->

</div>

<p class="mt-6 text-gray-600 text-center text-sm md:text-base">

請點擊並拖曳滑鼠來旋轉透明且保留邊的立方體。

</p>

</div>

<script type="module">

// 引入 Three.js 核心物件

import * as THREE from 'https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.module.js';

let scene, camera, renderer, cube, edges; // 新增 edges 變數

let isDragging = false;

let previousMousePosition = {

x: 0,

y: 0

};

// 初始化場景、攝影機和渲染器

function init() {

// 取得容器元素

const container = document.getElementById('canvas-container');

// 建立場景

scene = new THREE.Scene();

// 建立攝影機

// PerspectiveCamera(視野角度, 長寬比, 近裁剪面, 遠裁剪面)

camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000);

camera.position.z = 5; // 將攝影機向後移動，以便看到立方體

// 建立渲染器

renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); // 啟用抗鋸齒和透明背景

renderer.setSize(container.clientWidth, container.clientHeight); // 設定渲染器大小為容器大小

container.appendChild(renderer.domElement); // 將渲染器的 DOM 元素添加到容器中

// 建立立方體幾何體

const geometry = new THREE.BoxGeometry(2, 2, 2); // 建立一個邊長為2的立方體幾何體

// 建立透明材質

const material = new THREE.MeshBasicMaterial({

color: 0x4299e1, // 稍微改變顏色，使其在透明時更明顯

transparent: true, // 啟用透明度

opacity: 0.3, // 設定透明度，使其更透明一些

wireframe: false,

side: THREE.DoubleSide // 渲染兩面，以確保從內部也能看到

});

cube = new THREE.Mesh(geometry, material); // 建立網格物件 (幾何體 + 材質)

scene.add(cube); // 將立方體添加到場景中

// 建立邊緣幾何體

const edgesGeometry = new THREE.EdgesGeometry(geometry); // 從立方體幾何體建立邊緣幾何體

// 建立邊緣材質 (黑色線條)

const edgesMaterial = new THREE.LineBasicMaterial({ color: 0x000000, linewidth: 2 }); // 黑色線條，設定線寬

edges = new THREE.LineSegments(edgesGeometry, edgesMaterial); // 建立線段物件

cube.add(edges); // 將邊緣作為立方體的子物件，這樣它們會一起旋轉

// 加入光源 (即使是透明物體，光源也能影響其陰影或反射，儘管 MeshBasicMaterial 不受光照影響)

const ambientLight = new THREE.AmbientLight(0x404040); // 環境光

scene.add(ambientLight);

const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5); // 方向光

directionalLight.position.set(1, 1, 1).normalize();

scene.add(directionalLight);

// 處理視窗大小改變

window.addEventListener('resize', onWindowResize, false);

onWindowResize(); // 初始設定一次

// 添加滑鼠事件監聽器

renderer.domElement.addEventListener('mousedown', onMouseDown, false);

renderer.domElement.addEventListener('mouseup', onMouseUp, false);

renderer.domElement.addEventListener('mousemove', onMouseMove, false);

renderer.domElement.addEventListener('touchstart', onTouchStart, false);

renderer.domElement.addEventListener('touchend', onTouchEnd, false);

renderer.domElement.addEventListener('touchmove', onTouchMove, false);

}

// 處理視窗大小改變的函式

function onWindowResize() {

const container = document.getElementById('canvas-container');

camera.aspect = container.clientWidth / container.clientHeight; // 更新攝影機的長寬比

camera.updateProjectionMatrix(); // 更新攝影機的投影矩陣

renderer.setSize(container.clientWidth, container.clientHeight); // 更新渲染器大小

}

// 滑鼠按下事件

function onMouseDown(event) {

isDragging = true;

previousMousePosition.x = event.clientX;

previousMousePosition.y = event.clientY;

}

// 滑鼠放開事件

function onMouseUp(event) {

isDragging = false;

}

// 滑鼠移動事件

function onMouseMove(event) {

if (!isDragging) return;

const deltaX = event.clientX - previousMousePosition.x;

const deltaY = event.clientY - previousMousePosition.y;

// 根據滑鼠移動量旋轉立方體 (邊緣會跟隨)

cube.rotation.y += deltaX * 0.01;

cube.rotation.x += deltaY * 0.01;

previousMousePosition.x = event.clientX;

previousMousePosition.y = event.clientY;

}

// 觸控開始事件

function onTouchStart(event) {

if (event.touches.length === 1) {

isDragging = true;

previousMousePosition.x = event.touches[0].clientX;

previousMousePosition.y = event.touches[0].clientY;

}

}

// 觸控結束事件

function onTouchEnd(event) {

isDragging = false;

}

// 觸控移動事件

function onTouchMove(event) {

if (!isDragging || event.touches.length !== 1) return;

const deltaX = event.touches[0].clientX - previousMousePosition.x;

const deltaY = event.touches[0].clientY - previousMousePosition.y;

cube.rotation.y += deltaX * 0.01;

cube.rotation.x += deltaY * 0.01;

previousMousePosition.x = event.touches[0].clientX;

previousMousePosition.y = event.touches[0].clientY;

}

// 動畫循環

function animate() {

requestAnimationFrame(animate); // 請求瀏覽器在下一個畫面重繪時呼叫 animate 函式

// 如果沒有拖曳，讓立方體自動旋轉 (邊緣會跟隨)

if (!isDragging) {

cube.rotation.x += 0.005;

cube.rotation.y += 0.005;

}

renderer.render(scene, camera); // 渲染場景

}

// 頁面載入完成後初始化並開始動畫

window.onload = function() {

init();

animate();

};

</script>

</body>

</html>



]]> 2025-07-01 03:52:46 UTC https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506784198 科普知識選擇題遊戲 https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506784344 科普知識選擇題遊戲]]> 2025-07-01 03:52:57 UTC https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506784344 https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506784575 <!DOCTYPE html>

<html lang="zh-Hant">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>互動式透明保留邊3D立方體動畫</title>

<!-- 引入 Tailwind CSS -->

<script src="https://cdn.tailwindcss.com"></script>

<!-- 引入 Three.js 函式庫 -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>

<style>

/* 設定 body 和 html 為全高，以便於內容居中 */

html, body {

margin: 0;

padding: 0;

height: 100%;

overflow: hidden; /* 防止滾動條 */

font-family: "Inter", sans-serif; /* 使用 Inter 字體 */

}

/* Canvas 樣式，使其填滿容器並居中 */

canvas {

display: block; /* 移除 canvas 下方的額外空間 */

margin: auto; /* 水平居中 */

background-color: #f0f0f0; /* 輕微的背景色 */

border-radius: 1rem; /* 圓角 */

box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* 陰影效果 */

}

</style>

</head>

<body class="bg-gradient-to-br from-blue-100 to-purple-200 flex items-center justify-center min-h-screen p-4">

<div class="relative w-full max-w-4xl h-full max-h-[80vh] flex flex-col items-center justify-center bg-white rounded-2xl shadow-xl p-6">

<h1 class="text-3xl md:text-4xl font-bold text-gray-800 mb-6 text-center">互動式透明保留邊3D立方體</h1>

<div id="canvas-container" class="w-full h-full flex items-center justify-center">

<!-- Three.js 渲染的 canvas 將會被添加到這裡 -->

</div>

<p class="mt-6 text-gray-600 text-center text-sm md:text-base">

請點擊並拖曳滑鼠來旋轉透明且保留邊的立方體。

</p>

</div>

<script type="module">

// 引入 Three.js 核心物件

import * as THREE from 'https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.module.js';

let scene, camera, renderer, cube, edges; // 新增 edges 變數

let isDragging = false;

let previousMousePosition = {

x: 0,

y: 0

};

// 初始化場景、攝影機和渲染器

function init() {

// 取得容器元素

const container = document.getElementById('canvas-container');

// 建立場景

scene = new THREE.Scene();

// 建立攝影機

// PerspectiveCamera(視野角度, 長寬比, 近裁剪面, 遠裁剪面)

camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000);

camera.position.z = 5; // 將攝影機向後移動，以便看到立方體

// 建立渲染器

renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); // 啟用抗鋸齒和透明背景

renderer.setSize(container.clientWidth, container.clientHeight); // 設定渲染器大小為容器大小

container.appendChild(renderer.domElement); // 將渲染器的 DOM 元素添加到容器中

// 建立立方體幾何體

const geometry = new THREE.BoxGeometry(2, 2, 2); // 建立一個邊長為2的立方體幾何體

// 建立透明材質

const material = new THREE.MeshBasicMaterial({

color: 0x4299e1, // 稍微改變顏色，使其在透明時更明顯

transparent: true, // 啟用透明度

opacity: 0.3, // 設定透明度，使其更透明一些

wireframe: false,

side: THREE.DoubleSide // 渲染兩面，以確保從內部也能看到

});

cube = new THREE.Mesh(geometry, material); // 建立網格物件 (幾何體 + 材質)

scene.add(cube); // 將立方體添加到場景中

// 建立邊緣幾何體

const edgesGeometry = new THREE.EdgesGeometry(geometry); // 從立方體幾何體建立邊緣幾何體

// 建立邊緣材質 (黑色線條)

const edgesMaterial = new THREE.LineBasicMaterial({ color: 0x000000, linewidth: 2 }); // 黑色線條，設定線寬

edges = new THREE.LineSegments(edgesGeometry, edgesMaterial); // 建立線段物件

cube.add(edges); // 將邊緣作為立方體的子物件，這樣它們會一起旋轉

// 加入光源 (即使是透明物體，光源也能影響其陰影或反射，儘管 MeshBasicMaterial 不受光照影響)

const ambientLight = new THREE.AmbientLight(0x404040); // 環境光

scene.add(ambientLight);

const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5); // 方向光

directionalLight.position.set(1, 1, 1).normalize();

scene.add(directionalLight);

// 處理視窗大小改變

window.addEventListener('resize', onWindowResize, false);

onWindowResize(); // 初始設定一次

// 添加滑鼠事件監聽器

renderer.domElement.addEventListener('mousedown', onMouseDown, false);

renderer.domElement.addEventListener('mouseup', onMouseUp, false);

renderer.domElement.addEventListener('mousemove', onMouseMove, false);

renderer.domElement.addEventListener('touchstart', onTouchStart, false);

renderer.domElement.addEventListener('touchend', onTouchEnd, false);

renderer.domElement.addEventListener('touchmove', onTouchMove, false);

}

// 處理視窗大小改變的函式

function onWindowResize() {

const container = document.getElementById('canvas-container');

camera.aspect = container.clientWidth / container.clientHeight; // 更新攝影機的長寬比

camera.updateProjectionMatrix(); // 更新攝影機的投影矩陣

renderer.setSize(container.clientWidth, container.clientHeight); // 更新渲染器大小

}

// 滑鼠按下事件

function onMouseDown(event) {

isDragging = true;

previousMousePosition.x = event.clientX;

previousMousePosition.y = event.clientY;

}

// 滑鼠放開事件

function onMouseUp(event) {

isDragging = false;

}

// 滑鼠移動事件

function onMouseMove(event) {

if (!isDragging) return;

const deltaX = event.clientX - previousMousePosition.x;

const deltaY = event.clientY - previousMousePosition.y;

// 根據滑鼠移動量旋轉立方體 (邊緣會跟隨)

cube.rotation.y += deltaX * 0.01;

cube.rotation.x += deltaY * 0.01;

previousMousePosition.x = event.clientX;

previousMousePosition.y = event.clientY;

}

// 觸控開始事件

function onTouchStart(event) {

if (event.touches.length === 1) {

isDragging = true;

previousMousePosition.x = event.touches[0].clientX;

previousMousePosition.y = event.touches[0].clientY;

}

}

// 觸控結束事件

function onTouchEnd(event) {

isDragging = false;

}

// 觸控移動事件

function onTouchMove(event) {

if (!isDragging || event.touches.length !== 1) return;

const deltaX = event.touches[0].clientX - previousMousePosition.x;

const deltaY = event.touches[0].clientY - previousMousePosition.y;

cube.rotation.y += deltaX * 0.01;

cube.rotation.x += deltaY * 0.01;

previousMousePosition.x = event.touches[0].clientX;

previousMousePosition.y = event.touches[0].clientY;

}

// 動畫循環

function animate() {

requestAnimationFrame(animate); // 請求瀏覽器在下一個畫面重繪時呼叫 animate 函式

// 如果沒有拖曳，讓立方體自動旋轉 (邊緣會跟隨)

if (!isDragging) {

cube.rotation.x += 0.005;

cube.rotation.y += 0.005;

}

renderer.render(scene, camera); // 渲染場景

}

// 頁面載入完成後初始化並開始動畫

window.onload = function() {

init();

animate();

};

</script>

</body>

</html>


]]> 2025-07-01 03:53:09 UTC https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506784575 「的」與「得」大挑戰 https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506789371 2025-07-01 03:58:03 UTC https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506789371 新北市美術教師甄試 https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506791250 2025-07-01 04:00:09 UTC https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506791250 宇宙的神祕代碼 https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506792593 2025-07-01 04:01:42 UTC https://padlet.com/appsntpc/omaeejsp2z02v6i9/wish/3506792593