I have put some grids into my scene with the gridhelper. However, it doesn't always remove itself from the scene when I delete it.
Here is the code where I go through a delete the grids and the axis. Why doesn't this remove the grids from the scene? Sometimes it works and sometimes it doesn't.
for (var ObjID in this.Scene.__objects)
{ if (this.Scene.__objects[ObjID] instanceof THREE.GridHelper){ this.Scene.remove(this.Scene.__objects[ObjID]); this.Scene.__objects.splice(ObjID,1); }
if (this.Scene.__objects[ObjID] instanceof THREE.AxisHelper){ this.Scene.remove(this.Scene.__objects[ObjID]); this.Scene.__objects.splice(ObjID,1); }
}
Give the GridHelper a name when you create it:
var grid = new THREE.GridHelper(1000, 5);
grid.position.set(45,0,25);
grid.name = "GridHelper";
scene.add(grid);
Then you can call:
scene.remove(scene.getObjectByName("Grid"));
Or if you change your grid Object Variable to a global variable you can just use:
scene.remove(grid);
Your Code is wrong and don't works everytime because the Grid-Center (obj.geometry.BoundingSphere.center.x / y / z) is'nt always in the scene, so the If-query won't work right all time.
Related
I'm rather new to threejs, so what I'm doing might not be the most efficient way.
I have an object in AR on a mobile device and I want to know if I intersect with it when touching on the screen.
I use the following code to generate the raycast, and it works initally.
const tempMatrix = new THREE.Matrix4();
tempMatrix.identity().extractRotation(this.controller.matrixWorld);
this.raycaster.ray.origin.setFromMatrixPosition(this.controller.matrixWorld);
this.raycaster.ray.direction.set(0, 0, -1).applyMatrix4(tempMatrix);
However, I have the ability to reposition the object (i.e. reset the position so the object is in front, relative to the current camera direction and position) by moving and rotating the whole scene.
After the repositioning, the raycasting is completely offset and is not casting rays anywhere near where I touch the screen.
Repositioning is done like this (while it works, if there's a better way, let me know!) :
public handleReposition(): void {
const xRotation = Math.abs(this.camera.rotation.x) > Math.PI / 2 ? -Math.PI : 0;
const yRotation = this.camera.rotation.y;
this.scene.rotation.set(xRotation, yRotation, xRotation);
this.scene.position.set(this.camera.position.x, this.camera.position.y, this.camera.position.z);
}
How can I achieve to raycast to the correct new location?
Thanks!
Assuming this.scene is actually the main threejs Scene, it's usually a bad idea to change its rotation or position, since it will affect everything inside the scene, including the controller. I'd suggest moving your object instead, or add your object(s) to a Group and move that.
The logic of my code is such as the object3D which are included in the scene, on double click get added with a Line (with BufferGeometry).
I am getting the object3D by using Raycaster intersect.
The way I am adding it is:
scene.add( newLine );
newLine.updateMatrixWorld();
THREE.SceneUtils.attach( newLine, scene, intersects[0].object );
The following is my mousemove code which helps me moving the object3D in XZ plane.
function onDocumentMouseMove( event ) {
var mouseX = ( event.clientX / window.innerWidth ) * 2 - 1;
var mouseY = - ( event.clientY / window.innerHeight ) * 2 + 1;
var mouse = new THREE.Vector2( mouseX, mouseY );
raycaster.setFromCamera( mouse, camera);
if (selection) {
var intersects = raycaster.intersectObject( plane );
selection.position.copy( intersects[0].point.sub( offset ));
}
}
Nothing complicated. Simple code. And the movement is happening well. I can easily move the object3D around.
When I am checking the console for change in position of object3D on grabbing and moving it, it is changing which is what should happen. But I do not see any change at in the position of the Line, i.e., newLine as in my code. The issue is unless I am calling .updateWorldMatrix() as well which as per THREE docs, should automatically be called in each render cycle. Still I am calling that. Why am not able to get the position of my newLine when clearly its position is moving along with the object3D when I am dragging object3D around?
Why is it needed? Unless the position of the line can show as changing, I can't update an HTML element, which I am attaching to the end of that line. Hence, the position change is imperative. Gif attached which shows, when the cube/ sphere/ cone is moved, render(..) gives me changing position log of that. However, when logging the same for the Line it doesn't change. If any can help me with the issue, it will be amazing. Thanks much.
EDIT
When I am attaching the HTMLElement directly to parent object3D it shows expected result. It moves when I move object3D. This is because as said its position is being updated continuously in the render cycle when I move it.
Gif:
The line's .position attribute is not changing because its local position remains the same. Since the line is attached to the parent, its relative position to the parent doesn't change, only the global position does. To get the global position of line, you can use the .getWorldPosition() method:
// Declare var to store world position
var worldPos = new THREE.Vector3();
// Get world position of line
line.getWorldPosition(worldPos);
// Now global position is stored in Vec3
console.log(worldPos);
I'm confused.
I've made a group of 10 sprites and added them to a THREE.Object3D() called fireworkGroup. I have another Object3D called explode. The tween loops through the sprites changing them from their initial position to explode.position.
for ( var i = 0; i < fireworkGroup.children.length; i ++ )
{
explode.position.x =(Math.random() - 0.5)*4;
explode.position.y =4;
explode.position.z =2;
var tweenLaunch = new TWEEN.Tween(fireworkGroup.children[i].position).to(explode.position, 4000).easing( TWEEN.Easing.Quartic.In);
tweenLaunch.start();
}
The tween is moving all the sprites from their start position to the same end position. So I thought this might be because "tweenLaunch" is being overwritten with a different explode.position each time as the tween is rendered so I'm only seeing the last one created in the loop. When I refresh the page they do all move to a different position, consistent with the Math.random().
But then why do all the sprites move to the explode.position? If "tweenLaunch" is being overwritten then why is it not moving only the last sprite?
Is it possible to have a loop with a tween in it that also changes?
Many Thanks.
I've managed to work out what was wrong by reading around the subject on Stackoverflow questions and answers, looking at a great particle example by stemkoski then trial and error.
view-source:http://stemkoski.github.io/Three.js/Particles.html
I used console.log to look at explode.position that I was using as the second position in the tween. It wasn't holding the values I wanted (a different Math.random on each loop).
So I created fireworkAttributes:
fireworkAttributes = { startPosition: [], explodePosition: [], nextPosition: [] };
and then cloned the sprite position in the function that created the sprites using:
fireworkAttributes.explodePosition.push( sprite.position.clone() );
then looped it in it's own function:
for (var i = 0; i < fireworkGroup.children.length; i++)
{
fireworkAttributes.explodePosition[i].x = (Math.random() - 0.5)*4;
fireworkAttributes.explodePosition[i].y = 4;
fireworkAttributes.explodePosition[i].z = 2;
}
then changed the code in the original question to:
for ( var a = 0; a < fireworkGroup.children.length; a ++ )
{
//need to use this new object as tweening to fireworkAttributes.explodePosition[a] does not work
explodeSite.position = fireworkAttributes.explodePosition[a];
var tweenLaunch = new TWEEN.Tween(fireworkGroup.children[a].position).to(explodeSite.position, 4000).easing( TWEEN.Easing.Quartic.In);
tweenLaunch.start();
}
There may be a more elegant way to do this and I will be working to clean up the code where possible but this does work.
Is there a way to continously plot changing array data? I've got a ILLinePlot to graph the line to changing data on a button event, but I would like to make it continuous.
while (true)
{
float[] RefArray = A.GetArrayForWrite();
//RefArray[0] = 100;
Shuffle<float>(ref RefArray);
Console.Write(A.ToString());
scene = new ILScene();
pc = scene.Add(new ILPlotCube());
linePlot = pc.Add(new ILLinePlot(A.T, lineColor: Color.Green));
ilPanel1.Scene = scene;
ilPanel1.Invalidate();
}
The problem I'm running into is that the loop runs, and i can see updates of the array, but the ILPanel does not update. I'm thinking maybe it's because the main loop can't be accessed due to this infinite loop, so I put it in its own thread as well, but it's still not rendering as I hoped...
As Paul pointed out, there is a more efficient attempt to do this:
private void ilPanel1_Load(object sender, EventArgs e) {
using (ILScope.Enter()) {
// create some test data
ILArray<float> A = ILMath.tosingle(ILMath.rand(1, 50));
// add a plot cube and a line plot (with markers)
ilPanel1.Scene.Add(new ILPlotCube(){
new ILLinePlot(A, markerStyle: MarkerStyle.Rectangle)
});
// register update event
ilPanel1.BeginRenderFrame += (o, args) =>
{
// use a scope for automatic memory cleanup
using (ILScope.Enter()) {
// fetch the existint line plot object
var linePlot = ilPanel1.Scene.First<ILLinePlot>();
// fetch the current positions
var posBuffer = linePlot.Line.Positions;
ILArray<float> data = posBuffer.Storage;
// add a random offset
data = data + ILMath.tosingle(ILMath.randn(1, posBuffer.DataCount) * 0.005f);
// update the positions of the line plot
linePlot.Line.Positions.Update(data);
// fit the line plot inside the plot cube limits
ilPanel1.Scene.First<ILPlotCube>().Reset();
// inform the scene to take the update
linePlot.Configure();
}
};
// start the infinite rendering loop
ilPanel1.Clock.Running = true;
}
}
Here, the full update runs inside an anonymous function, registered to BeginRenderFrame.
The scene objects are reused instead of getting recreated in every rendering frame. At the end of the update, the scene needs to know, you are done by calling Configure on the affected node or some node among its parent nodes. This prevents the scene from rendering partial updates.
Use an ILNumerics arteficial scope in order to clean up after every update. This is especially profitable once larger arrays are involved. I added a call to ilPanel1.Scene.First<ILPlotCube>().Reset() in order to rescale the limits of the plot cube to the new data content.
At the end, start the rendering loop by starting the Clock of ILPanel.
The result is a dynamic line plot, updating itself at every rendering frame.
I think you need to call Configure() after any modification of a shape or its buffers. Use the BeginRenderFrame event to do your modifications and you should not add infinitely many shapes / new scenes. It is better to reuse them!
Let me know, if you need an example...
My ray.intersectObjects works really well with the objects in my scene until I dynamically modify the geometry of the object. Although the renderer is showing the objects as being modified (vertices moved and faces changed), when an intersect is tried on the modified object, it produces strange results. I need the intersect to work even on the modified geometry!
To help debug and track how the intersect is working in my scene, I've added a function: makeMiniSphere(). This makes a new sphere object in the scene at the point where the intersection occurs. Using this, you can see that after the cube is modified, sometimes the intersect hits the cube and sometimes it goes right through (mostly the faces that have been modified). It isn't a random problem, but the more you click around the modified cube, the more you can see a pattern develop. It is almost as if the renderer for the visuals of the scene know which direction the cube was modified, but the ray.intersectObjects thinks that it has been modified in a different direction!
Here is a link to the test website: http://www.littledrop.net/html/cadiverse/HelloWorld.html
Directions to show problem:
Left click on cube to show intersect points. Mini spheres will be created wherever Three.js sees an intersect. The color of the selected object will change to yellow if not already selected.
Click on any face of the cube. This will A. Turn it yellow if it isn't already yellow. B. It will select the face of the cube, although the selected face won't look any different from the rest of the cube.
Press the "Right" arrow key to move the selected face to the right. This will dynamically change the geometry of the cube.
Now try to click on the cube--especially in the area that it has been modified. Again the Mini spheres will show where the software thinks the intersects are occurring.
Here is the intersect code:
function onDocumentMouseDown (event)
{
// the following line would stop any other event handler from firing
// (such as the mouse's TrackballControls)
//event.preventDefault();
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
document.getElementById('message1').innerHTML = window.innerHeight;
var isinworkingarea = window.innerHeight-menubarh;
if (event.clientY<=isinworkingarea)
{
var vector = new THREE.Vector3( mouse.x, mouse.y, 1 );
projector.unprojectVector( vector, camera );
//var ray = new THREE.ReusableRay();
var ray = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );
// create an array containing all objects in the scene with which the ray intersects
// use this to select anything in the scene:
var intersects = ray.intersectObjects( scene.children );
if ( intersects.length > 0 )
{
if (cadjectNow)
cadjects[cadjectNow].material.color.setHex(cadjects[cadjectNow].oldColor);
if (intersects[0].object.cadNum)
cadjectNow = intersects[0].object.cadNum;
SELECTEDface=intersects[0].face;
if (cadjectNow)
cadjects[cadjectNow].material.color.setHex( selectColor );
document.getElementById('message1').innerHTML = cadjects[cadjectNum].cadNum;
///// Information about selected /////
var facestring = intersects[0].face.a + " " + intersects[0].face.b + " " + intersects[0].face.c;
if(intersects[0].face instanceof THREE.Face4)
{
facestring=facestring + " " + intersects[0].face.d;
}
copyGeometry=cadjects[cadjectNow].geometry;
//makeCopy(copyGeometry,cadjects[cadjectNow].position.x,cadjects[cadjectNow].position.y,cadjects[cadjectNow].position.z);
makeMiniSphere(intersects[0].point.x, intersects[0].point.y, intersects[0].point.z);
document.getElementById('message1').innerHTML = facestring;
//document.getElementById('message2').innerHTML = cadjects[cadjectNow].geometry.vertices[SELECTEDface.a].x + " " + cadjects[cadjectNow].geometry.vertices[intersects[0].face.a].y + " " + cadjects[cadjectNow].geometry.vertices[intersects[0].face.a].z;
document.getElementById('message2').innerHTML = intersects[0].point.x + " " + intersects[0].point.y + " " + intersects[0].point.z;
}
}
}
Here is the modify code:
if ( keyboard.pressed("right"))
{
document.getElementById('message1').innerHTML = mouseMode;
cadjects[cadjectNow].geometry.vertices[SELECTEDface.a].x+=10;
cadjects[cadjectNow].geometry.vertices[SELECTEDface.b].x+=10;
cadjects[cadjectNow].geometry.vertices[SELECTEDface.c].x+=10;
if(SELECTEDface instanceof THREE.Face4)
{
cadjects[cadjectNow].geometry.vertices[SELECTEDface.d].x+=10;
}
cadjects[cadjectNow].geometry.verticesNeedUpdate = true;
cadjects[cadjectNow].geometry.elementsNeedUpdate = true;
cadjects[cadjectNow].geometry.normalsNeedUpdate = true;
}
Thank you to everyone who has posted past questions and given the answers. By perusing past questions, I've been able to get this far---so you guys have already been a great help. Thanks in advance for help on this one. (As this is my first question to post here, any suggestions on how to better present a question are also more than welcome.)
Update (3/21/13)--I've migrated to r57 as suggested and the updated code is shown above. I've also debugged it so that it is working at least as well as it was before. So now the geometry is still visually being changed dynamically, but the intersect is not detecting the change properly. Thanks #WestLangley for the encouraging posts so far.
Now working correctly. Here is how I did it (thanks to Westlangley for guidance).
Upgrade Three.js to latest revision (r57 from r49).
Migrate my present code to work with r57.
Remove all former code attempting to update the object.
Added the following code to "modify object" section:
cadjects[cadjectNow].geometry.verticesNeedUpdate = true;
cadjects[cadjectNow].geometry.normalsNeedUpdate = true;
cadjects[cadjectNow].geometry.computeFaceNormals();
cadjects[cadjectNow].geometry.computeVertexNormals();
cadjects[cadjectNow].geometry.computeBoundingSphere();
I was having a similar issue with a modified BufferGeometry.
I got raycasting working by calling geometry.computeBoundingSphere() and geometry.computeBoundingBox() after modifying the array with vertex positions.
Setting verticesNeedUpdate was not needed.
Running r112.