I'm working with a sensor to control the rotation of a hand model in THREE. I want to be able to apply an offset (on button click) to the hand model to adjust for any initial sensor position discrepancies.
I'm using quaternions and i'm not entirely clear on how to do this.
It seems that the approach should be to get the current position, get the difference between the current position and the home position [0,0,0,1], and apply this offset to the live sensor values.
I've tried this so far:
// on button click
quaternionOffset.copy(quaternion.multiplyQuaternions(quaternion.inverse(), startPosition))
// on update
quaternion.multiply(quaternionOffset)
initial sensor position (example)
home position (fingers pointing forward)
Thank you for the help
I think your approach is correct, just make sure you don't accidentally apply the home quaternion inside the input quaternion :
var inputQuaternion = new THREE.Quaternion();
var homeQuaternion = new THREE.Quaternion();
document.addEventListener('click', function () {
// set the current rotation as home
homeQuaternion.copy(inputQuaternion).inverse();
});
function updateFromSensor(quaternion) {
inputQuaternion.copy(quaternion);
object.quaternion.multiplyQuaternions(inputQuaternion, homeQuaternion);
}
let baseQuaternion = new THREE.Quaternion();
let diff;
function changeHandler(value) {
if (!diff) {
diff = baseQuaternion.multiply(value.inverse());
}
let calibrated = new THREE.Quaternion();
calibrated.multiplyQuaternions(diff, value);
object.setRotationFromQuaternion(calibrated);
}
Inspired by https://stackoverflow.com/a/22167097/1162838
Related
I have a chip that gives me pitch(-90° - 90°), roll(-180° - 180°) and heading(0° - 360°).
I want to mirror any rotations of the object to a model in threejs.
I have made a threejs app that receives pitch, roll and heading, but I am struggeling with the understanding of how i should rotate the model, and if its even possible to do this regarding the range of pitch and roll. I Have not found a clear answer to this on the internet.
Lets say i want to rotate z: -450°, x: 250° and y: -210° at the same
time during a 2 second period. I will in my app receive pitch, roll
and heading every 100ms with the current rotation and heading.
Is it this possible to visualize this rotation ?
If yes, what would be the best approach regarding setting the rotation, using local/global axis etc.
I am using tweenjs to perform animations like below.
new TWEEN.Tween(this.model.rotation)
.to(
{
x: THREE.Math.degToRad(pitch),
y: THREE.Math.degToRad(roll),
z: THREE.Math.degToRad(heading)
},
150
)
.easing(TWEEN.Easing.Linear.None)
.start();
I have good knowledge of frontend programming, but my knowledge with 3d/threejs is not so good.
you could use tween.js(https://github.com/tweenjs/tween.js/) to achieve the desired result and do something like
function animateVector3(vectorToAnimate, target, options) {
options = options || {}
// get targets from options or set to defaults
let to = target || new THREE.Vector3(),
easing = options.easing || TWEEN.Easing.Exponential.InOut,
duration = options.duration || 2000
// create the tween
let tweenVector3 = new TWEEN.Tween(vectorToAnimate)
.to({x: to.x, y: to.y, z: to.z}, duration)
.easing(easing)
.onStart(function(d) {
if (options.start) {
options.start(d)
}
})
.onUpdate(function(d) {
if (options.update) {
options.update(d)
}
})
.onComplete(function() {
if (options.finish) options.finish()
})
// start the tween
tweenVector3.start()
// return the tween in case we want to manipulate it later on
return tweenVector3
}
const animationOptions = {
duration: 2000,
start: () => {
this.cameraControls.enable(false)
},
finish: () => {
this.cameraControls.enable(true)
}
}
// Adjust Yaw object rotation
animateVector3(
// current rotation of the 3d object
yawObject.rotation,
// desired rotation of the object
new THREE.Vector3(0, 0, annotation.rotation.z + degToRad(90)),
animationOptions
)
// Adjust Pitch object rotation
animateVector3(
pitchObject.rotation,
new THREE.Vector3(0, degToRad(45), 0),
animationOptions
)
Does this answer your question?
I would like to use the "zoomToMapObject" method based on a selection on a dropdown menu.
For some reason the start zoom location is the middle of the map and not the set the geoPoint.
(The zooming works but the start location make it look a bit weird.)
My current approach looks like this:
const duration = this.chart.zoomToMapObject(selectedPoloygon, this.countryZoom, true).duration;
setTimeout(() => {
this.chart.homeGeoPoint = geoPoint;
this.chart.homeZoomLevel = this.countryZoom;
}, duration);
this.handleCountrySelection(selectedPoloygon);
Somehow even setting the homeGeoPoint / homeZoomLevel doesn't affect next zoom actions.
**UPDATE: Workaround heavy cost (from 1300 nodes to over 9000) **
I examined the problem a step further. It seems the middle point gets set when I push a new mapImageSeries into the map.
My workarround currently is to draw all points on the map and hide them.
Then after I select a country I change the state to visible.
However this approach is very costly. The DOM-Nodes rises from 1300 to ~ 9100.
My other approach with creating them after a country has been selected AND the zoom animation finished was much more
effective. But due to the map starting every time for a center location it is not viable? Or did I do s.th. wrong?
Here is my current code which is not performant:
// map.ts
export class MapComponent implements AfterViewInit, OnDestroy {
imageSeriesMap = {};
// ... standard map initialization ( not in zone of course )
// creating the "MapImages" which is very costly
this.dataService.getCountries().forEach(country => {
const imageSeriesKey = country.id;
const imageSeriesVal = chart.series.push(new am4maps.MapImageSeries()); // takes arround 1-2 ms -> 300 x 2 ~ 500 ms.
const addressForCountry = this.dataService.filterAddressToCountry(country.id); // returns "DE" or "FR" for example.
const imageSeriesTemplate = imageSeriesVal.mapImages.template;
const circle = imageSeriesTemplate.createChild(am4core.Circle);
circle.radius = 4;
circle.fill = am4core.color(this.colorRed);
circle.stroke = am4core.color('#FFFFFF');
circle.strokeWidth = 2;
circle.nonScaling = true;
circle.tooltipText = '{title}';
imageSeriesTemplate.propertyFields.latitude = 'latitude';
imageSeriesTemplate.propertyFields.longitude = 'longitude';
imageSeriesVal.data = addressForCountry.map(address => {
return {
latitude: Number.parseFloat(address.lat),
longitude: Number.parseFloat(address.long),
title: address.company
};
});
imageSeriesVal.visible = false;
this.imageSeriesMap[imageSeriesKey] = imageSeriesVal;
});
// clicking on the map
onSelect(country) {
this.imageSeriesMap[country].visible = true;
setTimeout( () => {
const chartPolygons = <any>this.chart.series.values[0];
const polygon = chartPolygons.getPolygonById(country);
const anim = this.chart.zoomToMapObject(polygon, 1, true, 1000);
anim.events.on('animationended', () => {});
this.handleCountrySelection(polygon);
}, 100);
});
}
handleCountrySelection(polygon: am4maps.MapPolygon) {
if (this.selectedPolygon && this.selectedPolygon !== polygon) {
this.selectedPolygon.isActive = false;
}
polygon.isActive = true;
const geoPoint: IGeoPoint = {
latitude: polygon.latitude,
longitude: polygon.longitude
};
this.chart.homeGeoPoint = geoPoint;
this.chart.homeZoomLevel = this.countryZoom;
this.selectedPolygon = polygon;
}
}
Thanks to your thorough followup I was able to replicate the issue. The problem you were having is triggered by any one of these steps:
dynamically pushing a MapImageSeries to the chart
dynamically creating a MapImage via data (also please note in the pastebind you provided, data expects an array, I had to change that while testing)
In either step, the chart will fully zoom out as if resetting itself. I'm going to look into why this is happening and if it can be changed, so in the meantime let's see if the workaround below will work for you.
If we only use a single MapImageSeries set in advance (I don't particularly see a reason to have multiple MapImageSeries, would one not do?), that eliminates problem 1 from occurring. Asides from data, we can create() MapImages manually via mapImageSeries.mapImages.create(); then assign their latitude and longitude properties manually, too. With that, problem 2 does not occur either, and we seem to be good.
Here's a demo with a modified version of the pastebin:
https://codepen.io/team/amcharts/pen/c460241b0efe9c8f6ab1746f44d666af
The changes are that the MapImageSeries code is taken out of the createMarkers function so it only happens once:
const mapImageSeries = chart.series.push(new am4maps.MapImageSeries());
const imageSeriesTemplate = mapImageSeries.mapImages.template;
const circle = imageSeriesTemplate.createChild(am4core.Circle);
circle.radius = 10;
circle.fill = am4core.color('#ff0000');
circle.stroke = am4core.color('#FFFFFF');
circle.strokeWidth = 2;
circle.nonScaling = true;
circle.tooltipText = 'hi';
In this case, there's no need to pass chart to createMarkers and return it, so I've passed polygon instead just to demo dynamic latitude/longitudes, I also assign our new MapImage to the polygon's data (dataItem.dataContext) so we can refer to it later. Here's the new body of createMarkers:
function createMarkers(polygon) {
console.log('calling createMarkers');
if ( !polygon.dataItem.dataContext.redDot) {
const dataItem = polygon.dataItem;
// Object notation for making a MapImage
const redDot = mapImageSeries.mapImages.create();
// Note the lat/long are direct properties
redDot.id = `reddot-${dataItem.dataContext.id}`;
// attempt to make a marker in the middle of the country (note how this is inaccurate for US since we're getting the center for a rectangle, but it's not a rectangle)
redDot.latitude = dataItem.north - (dataItem.north - dataItem.south)/2;
redDot.longitude = dataItem.west - (dataItem.west - dataItem.east)/2;;
dataItem.dataContext.redDot = redDot;
}
}
There's no need for the animationended event or anything, it just works since there is no longer anything interfering with your code. You should also have your performance back.
Will this work for you?
Original answer prior to question's edits below:
I am unable to replicate the behavior you mentioned. Also, I don't know what this.countryZoom is.
Just using the following in a button handler...
chart.zoomToMapObject(polygon);
...seems to zoom just fine to the country, regardless of the current map position/zoomLevel.
If you need to time something after the zoom animation has ended, the zoomToMapObject returns an Animation, you can use its 'animationended' event, e.g.
const animation = this.chart.zoomToMapObject(selectedPoloygon, this.countryZoom, true);
animation.events.on("animationended", () => {
// ...
});
Here's an example with all that with 2 external <button>s, one for zooming to USA and the other Brazil:
https://codepen.io/team/amcharts/pen/c1d1151803799c3d8f51afed0c6eb61d
Does this help? If not, could you possibly provide a minimal example so we can replicate the issue you're having?
I'm working on some screen space shaders using THREE.JS and GLSL. I'd like to both render a "diffuse" buffer with per object materials/textures AND render an "ID" buffer where each object has a unique color for object edge detection. This would also be really useful for object picking as some of the THREE.JS examples show.
I am already using Scene.overrideMaterial to render normal buffers (and some other cool stuff) but haven't figured out a way to do something similar for an ID buffer. Is there something like this that exists? Seems useful enough that it would be likely. Have other people developed solutions to this problem? Maybe by mapping an objects UUID to a color value?
-----> EDIT
Here is my attempt using this example:
https://threejs.org/examples/webgl_interactive_instances_gpu.html
I'm not concerned with selection at this point, regardless this isn't working. I think I may be setting up onBeforeRender() incorrectly. Any help on this?
Thanks!
initPieces = function(geometry){
...
//set id Color to unique color
//for picking will use setHex(i) method
m.userData.idColor = material.color;
...
m.onBeforeRender = function (){
if(Viewer._scene.overrideMaterial){
if(Viewer._scene.overrideMaterial._name == "id"){
var updateList = [];
var u = scene.overrideMaterial.uniforms;
//picking color in user data
var d = this.userData;
//Is this just equivalent to checking whether this is the picking material?
if(u.idColor){
u.idColor.value = (d.idColor);
// u.needsUpdate = true;
updateList.push("idColor");
}
//Don't understand what this is doing
//Throws "WebGL INVALID_OPERATION: uniformMatrix4fv: location is not from current program"
if (updateList.length){
var materialProperties = renderer.properties.get(material);
if( materialProperties.program){
var gl = renderer.getContext();
var p = materialProperties.program;
gl.useProgram( p.program );
var pu = p.getUniforms();
updateList.forEach(function(name){
pu.setValue( gl, name, u[name].value);
});
}
}
}
}
}
// Doesn't show onBeforeRender set as I expected?
console.log(m);
...
}
...
}
...
function render(scene, camera){
...
scene.overrideMaterial = getMaterial("id");
renderer.render(scene, camera, getTarget("id"));
scene.overrideMaterial = null;
...
}
I have a unity game and in it, a rotating game object, which increases its speed when it is clicked.
My problem is that the game does not work as I want it to. Right now, if I click any part of the screen, it increases the game object's speed of rotation. On the other hand, if I keep my finger on the screen, the game object starts to slow down and then starts rotating in the opposite direction.
I want the rotation of the object to increase when I click on it, not just if I click on any part of the screen. Furthermore, I don't know why holding down reverses the direction of rotation.
var speed = 1;
var click = 0;
Screen.orientation = ScreenOrientation.LandscapeLeft;
function Update (){
{
transform.Rotate(0,0,speed);
}
if(Input.GetMouseButton(0))
{
if(speed != 0)
{
speed = 0;
} else {
click++;
speed = click;
}
You must use Input.GetMouseButtonUp or Input.GetMouseButtonDown, NOT A Input.GetMouseButton, this method used for clamping.
Try use this code:
var speed = 1;
var click = 0;
Screen.orientation = ScreenOrientation.LandscapeLeft;
function Update (){
{
transform.Rotate(0,0,speed);
}
if(Input.GetMouseButtonDown(0))
{
if(speed != 0)
{
speed = 0;
} else {
click++;
speed = click;
}
A few issues here:
Firstly:
To increase speed upon clicking on the object only, use raycasting from camera, and check if it hits your object. Your object needs need a collider component on it for this to work.
RaycastHit hit;
Ray ray = camera.ScreenPointToRay(Input.mousePosition);
if (Physics.Raycast(ray, out hit))
{
Transform objectHit = hit.transform;
objectHit.Rotate(0,0,speed);
}
Refer to https://docs.unity3d.com/Manual/CameraRays.html -> Raycasting section, for more information.
Secondly:
Input.GetMouseButtonDown(..) // returns true at the instance your mouse button transits from up to down
Input.GetMouseButton(..) // returns true as long as your mouse button is held down
Use Input.GetMouseButtonDown(..) in your Update() method if you want to to do something when you click on it.
I have a model, which is displayed in Three.js correctly. Top at the top, bottom at the bottom. However, model has a preset rotation of -1.57 on X axis. It means If I add any new object to the scene, axis of object will be not the same as the model axis. How can clear out or reset this preset rotation so the axis of model and axis of world will match and top will be still at the top? I hope I explained myself clear. Thank you.
How about to rotate yours model once by 1.57, "burn" this orientation back to the vertices of the model then saving it to new file.
// reset mesh rotation
mesh.rotation.y = 1.57;
// make current oreintation, the base of the model
applyMeshTransformation(mesh);
// export the model to new blob file (can saved from this to new file)
exportObject(mesh)
function applyMeshTransformation(mesh) {
// apply local matrix on geometry
mesh.updateMatrixWorld();
mesh.geometry.applyMatrix(mesh.matrixWorld);
// reset local matrix
mesh.position.set(0,0,0);
mesh.rotation.set(0,0,0);
mesh.scale.set(1,1,1);
mesh.updateMatrixWorld();
};
function exportObject(mesh) {
var objExporter = new THREE.ObjectExporter();
var output = JSON.stringify( objExporter.parse( mesh ), null, '\t' );
output = output.replace( /[\n\t]+([\d\.e\-\[\]]+)/g, '$1' );
var blob = new Blob( [ output ], { type: 'text/plain' } );
var objectURL = window.URL.createObjectURL( blob );
window.open( objectURL, '_blank' );
};