Skip to content
GitLab
Explore
Projects
Groups
Snippets
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
Pardo Urbano
Visualization
Commits
274ec007
Commit
274ec007
authored
1 year ago
by
Alfakhori
Browse files
Options
Download
Email Patches
Plain Diff
Update public/webXR/three.html
parent
09b3f0a8
master
Changes
1
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
public/webXR/three.html
+31
-34
public/webXR/three.html
with
31 additions
and
34 deletions
+31
-34
public/webXR/three.html
+
31
-
34
View file @
274ec007
...
...
@@ -14,53 +14,50 @@
<!-- Starting an immersive WebXR session requires user interaction.
We start this one with a simple button. -->
<script>
// ------------------------------------------------
// BASIC SETUP
// ------------------------------------------------
// create a Scene
const
scene
=
new
Scene
();
//
Create an empty scene
var
scene
=
new
THREE
.
Scene
(
);
//
Set the background color
scene
.
background
=
new
Color
(
'
skyblue
'
);
// Create a basic perspective camera
var
camera
=
new
THREE
.
PerspectiveCamera
(
75
,
window
.
innerWidth
/
window
.
innerHeight
,
0.1
,
1000
);
camera
.
position
.
z
=
4
;
// Create a camera
const
fov
=
35
;
// AKA Field of View
const
aspect
=
container
.
clientWidth
/
container
.
clientHeight
;
const
near
=
0.1
;
// the near clipping plane
const
far
=
100
;
// the far clipping plane
// Create a renderer with Antialiasing
var
renderer
=
new
THREE
.
WebGLRenderer
({
antialias
:
true
});
const
camera
=
new
PerspectiveCamera
(
fov
,
aspect
,
near
,
far
);
// Configure renderer clear color
renderer
.
setClearColor
(
"
#000000
"
);
// every object is initially created at ( 0, 0, 0 )
// move the camera back so we can view the scene
camera
.
position
.
set
(
0
,
0
,
10
);
//
Configure renderer size
renderer
.
setSize
(
window
.
innerWidth
,
window
.
innerHeight
);
//
create a geometry
const
geometry
=
new
BoxBufferGeometry
(
2
,
2
,
2
);
//
Append Renderer to DOM
document
.
body
.
appendChild
(
renderer
.
domElement
);
//
create a default (white) Basic material
const
material
=
new
MeshBasicMaterial
(
);
// ------------------------------------------------
// FUN STARTS HERE
// ------------------------------------------------
// create a Mesh containing the geometry and material
const
cube
=
new
Mesh
(
geometry
,
material
);
// Create a Cube Mesh with basic material
var
geometry
=
new
THREE
.
BoxGeometry
(
1
,
1
,
1
);
var
material
=
new
THREE
.
MeshBasicMaterial
(
{
color
:
"
#433F81
"
}
);
var
cube
=
new
THREE
.
Mesh
(
geometry
,
material
);
// add the mesh to the scene
scene
.
add
(
cube
);
//
Add cube to Scene
scene
.
add
(
cube
);
//
create the renderer
const
renderer
=
new
WebGLRenderer
(
);
// Render Loop
var
render
=
function
()
{
requestAnimationFrame
(
render
);
// next, set the renderer to the same size as our container element
renderer
.
setSize
(
container
.
clientWidth
,
container
.
clientHeight
);
cube
.
rotation
.
x
+=
0.01
;
cube
.
rotation
.
y
+=
0.01
;
// finally, set the pixel ratio so that our scene will look good on HiDPI displays
renderer
.
setPixelRatio
(
window
.
devicePixelRatio
)
;
// Render the scene
renderer
.
render
(
scene
,
camera
);
};
// add the automatically created
<
canvas
>
element
to
the
page
container
.
append
(
renderer
.
domElement
);
render
();
// render, or 'create a still image', of the scene
renderer
.
render
(
scene
,
camera
);
</script>
</body>
...
...
This diff is collapsed.
Click to expand it.
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment
Menu
Explore
Projects
Groups
Snippets