A-Frame Building Result

-

After completing the initial video navigation prototype, I felt optimistic about continuing development with A-Frame. The framework advertises itself as beginner-friendly, and it truly was—at first. However, as I began to integrate real 3D models and interactive logic into the system, a series of frustrating technical problems emerged that completely changed my opinion.

Cross-Origin Resource Sharing (CORS) Issues

One of the biggest challenges was related to CORS (Cross-Origin Resource Sharing). When I tried to load my exported glTF models directly into the A-Frame scene using local file paths, the browser consistently failed to render the models. The developer console displayed errors like:

This problem occurred because most modern browsers restrict access to local files from a webpage opened using the file:// protocol, which has a null origin. As a result, any attempt to load assets—especially large external .gltf models—was blocked outright.




Attempted Workarounds

To solve this, I tried several different approaches:

  • Switching browsers: Chrome, Edge, and Firefox all showed the same restrictions.

  • Attempting to disable browser security: Unsafe and not viable for production.

  • Running a local server: I tried Python’s http.server, and the Live Server extension in VS Code. These worked partially but did not resolve all issues.

  • Testing on localhost: Required additional configuration and didn't resolve material loading errors.

Ultimately, I learned that you cannot rely on direct file-based viewing (file://) for 3D model rendering in web environments—a proper local server setup is mandatory, which is not beginner-friendly.

Models Not Rendering Properly or Showing Up as White

Even after setting up a local server and successfully referencing the models, they often failed to render as expected. In some cases, the models were invisible; in others, they appeared completely white and textureless. Several potential causes came to light:

  1. Material Incompatibility
    I exported my models from Cinema 4D using Octane or Physical shaders. These are not natively supported by Three.js or A-Frame, which led to materials either breaking or not appearing at all.

  2. Incorrect Lighting Setup
    A-Frame scenes need specific <a-light> entities. Without proper lighting, models might appear black, white, or transparent due to lighting calculations failing.

  3. Model Origin or Scaling Errors
    Some models were not centered correctly when imported. They would float above or fall below the scene, rendering them invisible from the camera’s viewpoint.

  4. Large File Size and Slow Loading
    Heavy glTF files slowed down or even failed during browser rendering, causing partial or broken displays without warning.

These rendering issues significantly reduced my ability to make quick iterations and test changes, increasing the development time considerably.

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