Platform
Resources
Pricing
Sign in
Get started
David B.
Data viz engineer | twitter.com/dbumbeishvili
Workspace
Fork
Published
Three.js
By
David B.
Edited
Fork of
Three.js Template
•
3 forks
6 stars
Insert cell
Insert cell
{
let
scene
,
height
=
400
;
// create a Scene
scene
=
new
THREE
.
Scene
(
)
;
// Set the background color
scene
.
background
=
new
THREE
.
Color
(
'#00DDDC'
)
;
scene
.
add
(
mainLight
,
ambientLight
)
scene
.
add
(
cubeGroup
)
;
const
controls
=
new
THREE
.
OrbitControls
(
camera
,
renderer
.
domElement
)
;
controls
.
enableDamping
=
true
;
controls
.
dampingFactor
=
0.3
;
controls
.
rotateSpeed
=
0.1
;
invalidation
.
then
(
(
)
=>
{
console
.
log
(
'invalidated'
)
renderer
.
setAnimationLoop
(
null
)
;
controls
.
dispose
(
)
;
renderer
.
dispose
(
)
;
}
)
;
renderer
.
setAnimationLoop
(
(
)
=>
{
update
(
mutable
i
++
)
;
render
(
scene
)
;
controls
.
update
(
)
}
)
yield
renderer
.
domElement
}
Insert cell
mutable
i
=
1
Insert cell
Insert cell
Insert cell
function
update
(
)
{
/*********** PUT ANIMATION LOGIC HERE **********/
cubeGroup
.
rotation
.
x
+=
0.001
;
cubeGroup
.
rotation
.
y
+=
0.001
;
cubeGroup
.
rotation
.
z
+=
0.001
;
/***********************************************/
}
Insert cell
Insert cell
function
render
(
scene
)
{
renderer
.
render
(
scene
,
camera
)
;
}
Insert cell
renderer
=
{
const
renderer
=
new
THREE
.
WebGLRenderer
(
{
antialias
:
true
}
)
;
renderer
.
setSize
(
width
,
height
)
;
renderer
.
setPixelRatio
(
window
.
devicePixelRatio
)
;
renderer
.
gammaFactor
=
2.2
;
renderer
.
gammaOutput
=
true
;
renderer
.
physicallyCorrectLights
=
true
;
return
renderer
;
}
Insert cell
Insert cell
cubeGroup
=
{
const
group
=
new
THREE
.
Group
(
)
;
group
.
add
(
cubeMesh
)
;
return
group
;
}
Insert cell
Insert cell
cubeMesh
=
{
const
cubeMesh
=
new
THREE
.
Mesh
(
cubeGeometry
,
cubeMaterial
)
;
return
cubeMesh
;
}
Insert cell
Insert cell
cubeMaterial
=
{
const
cube
=
new
THREE
.
MeshStandardMaterial
(
{
color
:
'#F8CE3B'
,
flatShading
:
true
}
)
;
cube
.
color
.
convertSRGBToLinear
(
)
;
return
cube
;
}
Insert cell
Insert cell
cubeGeometry
=
new
THREE
.
BoxGeometry
(
1
,
1
,
1
)
;
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
,
9
)
;
return
light
;
}
Insert cell
Insert cell
height
=
400
Insert cell
Insert cell
fov
=
25
Insert cell
aspect
=
width
/
height
Insert cell
near
=
0.1
Insert cell
far
=
1000
Insert cell
camera
=
{
const
camera
=
new
THREE
.
PerspectiveCamera
(
fov
,
aspect
,
near
,
far
)
;
camera
.
position
.
set
(
-
4
,
2
,
4
)
;
return
camera
;
}
Insert cell
Insert cell
THREE
=
{
const
THREE
=
window
.
THREE
=
await
require
(
"three@0.99.0/build/three.min.js"
)
;
await
require
(
"three@0.99.0/examples/js/controls/OrbitControls.js"
)
.
catch
(
(
)
=>
{
}
)
;
return
window
.
THREE
;
}
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