Platform
Docs
Resources
Blog
Pricing
Sign in
Sign up
Tom van Tilburg
Workspace
Fork
Published
By
Tom van Tilburg
Edited
Feb 26, 2020
Insert cell
Insert cell
dom
=
{
const
controls
=
new
THREE
.
OrbitControls
(
camera
,
renderer
.
domElement
)
;
controls
.
addEventListener
(
"change"
,
(
)
=>
renderer
.
render
(
scene
,
camera
)
)
;
renderer
.
render
(
scene
,
camera
)
;
return
renderer
.
domElement
;
}
Insert cell
buildings
Insert cell
Insert cell
Insert cell
renderer
=
{
const
renderer
=
new
THREE
.
WebGLRenderer
(
{
antialias
:
true
}
)
;
renderer
.
setSize
(
width
,
height
)
;
renderer
.
setPixelRatio
(
devicePixelRatio
)
;
//renderer.setClearColor(0xffffff);
renderer
.
gammaFactor
=
2.2
;
renderer
.
gammaOutput
=
true
;
renderer
.
physicallyCorrectLights
=
true
;
return
renderer
;
}
Insert cell
scene
=
{
const
scene
=
new
THREE
.
Scene
(
)
;
const
axesHelper
=
new
THREE
.
AxesHelper
(
1
)
;
scene
.
add
(
buildings
)
;
scene
.
add
(
axesHelper
)
;
scene
.
add
(
ambientLight
)
;
scene
.
add
(
mainLight
)
;
return
scene
;
}
Insert cell
Insert cell
mainLight
=
{
const
light
=
new
THREE
.
DirectionalLight
(
0xffffff
,
3.0
)
;
light
.
position
.
set
(
10
,
10
,
10
)
;
return
light
;
}
Insert cell
ambientLight
=
{
const
light
=
new
THREE
.
HemisphereLight
(
0xddeeff
,
0x202020
,
3
)
;
return
light
;
}
Insert cell
camera
=
{
const
fov
=
45
;
const
aspect
=
width
/
height
;
const
near
=
0.01
;
const
far
=
1000
;
const
camera
=
new
THREE
.
PerspectiveCamera
(
fov
,
aspect
,
near
,
far
)
;
camera
.
position
.
set
(
20
,
.6
,
20
)
;
//camera.lookAt(0,10,0);
return
camera
;
}
Insert cell
height
=
500
Insert cell
{
//buildings.updateMatrixWorld();
const
box
=
new
THREE
.
Box3
(
)
.
setFromObject
(
buildings
)
;
const
size
=
box
.
getSize
(
new
THREE
.
Vector3
(
)
)
.
length
(
)
;
const
center
=
box
.
getCenter
(
new
THREE
.
Vector3
(
)
)
;
buildings
.
position
.
x
+=
(
buildings
.
position
.
x
-
center
.
x
)
;
buildings
.
position
.
y
+=
(
buildings
.
position
.
y
-
center
.
y
)
;
buildings
.
position
.
z
+=
(
buildings
.
position
.
z
-
center
.
z
)
;
}
Insert cell
buildings
=
gltf
.
scene
.
children
[
0
]
.
children
[
0
]
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
b3dmurl
=
'https://saturnus.geodan.nl/maquette_nl/data/buildingtiles_texel_3857/tiles/442.b3dm'
Insert cell
Insert cell
Insert cell
One platform
to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.
Try it for free
Learn more
Fork
View
Export
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
dom
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
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
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
mainLight
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
ambientLight
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
camera
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
height
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
buildings
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
gltf
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
TileLoader
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
B3DM
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
resourcePath
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
b3dmurl
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
THREE
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Platform overview
Observable Framework
Observable Cloud
Observable Notebooks
Embedded analytics
Observable
Observable Framework
Observable Plot
D3
Release notes
Examples
Data integrations
Customer stories
Community Slack
Forum