In three.js I want to create a portal effect - where looking through the portal would mask some objects and not others.
For example, you look through the portal and you could see a different world.
I'm new to three.js, and i've experimented with alphaMap and clippingPlanes but i think my approach is incorrect.
This example below shows what i have on the left with the desired effect on the right.
This is a good example - https://www.magicleap.com/
Thank you for your direction
Related
I started using this AFrame example to mess around with graphs in VR:
https://github.com/vasturiano/3d-force-graph-vr
I needed to have more control over the scene so I moved to the lower level component:
https://github.com/vasturiano/aframe-forcegraph-component
Everything works nicely but I am now trying to bridge the gap between the lower-level three.js objects that are attached to the forcegraph AFrame entity and the VR controls at the scene level. I would like to add basic manipulation of the graph with VR controllers and/or hands but I am failing to conceptually connect the 2 up. The comments on the repos basically just say "use the lower-level frameworks to do this".
The concrete question: how do I add the ability to drag a node with this component? I know I'll have to write custom code to do it, just unsure actually how and where to do it. I haven't even gotten to a point where I know where to start trying to do this.
In other examples of this, the ability to manipulate the graph is there but only for a mouse and not in VR. I'm fine with hacking it so it only works for VR (specifically the Meta Quest 2), don't need to worry about anything else at the moment. I am using other AFrame level components too so I would like to stay at the AFrame level of abstraction as much as possible.
I am seeking comments on general direction, pseudocode, stubs, etc. I feel like I'm missing something small here to figure this out. I am pretty much a beginner.
Aframe version: 1.3.0
Updated question:
Ability to move the nodes in the graph using oculus quest 2 controllers
Ability to twist/turn/scale in/scale out the entire graph using oculus quest 2 controllers
I'm playing about with three.js and webGL with an attempt to get html objects overlaid on a webGL model.
I intend to use three.js object loaders to render a 3D model, where I can then allow users to overlay HTML DOM objects in 3D space via a custom UI.
I've mainly been using the various different examples in the three.js docs (https://threejs.org/examples/ and https://codepen.io/AdamEDGE/pen/RRjEwz).
In order to allow the user to move the overlaid HTML objects via the UI, I've added the transform controls (https://threejs.org/examples/misc_controls_transform.html).
Things seemed to be going relatively well up to this point, but now I see that the controls are not hoverable or clickable to move the element.
I suspect I'm either missing code or an issue with the camera not aligning correctly, but I'm very new to this so I'm guessing.
I have also experimented with Jerome Etienne's blending tutorials, but on testing that caused other issues and I think may not be worth the trouble for what I'm going for (http://learningthreejs.com/blog/2013/04/30/closing-the-gap-between-html-and-webgl/index.html).
I have created an example that shows the problem (click on an object and the controls should show).
Its a simple webGL torus with two HTML images overlaid and mapped to a Mesh so I can link the controls to the HTML elements which are on a different scene.
https://jsfiddle.net/mattscotty/h5wuq86y/
control = new THREE.TransformControls(camera, glRenderer.domElement);
control.addEventListener('change', render);
The controls show on all the correct places when clicked as expected and I can use the keyboard to change the transform type (again see https://threejs.org/examples/misc_controls_transform.html for how it should work).
As I can't click or hover, I can't hook up to the relevant events.
I'm brand new to this and I'm quite sure I'm missing something obvious, so any help is appreciated.
First please excuse my bad english writing and please note that I am a Javascript NOOB!
I am currently developing a website for a client where I am presenting different kind of "wood cut" in webgl but I am unable to get the desired look an feel...
My goal is to make the viewer look and react like what we can see at Sketchfab.
http://sketchfab.com/show/9f7e1e088f0943b697e809f224f8c76d
The rotation is limited to a certain angle and the model always stay in the right position... With Trackballcontrols the model rotate all the way and its a mess. I have tried to change the quaternion as follow:
from:
_this.object.up.applyQuaternion( quaternion );
to:
_this.object.up.applyQuaternion( new THREE.Vector4(0,0,0,1) );
but it behave weird when I reach a certain angle, the model become jumpy...
Then I tried with Orbitcontrols but it seems that there is no dynamicDamping because the controls are really "dry". I prefer a smoother effect...
1- So is there a way to use Orbitcontrols and get the dynamicDamping to work?
2- Is it possible to modify Trackballcontrols to get the desired result?
an example of my models are here:
http://www.boissilvac.ca/new/nosproduits/patron19
Thank you for your time
I am working on a program, that uses THREE.RollControls, when the user goes too far away from the center of the screen, they tend to get lost, so I am working on creating a function that reorients them, facing the center of the scene.
What I had intened to do was simply call the following:
camera.lookAt(scene.position)
However, this has no affect. From what I was reading on different stack overflow questions specifically this:
ThreeJS camera.lookAt() has no effect, is there something I'm doing wrong?
It seems like their solution was to do the camera position change using the controls, rather then changing the camera itself.
I do not believe there is any 'Target' in the Roll Controls, so I don't know how I can reset where the camera is looking at based on a THREE.Vector3() Is there a simple way to do this, or will I basically have to:
So far I have 'attempted' to do the follow:
- Calculate the difference of position of the camera with the position of the scene.
- Normalize this vector
- Subtract it from the direction forward of the camera
- use this vector in controls.forward.add(thisVector)
but this doesn't do at all what I want (probably because I have no idea what I'm doing)
Thank you in advance for your time!
Isaac
The same thing bugged me too about the RollControls but I took a different approach in solving the problem. Since the controls are in the example code (in r55) you can modify the controls, as they are not part of the core library. You can see my modifications at http://www.virtuality.gr/AGG/EaZD-WebGL/js/three.js/examples/js/controls/RollControls.js
I introduced a local variable called mouseLook because I could not use the this.mouseLook. I initialized it to false and I only make it true when there is a button press i.e. when navigating in the scene. That solved my problem.
I am new on the JavaScript and HTML. I am on learning process. I successfully made a cube and textured it. I also want to add different html link to open pages in "iframe".
I used the example of http://mrdoob.github.com/three.js/examples/canvas_geometry_cube.html
This is what I did http://olcaysahin.com/pages/cube.html
If anyone knows any tutorial or similar approach to make each face clickable, appreciated.
Thanks
Have a look at http://mrdoob.github.com/three.js/examples/canvas_interactive_cubes.html.
The from variable intersects, you can determine which face was clicked on from either the faceIndex or the face normal.