Scribd
Upload
7 views15 pages

Chapters and Resouces

The document outlines a tutorial series on creating a 3D environment using Blender and three.js, covering topics such as modeling a medieval house, creating landscapes, baking textures, setting up collision meshes, and creating a player character. Each chapter includes resources for further learning and practical applications. The final chapter is unfinished but suggests converting HDRI into a skybox and enabling user interactions.

Uploaded by

Sergio Pérez
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
7 views15 pages

Chapters and Resouces

The document outlines a tutorial series on creating a 3D environment using Blender and three.js, covering topics such as modeling a medieval house, creating landscapes, baking textures, setting up collision meshes, and creating a player character. Each chapter includes resources for further learning and practical applications. The final chapter is unfinished but suggests converting HDRI into a skybox and enabling user interactions.

Uploaded by

Sergio Pérez
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 15

[START] Chapter 1 - Build house

● Model a small medieval


house
● Set up HDRI Lighting
● Texturing with image
textures/PBR materials
● UV unwrapping
[END] Chapter 1 - Go Further
● We learned:
○ PBR materials/image textures
○ HDRI lighting
○ Modeling a house
○ UV unwrapping
● Texturing/Lighting Resources:
○ https://polyhaven.com/
○ https://ambientcg.com/
○ https://www.textures.com/library
○ https://www.poliigon.com/textures/free
○ https://quixel.com/megascans/home?category=surface
● Amazing modelers/videos on texturing:
○ https://www.youtube.com/c/sketchinginblender/videos
○ https://www.youtube.com/watch?v=0ZxWeMjxQug
○ https://youtu.be/vHCiSxZCz-c
○ https://www.youtube.com/watch?v=jnzhNdWoXMg&t=2s
○ Substance Painter/Designer (texturing software)
[START] Chapter 2 - Create Landscape
● Texture painting a gravel path
● Sculpting basics
● More texturing
○ Color variations
○ Combine image textures
[End] Chapter 2 - Go Further
● We learned:
○ Texture painting a gravel path
○ Sculpting basics
○ More texturing
● More Resources:
○ https://www.youtube.com/watch?v=Mh6ttfUZNYw
○ https://www.youtube.com/watch?v=CfmJdZXt3O0&t=1983s
○ https://youtu.be/91UDQnrZMqA
[START] Chapter 3 - Baking
● Create a second scene (basic interior for house)
● More UV concepts
● Baking Image Textures (Diffuse/color and normals) that we can use in three.js
(or other 3D software/game engines)
[END] Chapter 3
● More Resources:
○ https://www.youtube.com/results?search_query=advanced+uv+unwrapping
○ https://www.youtube.com/results?search_query=baking+normal+maps
○ https://threejs.org/examples/?q=displa#webgl_materials_displacementmap
● Recap:
○ If you have black baked textures or different textures than what it should be, check these things:
■ You probably have an extra face
■ Something blocking the light was hidden but still showed up in renders
■ Your face orientation was not blue
■ You forgot to unwrap again after making changes to the model
[START] Chapter 4 - Collision Mesh

● Set up colliders with Blender for collision detection


● Set up “items” that we can interact with (e.g. trigger next
scene, read more)
● Export everything
[END] Chapter 4
● https://threejs.org/examples/?q=game#games_fps
● https://www.awwwards.com/coastal-world-by-merci-michel-wins-site-of-the-month-august-2022.html
[START] Chapter 5 - Setting up project

● Set Up Project
● Previous video explanation
○ https://youtu.be/rxTb9ys834w?t=6028
[END] Chapter 5 - Setting up project

● Finished setting up project


● Check the commit here:
● https://github.com/andrewwoan/immersive-world/commit/eae
a8832134c073a09409c7e4d70e41682abcd7a
[START] Chapter 6 - Setting up our assets

● Generated octree and set up assets


[END] Chapter 6 - Setting up our assets

● Generated octree and set up assets


● Github push with new assets:
○ https://github.com/andrewwoan/immersive-world/tree/2e2
a641acad35c91155a40a62d487901bf37d057
[START] Chapter 7 - Creating Player

● Create player that can walk and look around scene


[END] Chapter 7 - Creating Player

● Created player that can walk and look around scene


● Play around with settings
● Repo:
○ https://github.com/andrewwoan/immersive-world/tree/8f1
eaf955938be829a5ea64c0f0d6673f6dffcaf
[UNFINISHED] Chapter 8 - Interactions and Skybox

● Convert HDRI into skybox/cubemap


● Allow user to interact with objects, trigger reloads and
interface components

THIS chapter is incomplete, but still contains things you can do


for your own three.js projects

You might also like