Skip to content

Commit 3df841b

Browse files
d3p1d3p1
committed
feat: add lesson number 51 [#1]
1 parent 36e8409 commit 3df841b

File tree

14 files changed

+410
-272
lines changed

14 files changed

+410
-272
lines changed

‎docs/assets/index-eb9SjACr.js ‎docs/assets/index-BelXcSrF.js

+270-270
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/assets/index-BelXcSrF.js.map

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/assets/index-eb9SjACr.js.map

-1
This file was deleted.

‎docs/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
<meta charset="UTF-8" />
1111
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
1212
<title>Three.js</title>
13-
<script type="module" crossorigin src="/three.js-journey/assets/index-eb9SjACr.js"></script>
13+
<script type="module" crossorigin src="/three.js-journey/assets/index-BelXcSrF.js"></script>
1414
<link rel="stylesheet" crossorigin href="/three.js-journey/assets/index-pRugQDwy.css">
1515
</head>
1616
<body>

‎docs/media/images/textures/CustomPortal/color.jpg

672 KB
Loading

‎docs/media/images/textures/LessonPortal/color.jpg

826 KB
Loading

‎docs/media/models/CustomPortal/portal.glb

12.2 KB
Binary file not shown.

‎docs/media/models/LessonPortal/portal.glb

40.1 KB
Binary file not shown.

‎public/media/images/textures/CustomPortal/color.jpg

672 KB
Loading

‎public/media/images/textures/LessonPortal/color.jpg

826 KB
Loading

‎public/media/models/CustomPortal/portal.glb

12.2 KB
Binary file not shown.

‎public/media/models/LessonPortal/portal.glb

40.1 KB
Binary file not shown.

‎src/index.html

+2
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,7 @@ <h2 class="controls__commands-title">[COMMANDS]</h2>
7575
import Lesson46 from './js/lesson/46/lesson.js'
7676
import Lesson47 from './js/lesson/47/lesson.js'
7777
import Lesson48 from './js/lesson/48/lesson.js'
78+
import Lesson51 from './js/lesson/51/lesson.js'
7879

7980
const lessons = [
8081
new Lesson03(),
@@ -122,6 +123,7 @@ <h2 class="controls__commands-title">[COMMANDS]</h2>
122123
new Lesson46(),
123124
new Lesson47(),
124125
new Lesson48(),
126+
new Lesson51()
125127
]
126128

127129
const boot = new Bootstrap(lessons.reverse(), '.lesson-title', '.controls__arrow--left', '.controls__arrow--right')

‎src/js/lesson/51/lesson.js

+136
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
/**
2+
* @description 51 lesson class
3+
* @author C. M. de Picciotto <d3p1@d3p1.dev> (https://d3p1.dev/)
4+
* {@link https://threejs-journey.com/lessons/importing-and-optimizing-the-scene}
5+
*/
6+
import * as THREE from 'three'
7+
import {GLTFLoader} from 'three/addons/loaders/GLTFLoader.js'
8+
import {DRACOLoader} from 'three/addons/loaders/DRACOLoader.js'
9+
import GeneralLesson from '../../core/lesson/general-lesson.js'
10+
11+
export default class Lesson extends GeneralLesson {
12+
/**
13+
* @type {THREE.Mesh}
14+
*/
15+
model
16+
17+
/**
18+
* @type {boolean}
19+
*/
20+
hasGuiTweaks = false
21+
22+
/**
23+
* @type {boolean}
24+
*/
25+
hasAnimation = true
26+
27+
/**
28+
* Get lesson number
29+
*
30+
* @returns {string}
31+
*/
32+
get number() {
33+
return '51'
34+
}
35+
36+
/**
37+
* Get lesson title
38+
*
39+
* @returns {string}
40+
*/
41+
get title() {
42+
return 'Importing and optimizing the scene'
43+
}
44+
45+
/**
46+
* Get lesson link
47+
*
48+
* @returns {string}
49+
*/
50+
get link() {
51+
return 'https://threejs-journey.com/lessons/importing-and-optimizing-the-scene'
52+
}
53+
54+
/**
55+
* Update lesson
56+
*
57+
* @returns {void}
58+
*/
59+
update() {
60+
this.control.update()
61+
}
62+
63+
/**
64+
* Init lesson
65+
*
66+
* @returns {void}
67+
*/
68+
init() {
69+
super.init()
70+
71+
this.#initModel()
72+
this.#setupCamera()
73+
}
74+
75+
/**
76+
* Init model
77+
*
78+
* @returns {void}
79+
*/
80+
#initModel() {
81+
const textureLoader = new THREE.TextureLoader()
82+
const gltfLoader = new GLTFLoader()
83+
const dracoLoader = new DRACOLoader()
84+
dracoLoader.setDecoderPath('/three.js-journey/js/utils/loader/draco/')
85+
gltfLoader.setDRACOLoader(dracoLoader)
86+
87+
const color = textureLoader.load(
88+
'/three.js-journey/media/images/textures/LessonPortal/color.jpg',
89+
)
90+
color.flipY = false
91+
color.colorSpace = THREE.SRGBColorSpace
92+
93+
const baseMaterial = new THREE.MeshBasicMaterial({
94+
map: color,
95+
})
96+
const portalLightMaterial = new THREE.MeshBasicMaterial({color: 0xffffff})
97+
const poleLightMaterial = new THREE.MeshBasicMaterial({color: 0xffffe5})
98+
99+
gltfLoader.load(
100+
'/three.js-journey/media/models/LessonPortal/portal.glb',
101+
(model) => {
102+
this.model = model.scene
103+
this.model.traverse((child) => {
104+
if (child.isMesh) {
105+
switch (child.name) {
106+
case 'poleLightA':
107+
case 'poleLightB':
108+
child.material = poleLightMaterial
109+
break
110+
111+
case 'portalLight':
112+
child.material = portalLightMaterial
113+
break
114+
115+
default:
116+
child.material = baseMaterial
117+
}
118+
}
119+
})
120+
121+
this.scene.add(model.scene)
122+
},
123+
)
124+
}
125+
126+
/**
127+
* Setup camera
128+
*
129+
* @returns {void}
130+
*/
131+
#setupCamera() {
132+
this.camera.position.set(4, 2, 4)
133+
this.camera.fov = 45
134+
this.camera.updateProjectionMatrix()
135+
}
136+
}

0 commit comments

Comments
 (0)