Code Monkey home page Code Monkey logo

Comments (4)

brianchirls avatar brianchirls commented on July 20, 2024

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.

mechwarr avatar mechwarr commented on July 20, 2024

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.

brianchirls avatar brianchirls commented on July 20, 2024

you mean an image in VR or in github?

from webvr-starter-kit.

mechwarr avatar mechwarr commented on July 20, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.