I have this project:
my codepen
I want to be able to move forward when the user walks, so it feels like they are walking thru the floor plan in VR as they are in real life.
my goal is get the geolocation of the user and show them the room matching theirs location and have them walk around the room while viewing the AR on the phone they would see paintings on the walls.
my challenges are:
walk in real life and move in VR (right now I have it auto walking forward in the meantime)
var speed = 0.0;
var iMoving = false;
var velocityDelta;
AFRAME.registerComponent("automove-controls", {
init: function() {
this.speed = 0.1;
this.isMoving = true;
this.velocityDelta = new THREE.Vector3();
},
isVelocityActive: function() {
return this.isMoving;
},
getVelocityDelta: function() {
this.velocityDelta.z = this.isMoving ? -this.speed : 0;
return this.velocityDelta.clone();
}
});
capture the user geo location so the moment they open the site they are placed relative to their location on the floor plan
this is my first attempt so any feed back would be appreciated.
As far as i know argon.js is more about geoposition than spatial/marker based augmented reality.
moreover It's quite worrying, that their repo for aframe was not touched for a while.
Argon seems like a library for creating scenes in certain points around the user, even their examples base on positioning stuff around, reason being the GPS/phone accelerometers are way too bad to provide useful data for providing spatial positioning. Thats why VIVE needs two towers, and other devices at least a camera/IR device, to get information about the HMD device.
Positioning the person inside a point depending where are they in a room is quite a difficult task, You would need to get a point of reference and position the user accordingly. It seems impossible, since the user can be anywhere in the world.
I would try to do this using jerome-etienne's marker based AR.js. The markers would be the points of reference You need, and although image processing seems like a difficult task, AR.js is surprisingly stable with multiple markers, which help in creating complex scenes.
The markers seems like a good idea, for they can help You with the positioning, moreover simple scenes have no problem with achieving 60+fps, making the experience quite comfortable.
I would start there, since AR.js seems to be updated frequently.
Related
So i was trying to create a location display buffer which isn't available in scene map, so for this
i created a triangle symbol and updated it so that every time location changed the graphic has to be erased and placed at new position like this
prevLocX=camera.location.X// initialized at start
prevLocY=camera.location.Y
newLocX=camera.location.X
newLocY=camera.location.Y
callCurrentLocation();
CallCurrentLocation()
{
if prevlocX!=newlocX && ...
{
go.Graphics.Clear();
Mappoint mp1=new Mappoint(newLocX,newLocY,SpatialReferences.wgs84);
--
--
go.graphics.add(msm1);
PrevlocX=newLocX;
PrevLocY=newLocY;
}
i know this seems redundant and inefficient but this was the best way i could think of please see if it can be made better
Most efficient would be to keep the overlay and graphic instances and just update the geometry on the graphic with a new point each time.
Before question,I seached many places, I find some similar idea but without my solution.And my question can be also described as how to recalculate the model's uv to fix the panorama designed for six faces skybox.
Recently,I came upon a unique way to get fluent 3D roaming experience on matterport's Official network https://matterport.com/gallery/
I just want to know how did they do that?Their product is very fluent when swich the panorama picture.
After I roaming many times,I found the secret. I realized that the panorama carrier they use is not box or sphere,but is the object they show first!The evidence is that when switch the point,the object such as chair and table would have their own shadow(one chair have two image one stand up and the other one lie on the floor
With the object in panorama paste on their own correspond object and with depth information the roaming switch become more fluent (As for why they do not use the object directly ,I think because of the limited hardware,Many irregularity faces which get from scanning equipment cannot be use directly
And I want to use this idea in my project ,I have a group of six panorama which can paste on a boxGeometry perfectly,and I just want to paste them on model.but I stuck in project 360 degree.Yes I just find how to project one direction but I cannot project the remaining five.
var _p=BufferGeometry.attributes;
for (var i = 0; i < _p.position.count; i++){
var uvtempbeforeconvert= ( new THREE.Vector3(_p.position.array[3*i],_p.position.array[3*i+1],_p.position.array[3*i+2]) ).clone().applyMatrix4(houseObject.matrixWorld).project(camera1)
//use the worldvertices to get its screen coordinate
if(uvtempbeforeconvert.x<1&&uvtempbeforeconvert.x>-1 && uvtempbeforeconvert.y<1 &&uvtempbeforeconvert.y>-1) {
VerticesArray1.push(_p.position.array[3*i],_p.position.array[3*i+1],_p.position.array[3*i+2]);uvArray1.push(uvtempbeforeconvert.x*0.5+0.5,uvtempbeforeconvert.y*0.5+0.5);
Yes,I success in calculating one direction.BUT I cant deal with the triangle faces which occupy two more view frustum,like a face at the edge of the box.
How should I deal with this problem?Or I run in the FALSE direction at first?Which direction should i run in ?
After asking many people,I just find that I need to usd shadermaterial in threejs ,and use a function named cubetexture,samplercube.With that I can get the pixel color what I need!
This answer provides a nice way to make smooth animations in SciLab. I now have to write a simulation of a body attached to two strings (and therefore its movement regarding some additional forces).
The code in the link works well to render movement of a single point and, unfortunately, I didn't manage to make an animation of a point + two lines using this method. If someone is curious, I tried this code to do it:
frametime=(tk-t0)/Nt//defining the waitnig time
plot(Y(1,1),Y(2,1),"o")//plotting the point
plot([0;Y(1,1)],[0;Y(2,1)],style=1)
plot([D;Y(1,1)],[0;Y(2,1)],style=1)//plotting the two initial lines
h1_compound = gce();
h_point=h1_compound.children
h_point.mark_size = 20;
h_point.mark_background = 2;
h_line1=h_compound.children
h_line2=h_compound.children
//h_axes = gca();
//h_axes.data_bounds = [0,-1;10,1];
realtimeinit(frametime);
for i=1:Nt//my vectors have Nt points
realtime(i);//wait "frametime" seconds before drawing the new position
h_point.data=[Y(1,i),Y(2,i)];
h_line1.data=[[0;Y(1,i)],[0;Y(2,i)]]
h_line2.data=[[D;Y(1,i)],[0;Y(2,i)]]
end
The question is: is there any way to make an animation of three shapes without making axes blink (as it is with the window refreshment) or other wierd stuff?
Since you didn't create a MCVE I can't reproduce your exact problem. But you may try to add drawlater(); before, and drawnow(); after your data modification to see if it does help with blinking or not.
Or you may get much better looking result by saving your plots in every round with xs2gif and assemble the animation with another gifmaker progam (there are free online sites to do this, however with some limitations). If you need to present your result, you should do this step anyway.
I searched around in SO to see if someone had a jsbin of the likes to show an example of this question so please forgive if this seems over asked.
Using r67 & r68
I have a simple THREE.Line named 'laser' that I move in some fashion, in this example I move and rotate it by mouse. Where ever the laser is I want to get the world cords of its vertices [0,1] so later I can attach a ray caster to those world cords.
I assume i'm just missing a core function that i'll dig through the source code and try to find. Hope this helps someone else in the future when I can update the jsbin.
Right now I just get its starting positions of 0,20 despite the matrix updates and such.
In the jsbin I left in some other commented out tries of code from other posts online.
Update: might have figured it out!
function render(){
// test finding the lasers vertices
laser.updateMatrixWorld(true);
// move laser
laser.rotation.z = MousePosition.x /50;
laser.position.x = MousePosition.x;
laser.position.y = MousePosition.y;
// which of these is needed?
laser.matrixWorldNeedsUpdate = true;
lasergeo.verticesNeedUpdate = true;
// --> this line looks to work
point1 = laser.localToWorld( lasergeo.vertices[1].clone() );
// console.log("point1", point1);
}
old
http://jsbin.com/yuqocemigacu/1/edit?html,js,console,output
new:
http://jsbin.com/yonaquzufeje/1/edit?html,js,output
In the new the refresh update skips the connection but thats another issue for another day.
Leaving this open cause I don't know if I have the correct method of doing this, could be do 900 matrix calculations and don't know it yet.
I'm loading an .obj file into a Object3D object. That's working well and I can see it on the screen. However, I would like to create the impression of spinning sprites (fireflies, lightning globes, that sort of thing) at certain points above the object.
I've been looking over the three.js documentation on sprites and other things, and am very impressed with the capabilities. But I need a little help on how to create a standalone sprite 'globe' as it were, with sprites flying about in their own local coordinate system, then moving that standalone 'globe' to a point above the obj file. Could someone help me get started with this? (I guess it comes down to, how do you position one object relative to another in threejs?)
You should be able to simply attach the spinnning sprites to using the add() function:
//create an empty 'container'/Object3D
var spinningSprites = new Object3D();
//add elements to it:
for(var i = 0 ; i < numSprites; i++) spinningSprites.add(yourParticleObjectInstsance);
//lastly add the whole container to the loaded model:
youLoadedModel.add(spinningSprites);
The above is an example, you would proably use different variable names, etc., but the idea is simple: use add().