Comments (4)
I'm not entirely clear what you're asking, but I'll do my best.
I'm guessing you don't mean z-index
, which is a CSS style property that doesn't apply here, but rather the position on the z axis, maybe?
While the x axis goes left/right (left is negative, right is positive) and the y axis goes up/down (down is negative, right is positive), the z axis goes front/back (away from the viewer is negative, toward the viewer is positive). Of course, that's just relative to where the viewer is looking when the simulation starts. If the viewer turns 90 degrees to the right, then the z axis becomes left/right.
One possible point of confusion here is that, while in many simulations, the viewer starts at [0, 0, 0]
(a.k.a. the "origin"), here the viewer starts at [0, 1.5, 4]. That is, 1.5 meters high on the y axis, assuming the viewer is approximately that tall, and 4 meters "back" from the origin. The reason for this is so that any new objects created at the origin are immediately visible in front of you when you create them.
You are free to move any object, including the viewer. To move the object, do something like this:
VR.box() // create a box
.moveTo(-1, 3, 1);
This example creates a box and moves it 1 meter to the left, 3 meters up and 1 meter "forward" or toward the viewer. The box will actually be 3 meters away from the viewer along the z axis, since the viewer is already 4 meters back.
While .moveTo()
places an object at an absolute position within the world, you can also move it incrementally relative to itself with .moveX()
, .moveY()
or .moveZ()
. .moveUp()
is an alias for .moveY()
and does the same exact thing. Also, every object has a .position
and a .rotation
property, which work the same way they do in three.js.
To move the viewer, there is an object called VR.body
. You can set the position the same way. The camera is a "child" object of VR.body
. If you try to move the camera, it will screw everything up, so move the body instead.
from webvr-starter-kit.
Sorry , I forget can't add div tag in here, and I should use another way to ask my question.
Have any idea to add image tag like the ex. '< img src="" width="300" height="300" >'?
from webvr-starter-kit.
you mean an image in VR or in github?
from webvr-starter-kit.
I mean an image in VR , but it's not VR image object.
I just want add UI object in your VR web example.
I know this question is very strange, but I'm just curious why VR always max be in this example of z-index, I mean this z axis not about VR three-dimensional space.
from webvr-starter-kit.
Related Issues (20)
- Text rendered center aligned if text width is shorter than the 'wrap' HOT 1
- Installing the starter kit for development
- How to check current rotation of an object HOT 8
- Transparent images HOT 2
- Add a link to an object in the scene HOT 2
- Closed
- Using Images
- Audio does not play on iOS device
- text renders a black box background
- Can not disable all movements
- 180 degree mode? HOT 2
- CVE-2018-16487 High Severity Vulnerability detected by WhiteSource
- CVE-2018-3721 Medium Severity Vulnerability detected by WhiteSource
- WS-2018-0210 Low Severity Vulnerability detected by WhiteSource
- WS-2019-0032 Medium Severity Vulnerability detected by WhiteSource
- WS-2019-0019 Medium Severity Vulnerability detected by WhiteSource
- CVE-2016-10540 High Severity Vulnerability detected by WhiteSource
- CVE-2017-16138 High Severity Vulnerability detected by WhiteSource
- WS-2017-0330 Medium Severity Vulnerability detected by WhiteSource
- WS-2018-0107 High Severity Vulnerability detected by WhiteSource
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from webvr-starter-kit.