Platform
Resources
Pricing
Sign in
Get started
Claudio Esperança
Computer Graphics & Visualization @ufrj.br
Workspace
Fork
Published
Computer Graphics
By
Claudio Esperança
Edited
May 22, 2021
1 fork
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
image
=
loadImage
(
await
randomImage
(
512
,
512
,
'butterfly'
)
)
Insert cell
Insert cell
texture
=
{
let
tex
=
new
THREE
.
CanvasTexture
(
image
)
;
tex
.
wrapS
=
tex
.
wrapT
=
THREE
.
RepeatWrapping
;
tex
.
offset
.
set
(
uoffset
,
voffset
)
;
tex
.
repeat
.
set
(
urepeat
,
vrepeat
)
;
return
tex
;
}
Insert cell
plane
=
{
const
geometry
=
new
THREE
.
PlaneGeometry
(
)
;
const
material
=
new
THREE
.
MeshBasicMaterial
(
{
color
:
0xffffff
,
side
:
THREE
.
DoubleSide
,
map
:
texture
}
)
;
const
plane
=
new
THREE
.
Mesh
(
geometry
,
material
)
;
return
plane
;
}
Insert cell
renderer
=
new
THREE
.
WebGLRenderer
(
{
canvas
:
html
`<canvas width=640 height=480>`
}
)
Insert cell
camera
=
{
let
camera
=
new
THREE
.
PerspectiveCamera
(
60
,
4
/
3
,
0.1
,
100
)
;
camera
.
position
.
set
(
0
,
0
,
1.5
)
;
return
camera
;
}
Insert cell
light
=
{
let
light
=
new
THREE
.
DirectionalLight
(
0xffffff
,
1
)
;
light
.
position
.
set
(
1
,
1
,
10
)
;
return
light
;
}
Insert cell
scene
=
{
let
scene
=
new
THREE
.
Scene
(
)
;
scene
.
background
=
new
THREE
.
Color
(
0xCCCCCC
)
;
scene
.
add
(
plane
)
;
scene
.
add
(
light
)
;
return
scene
;
}
Insert cell
controls
=
new
THREE
.
OrbitControls
(
camera
,
renderer
.
domElement
)
Insert cell
Insert cell
{
for
(
let
frame
=
0
;
;
frame
++
)
{
renderer
.
render
(
scene
,
camera
)
;
yield
frame
;
}
}
Insert cell
Insert cell
THREE
=
{
const
THREE
=
(
window
.
THREE
=
await
require
(
'three@0.128'
)
)
;
await
require
(
'three@0.128/examples/js/controls/OrbitControls.js'
)
.
catch
(
(
)
=>
{
}
)
;
await
require
(
'three@0.128/examples/js/controls/TrackballControls.js'
)
.
catch
(
(
)
=>
{
}
)
;
return
THREE
;
}
Insert cell
Insert cell
async
function
randomImage
(
sizeOrWidth
=
null
,
height
=
sizeOrWidth
,
term
=
'flower'
)
{
const
size
=
sizeOrWidth
?
`/${
+
sizeOrWidth
}x${
+
height
}`
:
''
;
return
(
await
fetch
(
`https://source.unsplash.com/${
+
sizeOrWidth
}x${
+
height
}/?${
term
}`
,
{
method
:
'head'
,
cache
:
'no-store'
,
}
)
)
.
url
;
}
Insert cell
function
loadImage
(
src
)
{
const
img
=
DOM
.
element
(
'img'
,
{
crossorigin
:
'anonymous'
,
src
}
)
;
return
img
.
decode
(
)
.
then
(
(
)
=>
img
)
;
}
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
uoffset
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
voffset
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
urepeat
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
vrepeat
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
image
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
texture
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
plane
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
renderer
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
light
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
controls
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
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
randomImage
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
loadImage
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML