tizzle / aframe-orbit-controls-component Goto Github PK

I've just tried upgrading one of my demo scenes to A-Frame 0.7, and looks like the orbit controls component no longer registers clicks and drags on the scene. See demo:

https://hazardu5.github.io/aframe-workshop/examples/09/finish/

It broke somewhere between commit aframevr/aframe@adabe78 and 0.7 release of A-Frame.

The below snippet in the update() method causes camera rotations near the desiredPosition to incorrectly match, preventing rotateTo() from firing:

if (!this.desiredPosition.equals(rotateToVec3)) {
        this.desiredPosition.copy(rotateToVec3);
        this.rotateTo(this.desiredPosition);
}

removing the !this.desiredPosition.equals(rotateToVec3) check results in more consistent behavior, with the exception that the camera will automatically rotate to face the very top of the model on load if rotateTo is not set.

Panning in the z-axis seems to have broken. Panning horizontally will only work in the x-axis.

Thanks for your efforts.

I just confirmed this happens on the example code as well. To replicated, just drop an element into the top of your scene, with individual nested assets or not. The orbit controls will no longer work, and no error messages are thrown in the console. Very strange, any ideas where to look for causes?

[Sorry the gif is in slowmo for some reason]

In README.md you point users to

http://cdn.rawgit.com/tizzle/aframe-orbit-controls-component/v0.1.8/dist/aframe-orbit-controls-component.min.js

but that gives a 404, and indeed it appears the latest version tag is 0.1.7. Fixing the URL to 0.1.7 works.

The component doesn't seem to work when I have an obj model with default material and wireframe mode set to true, the console logs this error message : "TypeError: o.position is undefined"

Hello, great component.

I'm unable to pan with my mouse. I get an error that says "Can't find variable: dollyDelta".

Thanks!

First of all: thanks for this plugin!

Then: I try to disable the Azimuth lock, to be able to freely rotate an object. I expected this to work, but it didn't:

          minPolarAngle: -Infinity;
          maxPolarAngle: Infinity;

Any ideas?

Expose camera FOV as parameter.

First off, thank you author for the aframe-orbit-controls-component repo.

My feature request is for desktop and mobile browser mousewheel and pinch and zoom support for zooming on the <a-sky> element.

Example:
I want to be able center <a-camera position=" 0 0 0" zoom="[value_here]"></a-camera>
This way I can zoom-in or zoom-out on any area of say a room that is set on the <a-sky src=""></a-sky>.

Thank you.

Hi there!
I'm glad I found this component. I have seen there are events corresponding to the start and the end of a drag. Is there a similar event emitted when the zoom changes?
I want to adjust my target once a certain zoom level is reached but couldn't make it run so far.
Thanks in advance
Florian

I'd like to add support for trackpads (just enter PAN mode on mousedown+event.isShift, since trackpads dont have 3 buttons).

Could you accept the outstanding PR so I can proceed. I don't want to start until there is a stable base to work from, since git merges are too complex for me to grok. thanks!

If the target is an entity nested inside another one, the objects world position should be used for orbiting instead of its local position

Hello,

We are using this aframe component in a proof of concept game that we’re working on, in which you control a spaceship in space, land on a planet and control a drone on the planet’s surface. You can check it out here: http://exoplanets.cc

We have an issue that we can’t figure out the solution for.
When the object is moving slowly (e.g. the spaceship or the drone), the camera takes a very long time to position itself behind it so the player can see what he is pointing at.

The best example for it is the spaceship controls. When you are moving slowly and point the spaceship somewhere, it takes time for the camera to position itself behind the spaceship. But when you press “Space” and fly fast, then the camera is quick and responsive and it feels right. The movement of the object directly affects the speed of the camera's position around it.

In order to solve this when you land on a planet and control the drone, we currently just locked the camera behind the drone, but it doesn’t feel right. It feels forced and the movement is too sharp.

Is there a way to speed up the camera’s movement to return to a certain position (in this case, behind the object) even if the object is moving slow or not moving at all?

Thank you.

@tizzle - I've been using a touchscreen laptop recently and touch events on the screen need to be handled differently. I think the correct way is to set the CSS attribute touchAction=none on the Aframe canvas (so that the canvas el doesn't use the OS-defined touch gestures) then change the listeners from mousedown, mouseup to pointerdown, pointerup.

This can all be wrapped in if (window.PointerEvent) for backwards compatibility, though basically all current browsers support pointer events.

I have this as a lower-priority item to do. Just wanted to flag it here.

I would like to enable the orbit-controls component only when I click on a 3D object, but if I use setAttribute ‘orbital-controls’ on camera, the component is not working. The component it works if I add it on camera from the beginning, but I can’t set it disable and to activate it only when I click on an object. Can you help me please with a solution? Thank you!

BTW, as far as I understood the RawGit CDN, files are cached permanently based on their URL, and are never refreshed. I think this means that any web user who visits an AFrame page that uses the CDN hosted version of your orbit-controls with this URL
cdn.rawgit.com/tizzle/aframe-orbit-controls-component/master/dist/aframe-orbit-controls-component.min.js

will never see an updated ".min.js" file, since even if the file changes upstream it is permanently cached on the CDN edge nodes.

I believe the solution is to add tags to your repo then use "/vX.Y.Z/" instead of "/master" in the URL for the CDN.

Other CDNs have a mechanism to invalidate the edge node caches, but rawgit does not offer this.

To introduce versioning you can use git tags

by default git push does not upload tags, so to get tags to GitHub you must also do:
git push origin --tags

health warning: I am not 100% sure about all this.

When I switch to VR mode my cam wont around the object anymore when looking around. Is that the right behaviour? I need to be able to look around an object in vr mode.
I tried it with: autoVRLookCam:false. Does not work when looking around. If i touch the screen with fingers it is working.

Hi, I am a beginner using A frame, JS and HTML. I need to load a 3D model on a webpage using JS(as the path for loading the model will come from an XML) and the 3D model cab be rotated, panned and zoomed. Trying to achieve this using orbit controls.

I had set the 3D models position so that the model is on the center of the webpage. That was working fine until I added orbit controls. Now changing camera's or model's position affects its distance from screen rather than x-y position.

Also, my model's pivot is in center, but when I use orbit controls its pivot is at the bottom.

Here's my JS code:

var scene = document.createElement("a-scene");
scene.setAttribute("id","scene1");
scene.setAttribute("cursor","rayOrigin: mouse");
scene.setAttribute("vr-mode-ui","enabled:false");
scene.setAttribute("embedded","true");
document.body.append(scene);

var entity_3dModel = document.createElement("a-entity");
entity_3dModel.setAttribute("gltf-model",'url('+path[0].innerHTML+')');
entity_3dModel.setAttribute('scale', "3 3 3" );
entity_3dModel.setAttribute("id", "Model");
entity_3dModel.setAttribute("modify-materials", "");
entity_3dModel.setAttribute("click", "");
entity_3dModel.setAttribute("position","0 -3 0");
entity_3dModel.setAttribute("rotation","-30 180 0");
scene.appendChild(entity_3dModel);

var entity_camera = document.createElement("a-entity");
scene.appendChild(entity_camera);
entity_camera.setAttribute("id","camera");
entity_camera.setAttribute("camera","active","true");
entity_camera.setAttribute("camera","fov","100");
entity_camera.setAttribute("camera","zoom","0.5");
entity_camera.setAttribute("camera","far","1000");
entity_camera.setAttribute("camera","near","0.005");
entity_camera.setAttribute("orbit-controls","enabled: false");
entity_camera.setAttribute("position","0 3 -2");

        entity_camera.setAttribute("orbit-controls","enabled: true");
        entity_camera.setAttribute("orbit-controls","autoRotate: false");
        entity_camera.setAttribute("orbit-controls","target: #Model");

And HTML code:

#scene1{
position:absolute;
left:0%;
top:0%;
height: 100%;
width: 100%;
}*/

Kindly help.

I run an embeded a-frame scene using orbit controls. I am facing an interaction issue reagrding zoom:
Once the scene is loaded a user has to click on the scene to make zoom (mouse weel) work. I would like to get the zoom function without the initial click.
I tried to programmatically dispatch a click event – no luck with this approach. For comparison I attached the wsad-controls component. This one recognizes the key inputs without the initial click event.

Any idea on how to make this work?

HI, I'm trying add zoom buttons to my scene with orbit controls, so I need to programmatically increase/decrease the distance of the orbitcontrols camera.

The issue is that the distance property doesn't seem to do anything, not the initial value, nor the programmatically updated value.

I've created a codepen to illustrate the issue.
https://codepen.io/anon/pen/zpqqEQ

Is there something I overlooked, or is the distance property malfunctioning?

I have a use case where I dynamically set the position of the camera after the scene and a model is loaded. I realised that the orbit controls component still thinks that the camera is at the original position when the component was initialised. So the camera jumps back to its original position because of
this.dolly.position.copy(this.object.position);
in the init function.

I did a workaround and added this line of code to the update function and trigger an update event by calling camera.setAttribute('orbit-controls', 'distance', '2'); in order to get the dolly position updated with the new values.

Would you consider putting this.dolly.position.copy(this.object.position); into the update function or do you have a better solution?

Thanks!

I copy and pasted the code on this package's main screen, at the bottom. And then added my cursor animations in (they work on my original code I have commented out, while trying this package out).

Zoom-in
Zoom-out

Both do not work on the latest builds of supported Windows PC and Samsung Smartphone browsers.

  <a-entity id="camera"
          camera="fov: 80; zoom: 1;"
          position="0 0 0"
          orbit-controls="
			  invertZoom: true;
			  autoRotate: false;
			  target: #target;
			  enableDamping: true;
			  dampingFactor: 0.125;
			  rotateSpeed:0.25;
			  minDistance:3;
			  maxDistance:100;"
          mouse-cursor="" 
          rotation="" 
          scale="" 
          visible="" 
          look-controls="">
			<a-entity cursor="fuse: true; fuseTimeout: 500"				  	  
			  position="0 0 -50"
			  geometry="primitive: ring"
			  material="color: white; shader: flat"
			  scale="1 1 1">
				<a-animation begin="mouseenter" easing="ease-bounce" attribute="scale"
				fill="backwards" from="0.5 0.5 0.5" to="0.5 0.5 0.5"></a-animation>
					<a-animation begin="cursor-fusing" easing="ease-bounce" attribute="scale"
					fill="forwards" from="0.5 0.5 0.5" to="0.5 0.5 0.5"></a-animation>
						<a-animation begin="mouseleave" easing="ease-bounce" attribute="scale"
						fill="forwards" from="0.5 0.5 0.5" to="1 1 1"></a-animation>
			</a-entity>
		</a-entity>
       <!-- Camera -->

This is a bug that happens when you toggle between two cameras. Once the orbital camera is paused and played again, you lose the ability to pan, zoom, etc, because the event listeners are not added on play.

When you add a sound to the scene, the ability to dollyIn/Out breaks. Using A-Frame 0.3.2.

Trying to dolly out: WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled.

Thanks for your work, really appreciated :)

in the component play function, one can find the following code

this.sceneEl.addEventListener('renderstart', this.onRenderTargetLoaded, false);
// ...
// and later ...
onRenderTargetLoaded: function () {
	console.log('component onRenderTargetLoaded')
	this.sceneEl.removeEventListener('renderstart', this.onRenderTargetLoaded, false);
	this.canvasEl = this.sceneEl.canvas;
	this.addEventListeners();
},

But if play is called after renderstart is triggered, then onRenderTargetLoaded is never called, and .addEventListeners either.

this.sceneEl.addEventListener('renderstart', this.onRenderTargetLoaded, false);
// test if renderstart has already been triggered
if( this.sceneEl.renderStarted ){
	this.onRenderTargetLoaded()
}

• https://github.com/aframevr/aframe/blob/master/docs/core/scene.md#properties
• https://github.com/aframevr/aframe/blob/master/docs/core/scene.md#events

Thanks

I'm seeking an option for inverted zoom, much like the aframe inspector.

Many users will find an inverted zoom much more intuitive.

Many thanks.

Hi. Two possibly related questions.

1. How can I set a camera FOV when using orbit-controls-component?
2. What is minZoom and maxZoom for? The term zoom is used in enableZoom and zoomSpeed, but I can't get minZoom and maxZoom to do anything, since mouse-scroll is actually dolly-ing the camera. In the code, it seems all zoom-related actions (by mouse and by touch) are handled via dolly-ing. The limits minDistance and maxDistance are working fine here, but I need actual zoom.

Am I missing something? Thanks.

Hi,

I'd like to make an addition to this, that this controller morphs into a look-control on the enter-vr event.

Currently I have written a camera juggler component to handle this switchover:
https://github.com/morandd/dans-aframe-camera-juggler/issues

Since look-control is built in to AFrame, I think it should be safe that orbit-controls morphs itself into look-controls when entering VR. I think I can code that up and submit a PR. Any thoughts/reactions before I begin?

On a current project we are trying to implement the view of an object inside of VR using the orbit camera. The problem is on a mobile device the gyroscope doesn't work or is not implemented. If there is a fix for this we have not found one.