Skip to content

Commit ae5293a

Browse files
mkeblxmkeblx
committed
Fix script tag position
1 parent d350444 commit ae5293a

File tree

6 files changed

+128
-127
lines changed

6 files changed

+128
-127
lines changed

‎autorotate.html

Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -53,22 +53,23 @@ <h2>JavaScript:</h2>
5353
src="./teapot-fallback-black.jpg"
5454
alt="An image of a model of a teapot" />
5555
</model>
56-
</body>
57-
<script type="module">
58-
let initialTransform;
59-
const model = document.querySelector('model');
60-
await model.ready;
61-
initialTransform = model.entityTransform.translate(0, 0, -0.05);
62-
requestAnimationFrame(update);
6356

64-
function update() {
65-
try {
66-
const angleY = performance.now() / 10;
67-
model.entityTransform = initialTransform.rotate(0, angleY, 0);
68-
} catch (error) {
69-
console.warn('failed to set transform', error);
70-
}
57+
<script type="module">
58+
let initialTransform;
59+
const model = document.querySelector('model');
60+
await model.ready;
61+
initialTransform = model.entityTransform.translate(0, 0, -0.05);
7162
requestAnimationFrame(update);
72-
}
73-
</script>
63+
64+
function update() {
65+
try {
66+
const angleY = performance.now() / 10;
67+
model.entityTransform = initialTransform.rotate(0, angleY, 0);
68+
} catch (error) {
69+
console.warn('failed to set transform', error);
70+
}
71+
requestAnimationFrame(update);
72+
}
73+
</script>
74+
</body>
7475
</html>

‎basic-blob-url.html

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -35,13 +35,13 @@ <h2>JavaScript</h2>
3535
src="./teapot-fallback-black.jpg"
3636
alt="An image of a model of a teapot" />
3737
</model>
38-
</body>
3938

40-
<script type="module">
41-
const model = document.querySelector('model');
42-
const { src, type } = model.dataset;
43-
const bytes = await (await fetch(src)).bytes();
44-
const srcString = URL.createObjectURL(new Blob([bytes], { type }));
45-
model.setAttribute('src', srcString);
46-
</script>
39+
<script type="module">
40+
const model = document.querySelector('model');
41+
const { src, type } = model.dataset;
42+
const bytes = await (await fetch(src)).bytes();
43+
const srcString = URL.createObjectURL(new Blob([bytes], { type }));
44+
model.setAttribute('src', srcString);
45+
</script>
46+
</body>
4747
</html>

‎boundingbox.html

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -26,20 +26,20 @@ <h1>Model: Bounding-box information</h1>
2626
<br />
2727
<h2>Report:</h2>
2828
<div id="log"></div>
29-
</body>
3029

31-
<script type="module">
32-
function writePoint(pt) {
33-
return `x: ${pt.x}, y: ${pt.y}, z: ${pt.z}`;
34-
}
30+
<script type="module">
31+
function writePoint(pt) {
32+
return `x: ${pt.x}, y: ${pt.y}, z: ${pt.z}`;
33+
}
3534

36-
const model = document.querySelector('model');
37-
await model.ready;
35+
const model = document.querySelector('model');
36+
await model.ready;
3837

39-
const log = document.getElementById('log');
40-
log.innerHTML = `bounding box center: ${writePoint(
41-
model.boundingBoxCenter
42-
)} <br/>
43-
bounding box extents: ${writePoint(model.boundingBoxExtents)}`;
44-
</script>
38+
const log = document.getElementById('log');
39+
log.innerHTML = `bounding box center: ${writePoint(
40+
model.boundingBoxCenter
41+
)} <br/>
42+
bounding box extents: ${writePoint(model.boundingBoxExtents)}`;
43+
</script>
44+
</body>
4545
</html>

‎currenttime.html

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -28,14 +28,14 @@ <h2>JavaScript</h2>
2828
Current time:
2929
<span id="timelabel"></span>
3030
<input type="range" min="0" max="1" value="0" step="0.02" id="time" />
31-
</body>
3231

33-
<script type="module">
34-
const model = document.querySelector('model');
35-
await model.ready;
36-
time.addEventListener('input', (e) => {
37-
timelabel.innerHTML = (time.value * model.duration).toFixed(1) + 's';
38-
model.currentTime = time.value * model.duration;
39-
});
40-
</script>
32+
<script type="module">
33+
const model = document.querySelector('model');
34+
await model.ready;
35+
time.addEventListener('input', (e) => {
36+
timelabel.innerHTML = (time.value * model.duration).toFixed(1) + 's';
37+
model.currentTime = time.value * model.duration;
38+
});
39+
</script>
40+
</body>
4141
</html>

‎jsorbit.html

Lines changed: 70 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -24,89 +24,89 @@ <h2>Result</h2>
2424
alt="An image of a model of a teapot" />
2525
</model>
2626
<div id="log"></div>
27-
</body>
2827

29-
<script type="module">
30-
let startDragX, startDragY, omegaX, omegaY;
28+
<script type="module">
29+
let startDragX, startDragY, omegaX, omegaY;
3130

32-
const VERTICAL_DRAG_FACTOR = 7;
33-
const HORIZONTAL_DRAG_FACTOR = 5;
34-
const VERTICAL_RELEASE_DECAY = 0.9;
35-
const HORIZONTAL_RELEASE_DECAY = 0.94;
36-
const INPUT_SMOOTH_FACTOR = 0.85;
31+
const VERTICAL_DRAG_FACTOR = 7;
32+
const HORIZONTAL_DRAG_FACTOR = 5;
33+
const VERTICAL_RELEASE_DECAY = 0.9;
34+
const HORIZONTAL_RELEASE_DECAY = 0.94;
35+
const INPUT_SMOOTH_FACTOR = 0.85;
3736

38-
let dx = 0;
39-
let dy = 0;
40-
let smoothDX = 0;
41-
let smoothDY = 0;
42-
let prevX = 0;
43-
let curX = 0;
44-
let vX = 0;
45-
let errors = {};
37+
let dx = 0;
38+
let dy = 0;
39+
let smoothDX = 0;
40+
let smoothDY = 0;
41+
let prevX = 0;
42+
let curX = 0;
43+
let vX = 0;
44+
let errors = {};
4645

47-
let pointerDown = false;
48-
let initialXfo;
46+
let pointerDown = false;
47+
let initialXfo;
4948

50-
function tick() {
51-
requestAnimationFrame(tick);
52-
try {
53-
if (!pointerDown) {
54-
dy *= VERTICAL_RELEASE_DECAY;
55-
vX *= HORIZONTAL_RELEASE_DECAY;
56-
dx += vX;
57-
}
49+
function tick() {
50+
requestAnimationFrame(tick);
51+
try {
52+
if (!pointerDown) {
53+
dy *= VERTICAL_RELEASE_DECAY;
54+
vX *= HORIZONTAL_RELEASE_DECAY;
55+
dx += vX;
56+
}
5857

59-
smoothDX =
60-
(1 - INPUT_SMOOTH_FACTOR) * dx + INPUT_SMOOTH_FACTOR * smoothDX;
61-
smoothDY =
62-
(1 - INPUT_SMOOTH_FACTOR) * dy + INPUT_SMOOTH_FACTOR * smoothDY;
58+
smoothDX =
59+
(1 - INPUT_SMOOTH_FACTOR) * dx + INPUT_SMOOTH_FACTOR * smoothDX;
60+
smoothDY =
61+
(1 - INPUT_SMOOTH_FACTOR) * dy + INPUT_SMOOTH_FACTOR * smoothDY;
6362

64-
model.entityTransform = initialXfo
65-
.rotate(smoothDY / VERTICAL_DRAG_FACTOR, 0, 0)
66-
.rotate(0, smoothDX / HORIZONTAL_DRAG_FACTOR, 0);
67-
} catch (err) {
68-
errors[err.message] = errors[err.message] || 0;
69-
errors[err.message]++;
70-
log.innerText =
71-
'errors:' +
72-
Object.keys(errors)
73-
.map((type) => type + ':' + errors[type])
74-
.join('<br>');
63+
model.entityTransform = initialXfo
64+
.rotate(smoothDY / VERTICAL_DRAG_FACTOR, 0, 0)
65+
.rotate(0, smoothDX / HORIZONTAL_DRAG_FACTOR, 0);
66+
} catch (err) {
67+
errors[err.message] = errors[err.message] || 0;
68+
errors[err.message]++;
69+
log.innerText =
70+
'errors:' +
71+
Object.keys(errors)
72+
.map((type) => type + ':' + errors[type])
73+
.join('<br>');
74+
}
7575
}
76-
}
7776

78-
const model = document.querySelector('model');
77+
const model = document.querySelector('model');
7978

80-
await model.ready;
81-
initialXfo = model.entityTransform;
79+
await model.ready;
80+
initialXfo = model.entityTransform;
8281

83-
model.addEventListener('touchstart', (e) => {
84-
e.preventDefault();
85-
e.stopImmediatePropagation();
86-
document.body.classList.add('noscroll');
87-
});
82+
model.addEventListener('touchstart', (e) => {
83+
e.preventDefault();
84+
e.stopImmediatePropagation();
85+
document.body.classList.add('noscroll');
86+
});
8887

89-
model.addEventListener('pointerdown', (e) => {
90-
pointerDown = true;
91-
startDragX = e.clientX - dx;
92-
startDragY = e.clientY;
93-
vX = 0;
94-
});
88+
model.addEventListener('pointerdown', (e) => {
89+
pointerDown = true;
90+
startDragX = e.clientX - dx;
91+
startDragY = e.clientY;
92+
vX = 0;
93+
});
9594

96-
window.addEventListener('pointermove', (e) => {
97-
if (pointerDown) {
98-
dx = e.clientX - startDragX;
99-
dy = e.clientY - startDragY;
100-
prevX = curX;
101-
curX = e.clientX;
102-
}
103-
});
95+
window.addEventListener('pointermove', (e) => {
96+
if (pointerDown) {
97+
dx = e.clientX - startDragX;
98+
dy = e.clientY - startDragY;
99+
prevX = curX;
100+
curX = e.clientX;
101+
}
102+
});
104103

105-
window.addEventListener('pointerup', (e) => {
106-
pointerDown = false;
107-
vX = curX - prevX;
108-
});
104+
window.addEventListener('pointerup', (e) => {
105+
pointerDown = false;
106+
vX = curX - prevX;
107+
});
109108

110-
requestAnimationFrame(tick);
111-
</script>
109+
requestAnimationFrame(tick);
110+
</script>
111+
</body>
112112
</html>

‎playbackrate.html

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -30,16 +30,16 @@ <h2>JavaScript</h2>
3030
Playback rate:
3131
<span id="ratelabel"></span>
3232
<input type="range" min="0" max="2" value="1" step="0.1" id="rate" />
33-
</body>
3433

35-
<script type="module">
36-
const model = document.querySelector('model');
37-
await model.ready;
38-
model.playbackRate = 1;
39-
rate.addEventListener('input', (e) => {
40-
var rateSq = Math.pow(rate.value, 2);
41-
ratelabel.innerHTML = (rateSq * 100).toFixed() + '%';
42-
model.playbackRate = rateSq;
43-
});
44-
</script>
34+
<script type="module">
35+
const model = document.querySelector('model');
36+
await model.ready;
37+
model.playbackRate = 1;
38+
rate.addEventListener('input', (e) => {
39+
var rateSq = Math.pow(rate.value, 2);
40+
ratelabel.innerHTML = (rateSq * 100).toFixed() + '%';
41+
model.playbackRate = rateSq;
42+
});
43+
</script>
44+
</body>
4545
</html>

0 commit comments

Comments
 (0)