What is the suggested approach for handling user input and camera controls in XML3D?
Basic interactivity can be added using the DOM tree events, but I'm not sure if that would be enough to provide rotation gizmos (for example).
Does library provides some API to handle user input and camera controls?
I've noticed that there is xml3d toolkit that was developed year ago.
It seem however that this is rather a loose collection of demos rather than a library for handling user input, also there is no decent use documentation for it.
I need to provide basics functionalities like rotation/translation/scaling of models and controlling the camera.
xml3d.js doesn't provide any cameras or gizmos by itself. They're usually application-specific (there are dozens of ways to implement a camera for instance) so it doesn't really make sense to include them as part of the core library. A very basic camera is provided alongside xml3d.js but it's quite limited.
The xml3d-toolkit did include transformation gizmos and various camera controllers but it's not in active development anymore since the creator has moved on to other things. Still, it might be a good place to start, or at least to use as a reference in building your own camera or gizmo.
For example, a simple way to allow the user to change the transformation of a model would be to:
Add an onclick listener to each model that toggles the editing mode
Show 3 buttons somewhere in your UI to let the user switch between editing rotation, translation or scale
Add onmouseup and onmousedown listeners to the <xml3d> element to record click+drag movements
As part of those listeners, convert the change in mouse position to a change in transformation depending on what editing mode the user is in
Apply those transformation changes to the model either by changing its CSS transform, or through the relevant attribute on a <transform> element that's referenced by a <group> around your model.
Exit the editing mode if the user clicks the canvas to deselect the object (rather than a click+drag operation)
To keep it from conflicting with camera interaction you could use the right mouse button for editing, or simply disable the camera while the user is editing a transformation.
A 3D gizmo is a bit trickier because it needs to be drawn over top of the model while still being clickable, currently there is no way to do this. You could use the RenderInterface to draw the gizmo in a second pass after clearing the depth buffer, but this would not be done in the internal object picking pass that's required to find out which object a user has clicked on.
As a workaround, the toolkit library used a second XML3D canvas with a transparent background positioned over the first that intercepted and relayed all mouse events. When an object was selected its transformation was mirrored into the second canvas where the gizmo was drawn. Changes in the gizmo's transformation were then mirrored back to the object in the main canvas.
Have a look at the classes in the toolkit's xml3doverlay and widgets folders.
An advice for people implementing draggable objects with XML3D:
Use ray picking method of XML3D element to get both object and the point of intersection of ray & model ( function getElementByRay).
Change the mouse movements from screen coordinates to world coordinates.
You must scale transform by the relative distance of picked point to camera and camera to projection plane, so the moving object can track your cursor.
Related
I'm looking over the documentation for three.js right now and have found the controls section. I see that it's possible to use orbit to control the cameras view of the scene and I ahve confirmed that this works with touchscreen. What I cannot find anywhere online is if it has the possibility to rotate, scale, and transform a loaded model. I see that transform exists but I can't find anything else that I would need for it.
You need to add event listeners to the canvas by yourself and detect intersections. If intersection with the desired object was made, then make transformations depending on the event to it.
Can I create a 2D scene in ReactVR? I mean displaying elements on a screen like in normal React, for example, classical web menu which will be always displayed in the same place on screen. Or something like HUD in 3D games.
More context on what you are trying to achieve or what platforms you are targeting would help, but here are a few guidelines:
IN VR
You generally don't want to have permanent overlays or components that move along with the user. This tends to break immersion unless very carefully designed and properly implemented. You can still render 2D elements using the built-in Text, Image, and View components, but you have to be smart about interactions. A common alternative to this approach is fading in a menu/HUD whenever the user looks in a particular direction, e.g. when looking at the ground.
Either way, you will want to take a look at VrHeadModel and the APIs it exposes to query user's Yaw/Pitch/Roll or how to listen for head rotation events.
On WEB & Mobile
For these platforms, you can implement menus/HUDs using the DOM Overlay concept, which renders a traditional 2D surface on top of the 360 scene.
The linked sample shows how to implement what you need in 2D, using plain React, html, css, etc. In this case, it renders a simple overlay with text on it, but you can use it to implement persistent overlays, menus or whatever UI you believe is better consumed in 2D instead of within the 360 scene.
I am converting an existing code base from using Flash to using CreateJS but I am in need of a way to stop the Stage update and inspect the EaselJS GUI elements
for debugging.
My list of requirements for the debugger is
It must be possible to stop the propagation of CreateJS ticks to the non-debug parts of the GUI so that these parts do not change during inspection.
In inspection mode, it must be possible to see the hierarchy tree of the non-debug parts of the GUI.
In inspection mode, when an element in the hierarchy tree is selected, then the corresponding visible canvas graphics must change appearance to clearly distinguish it from the other graphics on the canvas, and so that its boundaries are clearly visible.
In inspection mode, when a point is selected on the canvas, then the corresponding element must be visible and highlighted in the hierarchy tree.
In inspection mode, when a point is selected on the canvas, then the following properties must be displayed for the corresponding element: coordinates & size.
To achieve the above, I need to implement at least these parts.
Stage traversal and data extraction.
Tree presentation of the data extracted.
Highlight of specific stage objects.
Control of the Stage ticking.
Are there libraries that can help me create such an inspector tool?
The EaselJS-Inspector is an example of how to solve everything above, except that I use a fixed size for all DisplayObjects.
The problem is that Shapes do not have a size unless one manually sets it.
So i have the orbit control working, but i have 3 objects on the page. When it controls one, it controls them all. Also pan/zoom does not work at all with the OrthographicCamera.
I have each instance of the OrbitControls assigned its own variable, so it is not global across them all.
controlsObjOne = new THREE.OrbitControls(cameraObjOne);
controlsObjOne.addEventListener('change', renderObjOne);
I use ObjTwo, Three, etc for the other models. Everything works this way (camera, light, render, etc) except the orbit. Is it possible with this library or is there another one that i have not seen that will work with multiple objects?
The reason for this is that by default, the OrbitControls attach the eventListeners for mouse/touch input to the document. One can hand over a domElement as a second parameter. Then all eventListeners will be bound to that element (for example the renderer canvas domElement). But that will highly limit the navigation possibilities, since the mousemove will only get registered when the mouse is in the canvas area.
What you want is the mousedown eventListeners on the renderer-canvas and the mousemove on the document to freely move the mouse once the mouse is pressed.
I created a modified version with a 3rd parameter to hand over your canvas element: https://gist.github.com/mrflix/8351020
I am developing an editor in html5. I have buttons for creating shapes when clicked, including triangle, rectangle, hexa, penta, heptagons, lines, and so on. Now I also want to perform operations on these shapes such as rotate, flip, undo, redo, ...etc. I want to save these drawn objects in a JavaScript array or something so I can create them after performing operations on the canvas, since individual shapes cannot be rotated or flipped in canvas, we have to redraw it. How can I achieve this? Thanks in advance.
I have a project where if you click on an image of a rectangle you can then draw a rectangle, click on an ellipse then you can draw an ellipse. My shapes are stored as objects which are then drawn using Canvas and can be flipped, rotated etc I have not implemented undo redo.
My project is at http://canvimation.github.com/
The source code for my project is at https://github.com/canvimation/canvimation.github.com
The master branch is the current working code. You are welcome to use any of the code or fork the project.
as you said, you have to clear your context and redraw your shapes any time you change them.
It's not mandatory to clear and redraw all the context, you can just redraw the region in which a shape is modified.
So you have to think your shapes as objects (in a OOP way) with their own properties and render method.
What I'd do is to create another class to apply transformations to a shape (a flip is just a -1 scale).
If you go this way, it could become a huge work (the more features you add, the more complexe your code becomes and the first design of your application may be re-think during the work).
What I can suggest to you is to use a framework that already does the job.
For example, cgSceneGraph is designed to let developers add their own rendering method and provides a lot of methods to manipulate them. I'm the designer of the framework, feel free to ask more on about how to apply transformations or create your own nodes (tutorials and examples are already on the website, but I'll please to help you).