Interactive Room - Three.js Scene

I am a web front-end engineer who has just joined the Three.js family. I particularly enjoy using Three.js to create various interesting 3D pages. Therefore, after a period of learning and mastering some Three.js techniques, I have decided to create a personalized 3D page.

Using Blender for modeling and baking UV maps, importing with gltf loader

Welcome to visit

嘿 - 创客界的一根葱 - 个人分享网站 (ckjdygc.cc)

Page preview

My English is not good, all the text was translated through translation software, there may be some grammar errors, please understand!

5 Likes

That’s okay. Your previous version of this topic where rejected because they were not in English. Please keep in mind that only posts in English are accepted.

1 Like

Thank you for understanding. I just joined the forum and haven’t fully understood the rules yet. I will definitely pay attention in the future.

Another thing: Please avoid to add posts like “Thanks for sharing” or “Nice work” at other topics. I know you mean well but if you do so you bump the topic which means everyone who has participated in the topic gets notified for nothing. If you like content, just click on the heart icon below a post.

3 Likes

It looks nice. Congratulations.

By trial and error I found that I can go close to the computer and operate the touch screen. As the text is in Chinese, I was not able to enjoy all the features. It looks like there is a portfolio in there, but this is just a guess.

From graphical point of view there are some minor issues:

  • the model reveals its backstage for some screen proportions (see the left side):

  • light is leaking between the wall and the window frame:
    image

  • I’m not sure what does “hei” mean, is it something like “hi” or “hey”?
    image

  • I don’t know how, but at some point everything disappeared, except for the computer screen and the smartphone screen. I was not able to reproduce this, so it might be something with my machine.

1 Like

Thank you, and I’m also sorry to inform you that my website has more users from within China, so I didn’t provide you with a good browsing experience.

I may need to use translation software to communicate with you. Please understand that sometimes there may be grammar and wording problems.

You observed very carefully, and I can answer:

  1. You have found that you can see the environment that should have been hidden behind the wall by moving your perspective. This is actually intentionally reserved. When writing the class for moving the perspective, I added the option to hold down the shift or ctrl key on the keyboard to move the center of the scene. This should have been debug mode, but I kept it in formal mode. It may be removed later.

  2. I checked the edges of the model window and there was indeed a slight light leak. This should be because I had a problem baking UV in Blender. Thank you for helping me find this problem.

  3. The title of my website is “hei, 创客界的一根葱”. “hei” means “hey”. I want to treat everyone as friends. The last few words are my nickname. The direct translation is that I am an onion in the maker world, that is, an inconspicuous little person in the maker field.

  4. A black screen may appear when you open the page on different devices. This is because the baked textures are not read correctly. I guess it may be a network reason. The server I deployed is in China, and access from other countries may be slow or fail. For example, when I visit the forum now, I need to turn on the network proxy, otherwise it will load very slowly. This is also a headache for me. I will see if I can deploy a suitable DNS later, which may be better.

There may be other issues with my website, and I will continue to look for and resolve them.
Thanks again for your issues.

1 Like