A-Frame & HTML Building Test1

-

 For my interactive project "Art Echoes", I decided to build a simple guiding page first. The purpose of this page is to attract the audience's attention with a short video and music, and then guide the users into the next stage of the 3D experience.

  • I implemented the following functions using HTML:
  • Auto-play video (intro-animation)
  • The "Click to Enter" button will be displayed automatically after the video ends
  • Click the button and jump to the A-Frame page
  • Background music control button (Play/Pause)
  • The implementation of the code function goes very smoothly. After the video
playback ends, the buttons fade in, and the control in combination with the background music is also very intuitive. Although this page is simple, it builds a complete entry point for subsequent WebXR projects.




Comments

Post a Comment

Popular posts from this blog

Creating a Portal System with Player Collision in Unity

-
Image
It all started when I randomly thought: Wouldn’t it be cool if I could make a scene where I walk through a portal into another world? Like literally, walk into one space and boom — you're somewhere completely different. I immediately thought of the game Portal , which has those awesome sci-fi doors you can go through and see what’s on the other side. So, that was my goal. Starting with What I Know: Modeling in C4D Since I’m already familiar with Cinema 4D , I figured I’d build the portal frame and some basic scene geometry there. Way faster than modeling inside Unity, and I could be more creative with the shapes. Once I had the basic portal built in C4D, I exported the models as and imported them into Unity. Luckily, that part was pretty smooth (just make sure your scale settings aren’t messed up!). .fbx YouTube to the Rescue 🎥 Then I thought, Has someone done this before in Unity? (Spoiler: of course they have). I searched YouTube and found a super helpful video: 👉 ...
Read more

Three Types of Scene Project

-
Image
  After finishing my working portal with the smooth camera-following shader (yay!), I realized I still needed to build simpler prototype versions for my teacher — something quick and light to show how scene transitions could work, especially for computers that might not handle 3D and shaders well. So I made three different versions of scene switching, from super basic to silky smooth: Version 1: Boring Button Click (2D Image) This was the absolute easiest — I just: Made a simple UI button in Unity. Used on . SceneManager.LoadScene() OnClick() Put a 2D image background behind it. Not much interaction, but it gets the point across. You click → it loads a new scene. Honestly… kinda boring 😅 But it works, and it’s super light on performance — good for basic demonstrations or weaker computers. Version 2: Player Touches a Door → Transition This one was already more fun: Built a 3D door model in C4D and brought it into Unity. Placed a trigger collider in ...
Read more

Research concept

-
  Art Rescue Across Time: Preserving Classic Art Through Interactive Gaming​ Research Question： How can a game be designed so that players can experience the unique art styles and cultural backgrounds of different countries and periods while rescuing disappearing classic art pieces?​ How can interactive gaming effectively raise awareness and appreciation for art preservation and cultural heritage?​ What is the educational and cognitive impact of art display and interaction design within the game on players?​ Research Objectives： Game Design and Development: Develop a game where players need to search for and protect disappearing classic art pieces in various artistic settings. Art and Cultural Exhibition: Showcase classic art styles and cultural backgrounds from different countries and periods through various levels in the game, including but not limited to Ancient Egypt, Japanese Ukiyo-e, European Renaissance, and other representative art periods. Player Experience and Feedback: E...
Read more