Platform
Resources
Pricing
Sign in
Get started
Christophe Yamahata
Workspace
Fork
Public
3D (three.js, Sketchfab)
By
Christophe Yamahata
Edited
Feb 18
Paused
Fork of
Embedding 3D models using three.js
1 star
13
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
{
while
(
true
)
{
renderer
.
render
(
scene
,
camera
)
;
yield
null
;
}
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
disabled_B
=
animation_loop
||
position
==
"A"
?
"disabled"
:
""
Insert cell
viewof
BKG_color
=
Inputs
.
color
(
{
label
:
"Background color"
,
value
:
"#555b62"
}
)
Insert cell
viewof
Use_BKG_image
=
Inputs
.
toggle
(
{
label
:
"Use a texture background"
,
value
:
true
}
)
Insert cell
viewof
Metalness
=
Inputs
.
range
(
[
0
,
1
]
,
{
value
:
0.6
,
step
:
0.1
,
label
:
"Material metalness"
}
)
Insert cell
viewof
Roughness
=
Inputs
.
range
(
[
0
,
1
]
,
{
value
:
0.9
,
step
:
0.05
,
label
:
"Material roughness"
}
)
Insert cell
viewof
Environment_intensity
=
Inputs
.
range
(
[
0
,
1
]
,
{
value
:
0.5
,
step
:
0.1
,
label
:
"Environment intensity"
}
)
Insert cell
viewof
Model_color
=
Inputs
.
color
(
{
label
:
"Wireframe color / uniform color"
,
value
:
"#b9cdd4"
}
)
Insert cell
viewof
Wireframe
=
Inputs
.
toggle
(
{
label
:
"3D model as wireframe"
,
value
:
false
}
)
Insert cell
viewof
DisplayCubes
=
Inputs
.
toggle
(
{
label
:
htl
.
html
`Display cubes <br/>in <b>A</b> and <b>B</b>`
,
value
:
true
}
)
Insert cell
viewof
UniformColor
=
Inputs
.
toggle
(
{
label
:
"Uniform color"
,
value
:
false
}
)
Insert cell
viewof
Grid_color
=
Inputs
.
color
(
{
label
:
"Grid color"
,
value
:
"#d53040"
}
)
Insert cell
viewof
opacity
=
Inputs
.
range
(
[
0
,
1
]
,
{
value
:
0.6
,
step
:
0.1
,
label
:
"Grid opacity"
}
)
Insert cell
viewof
Display_grid
=
Inputs
.
toggle
(
{
label
:
"Grid display"
,
value
:
true
}
)
Insert cell
viewof
n
=
Inputs
.
radio
(
new
Map
(
[
[
"Very sow"
,
1000
]
,
[
"Slow"
,
500
]
,
[
"Medium"
,
200
]
,
[
"Fast"
,
100
]
,
[
"Very fast"
,
40
]
]
)
,
{
value
:
100
,
label
:
"Animation speed:"
}
)
Insert cell
viewof
animation_loop
=
Inputs
.
toggle
(
{
label
:
htl
.
html
`Looped animation? <i>(uncheck to modify values for <b>A</b> and <b>B</b>)</i>`
,
value
:
true
}
)
Insert cell
viewof
position
=
Inputs
.
radio
(
[
"A"
,
"B"
]
,
{
label
:
"Active position:"
,
value
:
"A"
}
)
Insert cell
viewof
theta_1_A
=
Inputs
.
range
(
[
-
165
,
165
]
,
{
value
:
-
50
,
step
:
5
,
label
:
htl
.
html
`Rotation θ<sub>1</sub>`
}
)
Insert cell
viewof
theta_1_B
=
Inputs
.
range
(
[
-
165
,
165
]
,
{
value
:
35
,
step
:
5
,
label
:
htl
.
html
`Rotation θ<sub>1</sub>`
}
)
Insert cell
viewof
theta_2_A
=
Inputs
.
range
(
[
-
110
,
110
]
,
{
value
:
60
,
step
:
5
,
label
:
htl
.
html
`Rotation θ<sub>2</sub>`
}
)
Insert cell
viewof
theta_2_B
=
Inputs
.
range
(
[
-
110
,
110
]
,
{
value
:
35
,
step
:
5
,
label
:
htl
.
html
`Rotation θ<sub>2</sub>`
}
)
Insert cell
viewof
theta_3_A
=
Inputs
.
range
(
[
-
110
,
70
]
,
{
value
:
-
15
,
step
:
5
,
label
:
htl
.
html
`Rotation θ<sub>3</sub>`
}
)
Insert cell
viewof
theta_3_B
=
Inputs
.
range
(
[
-
110
,
70
]
,
{
value
:
5
,
step
:
5
,
label
:
htl
.
html
`Rotation θ<sub>3</sub>`
}
)
Insert cell
viewof
theta_4_A
=
Inputs
.
range
(
[
-
160
,
160
]
,
{
value
:
0
,
step
:
5
,
label
:
htl
.
html
`Rotation θ<sub>4</sub>`
}
)
Insert cell
viewof
theta_4_B
=
Inputs
.
range
(
[
-
160
,
160
]
,
{
value
:
-
55
,
step
:
5
,
label
:
htl
.
html
`Rotation θ<sub>4</sub>`
}
)
Insert cell
viewof
theta_5_A
=
Inputs
.
range
(
[
-
120
,
120
]
,
{
value
:
45
,
step
:
5
,
label
:
htl
.
html
`Rotation θ<sub>5</sub>`
}
)
Insert cell
viewof
theta_5_B
=
Inputs
.
range
(
[
-
120
,
120
]
,
{
value
:
80
,
step
:
5
,
label
:
htl
.
html
`Rotation θ<sub>5</sub>`
}
)
Insert cell
viewof
theta_6_A
=
Inputs
.
range
(
[
-
400
,
400
]
,
{
value
:
50
,
step
:
5
,
label
:
htl
.
html
`Rotation θ<sub>6</sub>`
}
)
Insert cell
viewof
theta_6_B
=
Inputs
.
range
(
[
-
400
,
400
]
,
{
value
:
200
,
step
:
5
,
label
:
htl
.
html
`Rotation θ<sub>6</sub>`
}
)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Try it for free
Learn more
Compare fork
Fork
View
Export
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
container
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
dimensions
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
framework
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
aspect_ratio
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
environmentMap
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
metaRoughnessTexture
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
textureBackground
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
THREE
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
paths
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
cubes
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
renderer
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
camera
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
scene
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
mm_to_inch
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
cube_offset
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
pivotOffset_1
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
pivotOffset_2
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
pivotOffset_3
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
pivotOffset_4
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
pivotOffset_5
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
pivotOffset_6
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
pivotOffset_7
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
disabled
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
disabled_A
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
disabled_B
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
BKG_color
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Use_BKG_image
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Metalness
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Roughness
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Environment_intensity
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Model_color
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Wireframe
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
DisplayCubes
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
UniformColor
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Grid_color
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
opacity
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Display_grid
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
n
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
animation_loop
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
position
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
theta_1_A
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
theta_1_B
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
theta_2_A
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
theta_2_B
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
theta_3_A
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
theta_3_B
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
theta_4_A
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
theta_4_B
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
theta_5_A
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
theta_5_B
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
theta_6_A
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
theta_6_B
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
multiplyMatrices4x4
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
T01
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
T12
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
T23
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
T34
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
T45
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
T56
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
T01_A
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
T01_B
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
T12_A
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
T12_B
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
T23_A
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
T23_B
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
T34_A
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
T34_B
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
T45_A
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
T45_B
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
T56_A
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
T56_B
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
T02_A
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
T02_B
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
T03_A
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
T03_B
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
T04_A
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
T04_B
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
T05_A
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
T05_B
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
T06_A
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
T06_B
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML