I have a web page that is based on the following ThreeJS sample:
http://threejs.org/examples/#css3d_molecules
I create new nodes (atoms) dynamically by attaching them to existing nodes (atoms). After creating it and adding it to the scene, I want to bring the new atom/child element to the forefront using the minimum number of rotate, pan, & zoom operations needed to do so. However, although I know how to do each of those operations, I don't know how to calculate the optimal sequence based on the current position/quaternion of the node (atom) where I created it in the scene, and its new position which will be (0, 0, ). I will be animating the change from the old place in the scene to the new so I don't want to just change the new element's position/quaternion to the new value via an assignment. I want animate the change over time, performing a slice of each operation (pan/zoom/rotate) each animation frame.
Are there any ThreeJS methods to help me do this?
See how to: get the global/world position of a child object to get world position of any mesh in your hierarchy. Then have your camera.lookAt() to that location.
Related
I'm trying to synchronize, upon the press of a button, the orientation of two objects (for example two cubes - not necessarily of the same dimensions) which live in two separate three.js scenes.
For the specific application at hand, I have access to the camera orientation 4 matrix of the first scene $M$ (it is an NGLView instance and so I believe I need to use its_camera_orientation trait). Based on the discussion here https://www.wikiwand.com/en/Camera_resectioning, I have attempted to set the orientation of the second scene by passing the camera position of the first scene in world coordinates, $C=-R^T T$ along with the camera direction $D=R^T (0 0 1)$. To get the correct relative orientation and position I multiplied the 4 matrix $M$ by the inverse of the initial 4 matrix of the first scene $M_1^{-1}$ and the initial 4 matrix of the second scene $M_2$: $M-> M_2 M_1^{-1} M$. Since the second scene is using OrbitControls, I set the camera position equal to C and the orbit controls target to camera direction.
It seems pretty close but the two scenes are not quite synced correctly and I'm not entirely sure what I'm doing wrong here. I was wondering if anyone had any ideas?
I have an object created from importing an .obj
I want to clone this object and give it it's own coordinates.
To be more precise, I have a wall, for which I attach another object (a window) as a child. It all works fine when dragging the window along the wall. Now, when I want to clone the wall and rotate it 180 degrees, dragging the child along it's parent goes exactly the opposite way from the mouse movement.
I would like to reuse the same obj wall for all sides of my building.
You are describing two problems.
One is how to clone an object and give it a different position:
var wallCopy = wall.clone();
scene.add(wallCopy);
wallCopy.position.set( 10,20,30 );
The other question is moving an object in Object space instead of World space.
I.e. if you change the position.x of an object (the window) that is a child of a rotated object, the object will move relative to its rotated parent.
If you are building some sort of editor, you can use SceneUtils to make this easier...
https://threejs.org/docs/#examples/utils/SceneUtils
At the start of your edit, you would detach the window and attach it to the scene, using SceneUtils.detach... then apply your edit movement, and when the movement is done, attach it back to the wall using SceneUtils.attach.
SceneUtils takes care of keeping the visual transform consistent between the detach and attach operations between different places on the scene hierarchy.
edit: So a way to handle the case you describe in comments, without doing anything fiddly, is to just use more intermediate nodes. You can always set up your scaling and stuff on the child nodes, (You can always update thier matrices and then set their matrixAutoUpdate = false; if you're paranoid about the performance impact.}
Here's what I mean:
{"root", scale:1, children:[anchor1, anchor2]}
{"anchor1" scale:1, children:[wall]} {"anchor2" scale:1, children:[wall2]}
Then you can just manipulate the anchors or root to move things around, and the scaling of "wall" will be isolated to its own little sub tree.
How to dynamically change the text to another, without rebooting, that is, a dynamic change in the arrangement of particles
Partallan.init("PARTALLAN");
example: http://codepen.io/lateek35/pen/QbZdEB
As said in the comment section, you should tell us what you already try, and what did not work.
Anyway, here I'll explain you how I would have done it.
As you can see, each particle's object has a property ox and oy which correspond to the original anchor coordinate of the particle.
I think the step to follow is to:
1 - Re-use the writeText method to create a new text in an offcanvas and save the new coordinates.
2 - Tween the values ox and oy of each particles in the particles array to the new coordinates you retrieved in the previous step
The tricky point here is the number of particles already existing. It's all depend on the new text used, but I think it's impossible that you get the same amount of coordinate than the number of particles. So you will have to either add new particle in you array or delete some (and of course implement an animation for this, probably with a method like particle.die())
Hope it will help you
I have an issue regarding the Raycaster model. I understand the idea and the fact that it intersects meshes, which I can transform, but for example, if I create JS objects that have an inner THREE.Object3D that groups meshes (for their UI), how can I know when the corresponding instance of an object is clicked?
Imagine a button. This button has several characteristics and an inner _model that holds it's THREE.js graphical form (let's say a boxGeometry and a textGeometry that build this button). When the button is added to the scene it adds its buttonInstance.getModel() to the scene, and adds itself to a repository of objects to keep a reference to it.
If I wanted to click this button, I create a raycaster and get the intersecting objects from an array of "buttons" (Objects 3D or Meshes that represent this object).
But how do I fire an event or interact with the button instance itself? I have the mesh but can't get the idea on how to link it with the instance itself.
Any clues? I've searched a lot about raycasting in THREE, but all the examples relate to changing colors or positions of meshes.
_raycaster.setFromCamera(new THREE.Vector2(0,0), _camera);
_activeBtns = _raycaster.intersectObjects(_buttons, true);
_activeBtns[0].object.parent.position.set(curPos.x, curPos.y, curPos.z-.2); // alter position of the Object3D that holds textMesh and BoxMesh
But how do I even know which button is this one that has been 'clicked' if all buttons have two meshes and I dont see a way of idetifying them once they are in the scene?
Thanks
d
#uhara, #WestLangley. In the end I opted to 'bind' them by the uuid that the mesh has in the scene, since the abstract object has access to the mesh also.
I want to have a reflecting cube surface in a WebGL page with Three.js. It should resemble a mobile phone display, which reflects some light, but it still has to be black.
I have created an example of a reflecting cube (and also a reflective sphere) with detailed comments. The live version is at
http://stemkoski.github.com/Three.js/Reflection.html
with nicely formatted code at
https://github.com/stemkoski/stemkoski.github.com/blob/master/Three.js/Reflection.html
(This is part of a collection of tutorial examples at http://stemkoski.github.com/Three.js/)
The main points are:
add to your scene a second camera (a CubeCamera) positioned at the object whose surface should be reflective
create a material and set the environment map as the results of rendering from this second camera, e.g.
for example:
var mirrorCubeMaterial = new THREE.MeshBasicMaterial(
{ envMap: mirrorCubeCamera.renderTarget } );
in your render function, you have to render from all your cameras. Temporarily hide the object that is reflecting (so that it doesn't get in the way of the camera you are going to use), render from that camera, then unhide the reflective object.
for example:
mirrorCube.visible = false;
mirrorCubeCamera.updateCubeMap( renderer, scene );
mirrorCube.visible = true;
These code snippets are from the links I posted above; check them out!