The target(object) has a fixed rotate animation. So i'm trying to use OrbitControls for rotating camera around the target. Here is the standard set:
this.control = new OrbitControls(this.camera, this.renderer.domElement);
this.control.rotateSpeed = 0.3; // control the rotate speed
this.control.autoRotateSpeed = 0;
this.control.enableZoom = false;
this.control.enablePan = false;
this.control.enableDamping = true;
this.control.target.set(0, 0, 0);
I also can use smooth moving
this.control.update()
It works well with mousedrag (mousedown and start to move).
My goal is only that i do not use "mousedown". I just want my target to rotate by mousemove directly.
I already read the docs https://threejs.org/docs/#examples/en/controls/OrbitControls
But i can not find for controlling "mousedown, mousemove, mouseup".
Isn't it impossible?
Related
When I finish playing an animation with camera movement, I want the cameraContols to pick up where the clamped animation left off. But everything I have tried so results in the camera jumping to a different location. (The lookAt position seems to be OK.)
I have tried capturing the animeCamera’s attributes and resetting them after replacing the controls’ .camera - but no success.
Any suggestions or examples to look at?
AnimationMixer = new THREE.AnimationMixer(gltf.scene);
var that = this;
AnimationMixer.addEventListener('finished', function(e){
// replace default camera with animation camera
that.controls.camera = animeCamera;
that.controls.update();
that.controls.enabled = true;
});
How can i achieve THREE.js pointerlock controls example functionality but move around programmatically (values from accelerometer device) instead of mouse movement?
THREE.PointerLockControls (next: Module) works this way:
Module makes a construction yawObject -> pitchObject -> camera (pitchObject is a child of yawObject and camera becomes a child of pitchObject).
You add yawObject (which you could get from Module with yourControls.getObject() function) to your scene (to keep transforms updated).
Module adds 'mousemove' event listener and updates yawObject.rotation.y and pitchObject.rotation.x when you move mouse if yourControls.enabled !== false.
Next if you are interested in actually locking cursor you could do it in your client code as in example.
And to update your camera position you could manipulate yawObject's position (yourControls.getObject().position).
So to manipulate controls without mouse you could setup Module this way:
camera.position.set(0, 0, 0);
camera.rotation.set(0, 0, 0); // THREE.PointerLockControls does this too
var myControls = new THREE.PointerLockControls(camera);
var controlsObject = myControls.getObject();
controlsObject.position.set(myEntryX, myEntryY, myEntryZ); // set starting point
controlsObject.rotation.y = myEntryYaw; // rotate yaw obj
controlsObject.children[0].rotation.x = myEntryPitch; // rotate pitch obj
scene.add(controlsObject);
and then keeping myControls.enabled = false manipulate controlsObject.position, controlsObject.rotation.y, controlsObject.children[0].rotation.x.
I am trying to manually tween camera rotation to 0,0:
camera.object3D.matrixAutoUpdate=false;
var orgrot = { x : camera.object3D.rotation.x, y: camera.object3D.rotation.y };
var target = { x : 0, y: 0 };
var tween = new TWEEN.Tween(orgrot).to(target, 500);
tween.onUpdate(function(){
camera.object3D.rotation.x= this.x;
camera.object3D.rotation.y= this.y;
camera.object3D.updateMatrix();
});
The tween works as expected, but I am loosing mouse control over camera.
To get it back I am setting matrixAutoUpdate to true
tween.onComplete(function(){
document.querySelector('#camera').object3D.matrixAutoUpdate=true
});
But after that, the camera rotation changes back to original position (before tween ) and I would like to keep 0,0. What I am missing ? thanks
UPDATE Below is a version using aframe only without going into threejs objects
I think the problem is camera look-control component
When enabled - I can not animate camera rotation or even setAttribute.
I have to disable it first - than fire animation and than enable it again.
But the problem is, when I enable it again:
camera.setAttribute ('look-controls-enabled',"true")
camera goes back to original rotation ( state before reset animation ).
Similar problem when using matrixAutoUpdate=false/true
Here is my pen http://codepen.io/anon/pen/dMjrWd
If you rotate left 30deg, it will fire resetCamera animation - it works as intended.
But only when look component is disabled. If I enable it again in "animationend" event - the rotation will go back to original state and trigger resetCamera again and again
You really should not have to mess with matrixAutoUpdate.
But given that you are, try the following to force the position, quaternion, and scale to match the matrix:
object.matrix.decompose( object.position, object.quaternion, object.scale );
three.js r.76
I see several problems. If you are using aframe you should not access the object3D directly. You should do
cameraEl.setAttribute('position', {x: 0, y: 0; z;0 })
You can apply a tween to any entity using the declarative API
If you want to modify the camera independently of the running tween you can wrap your camera in another entity
<a-entity rotation="0 360 0"><a-entity id="camera" camera><a-animation ...></a-animation></a-entity></a-entity>
try this codeblock, it works for me on aframe 0.8.2
static faceCameraToCoords(camera, coords){
camera.setAttribute("look-controls",{enabled:false})
camera.setAttribute("rotation", coords);
var newX = camera.object3D.rotation.x
var newY = camera.object3D.rotation.y
camera.components['look-controls'].pitchObject.rotation.x = newX
camera.components['look-controls'].yawObject.rotation.y = newY
camera.setAttribute("look-controls",{enabled:true})
}
You can no longer set a-camera rotation after version 0.8.0.
Updated solution for Aframe 0.9.2:
Given the following camera setup:
<a-entity
id="rig"
position="0 1.6 0">
<a-camera position="0 0 0"></a-camera>
</a-entity>
You can directly alter the camera rotation thus:
const cameraEl = document.querySelector('a-camera');
cameraEl.components['look-controls'].pitchObject.rotation.x = newRotation.x;
cameraEl.components['look-controls'].yawObject.rotation.y = newRotation.y;
Make sure the newRotation values are in radians. For example, use THREE.Math.degToRad(newRotation.x).
am having an option to switch Orbit control to FirstPerson control, but while switch my model is disappearing from the scene
my code is below
controls = new THREE.FirstPersonControls( camera );
controls.movementSpeed = 70;
controls.lookSpeed = 0.04;
controls.noFly = true;
controls.lookVertical = false;
i need that switch from one control to another the object should be fixed on the position at present
Unlike OrbitControl, in the FirstPersonControl the camera points to an artbitrary directions. So use camControl.lon and camControl.lat to control the initial direction of camera.
camControl = new THREE.FirstPersonControls(camera);
camControl.lookSpeed = 0.1;
camControl.movementSpeed = 4;
camControl.noFly = true;
camControl.lookVertical = true;
camControl.lon = -90;
camControl.lat = 0;
Also make sure your mouse is not over the window as the scene is moving because as another poster pointed out, as soon as the mouse is on the cavas FirstPersonControl will start rotating the camera.
As of three.js R101, it's possible to use FirstPersonControls.lookAt(). FirstPersonControls.lat and FirstPersonControls.lon have been removed.
Besides, when creating FirstPersonControls the initial orientation of the camera is now respected.
i want to show a mesh (like gunshot) in front of my perspective camera(with first person controls) i wrote this code in the render function of my page:
var pos = camera.position;
var rot = camera.rotation;
shot.rotation.x = rot.x;
shot.rotation.y = rot.y;
shot.rotation.z = rot.z;
shot.position.x = pos.x;
shot.position.y= pos.y;
shot.position.z = pos.z + 500;
if i just change the position of my camera its good, but if i change the camera's rotation i don't see the shot in front of that.
how can i do this?
It would seem that you need to make the "shot" a child of the camera. It's not clear from your example whether you're doing that already, but this should make the shot move around with the camera properly.