Platform
Resources
Pricing
Sign in
Get started
Jo Wood
Professor of Visual Analytics interested in design, geovisualization, visual storytelling and computational thinking.
Workspace
Fork
Public
three.js
By
Jo Wood
Edited
Jan 7
Paused
1 fork
three.js
Three.js: 1. Hello Cube
Three.js: 2. Animating the scene
Three.js: 3. Animating the camera
Three.js: 4. Controlling object appearance
Three.js: 5. Adding surface textures
Three.js: 6. Adding custom geometry
30 Day Map Challenge: 13. A new tool
Insert cell
Insert cell
Insert cell
THREE
=
(
window
.
THREE
=
await
require
(
"three@0.160/build/three.min.js"
)
)
Insert cell
Insert cell
Insert cell
size
=
(
{
w
:
400
,
h
:
300
}
)
Insert cell
Insert cell
renderer
=
{
const
r
=
new
THREE
.
WebGLRenderer
(
{
antialias
:
true
}
)
;
r
.
setSize
(
size
.
w
,
size
.
h
)
;
r
.
setPixelRatio
(
devicePixelRatio
)
;
return
r
;
}
Insert cell
Insert cell
Insert cell
Insert cell
scene
=
{
const
scene
=
new
THREE
.
Scene
(
)
;
const
geometry
=
new
THREE
.
BoxGeometry
(
1
,
1
,
1
)
;
const
material
=
new
THREE
.
MeshNormalMaterial
(
)
;
const
cube
=
new
THREE
.
Mesh
(
geometry
,
material
)
;
scene
.
add
(
cube
)
;
return
scene
;
}
Insert cell
Insert cell
camera
=
{
const
fov
=
60
;
const
aspect
=
size
.
w
/
size
.
h
;
const
near
=
0.1
;
const
far
=
5
;
const
camera
=
new
THREE
.
PerspectiveCamera
(
fov
,
aspect
,
near
,
far
)
;
camera
.
position
.
set
(
1
,
0.7
,
3
)
;
return
camera
;
}
Insert cell
Insert cell
Insert cell
{
renderer
.
render
(
scene
,
camera
)
;
return
renderer
.
domElement
;
}
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
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
THREE
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
size
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
renderer
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
scene
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
camera
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
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML