I am creating a scene in A-frame (https://aframe.io) using the networked A-frame component (https://www.npmjs.com/package/networked-aframe) and I'm wondering how I can create a "networked object" where when two users are in one scene and one user moves the object, it will update for both players and the object will move even for the player that hasnt moved anything. I want to use vr hands inside A-frame to move objects around my scene however currently when I move and object, the object only moves for one player and for the other player it remains in the same spot. Link to a networked a-frame boilerplate glitch project:
https://glitch.com/edit/#!/networked-aframe?path=README.md%3A1%3A0
Code for a movable box I want in my scene that should update for both players:
<a-box hoverable grabbable stretchable draggable dropppable color="blue" position="0 0 -1"></a-box>
Related
I am building an A-Frame application and when in VR mode I can use the keyboard WASD to navigate and look up or down with movement to change camera height. The camera is facing forward except when I rotate my head in Oculus rift which works fine. In some Oculus apps such as home when you teleport you can rotate the thumbstick so that the direction you face changes after you teleport. Is there a way to change camera rotation with the keyboard in A-frame? I am using A-frame extras and my camera rig code is below. Thanks!
<a-entity id="rig" movement-controls="fly: true; speed: 0.1" wasd-controls position="11 1.5 2" >
<a-entity camera look-controls></a-entity>
</a-entity>
Add a rotation component to the id='rig' entity. Then you can make a new custom component ('overrotate'), and also add that to the id='rig' entity. Program overrotate to listen for keyboard input (whatever keys you like), and within that listener function, call the rotation component with a setAttribute(). Because you are now rotating the parent of the camera (the rig), you will still get your look-controls rotation of the camera, and also the override rotation for the rig, driven by keyboard input.
I am trying to create a First person view in A-frame using the .obj model of a car.
The camera has been positioned close to the driver's seat, and there is a timed interval in javascript that moves the camera position by doing trignometric calculations and moves the camera accordingly.
Here are two problems I am facing
1) How do you make this smoother? Is there a hook for the render loop in A-frame which can be accessed in javascript? I cant seem to find the documentation for it.
2) When I view the above page in VR mode on the phone ( Android 9), the animation created stops abruptly, which works well in fullscreen mode.
The code for the html is here https://raw.githubusercontent.com/CuriosityGym/VRWithAframe/master/templates/class3-models.html
The example can be accessed here http://cgaframe.herokuapp.com/class3
Thank You!
You have a setInterval that fires every 100ms, animating the car at 10fps. That’s why it’s not smooth. Create a component and use the tick method to animate
In addition, you should not animate the camera directy because its position will be overriden by the headset pose in VR mode. Setup and animate a camera rig
I am trying to rotate a box around its center while keeping the rest of the models fixated. Here is my code -
<head>
<title>My A-Frame Scene</title>
<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-orbit-controls#1.0.0/dist/aframe-orbit-controls.min.js"></script>
<script src="https://unpkg.com/aframe-supercraft-loader#1.1.3/dist/aframe-supercraft-loader.js"></script>
</head>
<body>
<a-scene>
<a-entity id="super" supercraft-loader="name: better-reaction" ></a-entity>
<a-entity camera look-controls orbit-controls="target: 0 1.6 -0.5; minDistance: 0.5; maxDistance: 180; initialPosition: 0 5 15">
<a-box position="0 1.6 -21" color="red"></a-box>
</a-entity>
</a-scene>
</body>
and here is the codepen: https://codepen.io/nirajupadhyay11/pen/RBBpbd
However, the entire model rotates on dragging the mouse, instead of just the box.
The result I am after is keeping the box and the model fixated at their respective positions but when the mouse is dragged, the box should rotate around it's center.
I am trying to get this to work so that, in my game that I am developing, I can have a 3d gun model point to different directions based on mouse drag. Their are other 3d models in the game such as trees and rocks but they should remain in their position when the mouse is dragged.
Here is one example of what I am trying to achieve - https://codepen.io/jordizle/pen/haIdo
Could you please help me with this?
Thanks,
Niraj
The orbit controls are basically a camera rotating around on an orbit. Hence the name.
If you want the scene "still" and only one object rotating, you can't rotate the whole camera. You need to rotate the object alone.
A simple way to achieve what you want would be checking where the mouse is dragged on the window
when the mouse is pressed, get the position
on mousemove check how much the position has changed. Rotate the object accordingly to the changes.
when its released, stop listening for the mousemove.
↪️ I want to embed a street view in app so I created a new Project
↪️ Added Street View To Skybox from the asset store
↪️ Imorted a street view from google maps to a Skybox
↪️ Drag and droped the sky box in the scene
↪️ how I do move the camera in response to the touch and mouse moment like a panorama in this example
↪️
1.Unit 3d documentation
2.Unity Touch Swipe Camera Rotation - Touch FPS Controller
3.Street View Convert
4.Street view converter unity 3D panorama
5.Unity3D Tutorial: How to make Skybox 360 single texture
I'd do the following:
Create an empty GameObject called "RotorY" which will be responsible for y rotation of your camera (looking around).
Create an empty GameObject "RotorX" as a child of "RotorY". This one will control x rotation (looking up and down)
Make camera a child of RotorX. (also make sure RotorX and Camera have (0,0,0) position in local space)
Add this script to any gameObject and assign rotorY and rotorX to the slots (while experimenting I ended up writing this script, lol)
EDIT January, 2017: added 2 lines in the code to make it work with unity 5.5
I was working with my three.js project in which I loads few '.obj ' files in to the scene using 'OBJMTLLoader.js'.
I implemented mouse touch and keyboard events so that I can navigate each objects through the entire scene.
But I need to detect collisions so that when two objects collide, the navigation need to stop in the collided direction. i.e. an object should not get over the other.
I successfully implemented the above for key events by emitting ray to all sides of the object. But the same method doesn't work properly for mouse and touch events.
I also tried to implement 'physi.js', but it seems obj files can't be loaded in 'Physijs.Scene'.
Do anyone know what to be done to implement this..?
Finally I obtained the solution, using the physi.js itself. I made physijs box mesh of desired sizes and added my obj models to it.I made the meshes visible property to false. And made those meshes to collide. The objects will move along with the meshes.