Change object's axes after rotating it in three.js - three.js

I am rotating an 3D object in three.js on the X and Y axes by click dragging and using the method rotateOnAxis. After I rotate, I want to reset the axes so that when I click drag again, it's as if the axes are in their original directions.

Looks like this can be done using quaternion. I found an example showing what I want to accomplish here: https://github.com/defmech/Three.js-Object-Rotation-with-Quaternion

Related

How to apply viewing angle with three.js?

In the scene, there is an object that I'm looking at with a PerspectiveCamera. Using OrbitControls, I can move around the object.
I want to set viewing angle to the camera.
Concretely, here is the example where the behavior I suppose is realized.
Click camera icon and you find the slider to change viewing angle.
Is it possible to realize this, using PerspectiveCamera?
Or should I use Effect Composer for Post Processing? If so, I look for shader code.

Is there a way to draw directly onto a model/texture in threejs?

I've been looking for a solution to this problem for a project I'm working on. I'd like to know if there is a way to click on a plane geometry and draw onto it, paint style, and have the texture update as you draw on it.
After this, is there a way to save that texture while in the browser now that you've edited it?
You could use raycasting to determine the UV texture position where the mouse intersection takes place. Raycaster.intersectObject returns an array of objects, one of its properties is .uv. You can see it in action in this demo.
You can use a 2D <canvas> as the source of the texture. Once you have the UVs from the intersection, you could use that position to draw on the canvas as demonstrated in this other demo

Solve z-Up exported collada file from blender in OpenGL

I export models from Blender to Collada with animation. As it is known, Blender is a right-handed system so its up axis is z and OpenGL ES2 is Y-Up.
For static meshes I can rotate the object around x axis for 90° degrees but when I apply the rotation to the frame's matrix, it has unexpected results.
So how can I do this?
To Rotate an Object:
To rotate the object manually, make sure you select the object (normally by right-clicking the object). Then simply press "R" on your keyboard and move the mouse and see the object rotate accordingly. You might realize you have limitation on how it rotates; press "R" again and now you will see the object rotating freely depending on how you move your mouse.
If you want to rotate the object around the x-axis by 90 degrees, then once again select the object, press "R" on your keyboard (R is for Rotate), then press "X" on your keyboard (X is for X-axis), then type in 90 on your numpad, and finally hit "Enter". You will see your object rotate by 90 degree along the X-axis.
To Rotate an Entire Scene:
Select all parent objects
Move 3D cursor to 0,0,0
Rotate around cursor: global X axis, -90 deg
Apply rotation
Continue with the usual export
The correct way to handle this problem is to do the rotation as part of the export since the point of an export would be to take a correctly oriented Blender object and produce a correctly oriented Unity object. You should be performing the rotation before anything else. The application of the rotation should come before any translation in the actual frame.
More detail on this can be found at the following thread: https://blenderartists.org/forum/archive/index.php/t-255246.html

How to change pivot point for rotation on TrackballControls but keep camera.lookAt position same?

I need to be able to change rotation pivot without changing camera lookAt on THREE.TrackballControls no mater what I tried I could not succeed. Please give me a direction to solve this problem. What I am actually trying to achieve is Revit like mouse controls.
I was able to solve this problem by creating 2 3D objects named orbit and target, then add target and camera into orbit as child objects... camera always looks at target.position, mousemove on x axis rotates the orbit object around Z axis (hence target and camera rotates around the orbit) and mousemove on y axis rotates the camera arm (camera.position vector) around cameraSideways direction.

rotate a projection to follow mouse drag

I'm working on a project to generate world map projections and manipulate them. You can see a beta version here : http://ansichtssache-n.ch/en/personas/daVinci
I'm trying to get the drag event correctly interpreted, so that for example when you drag Australia up, it actually moves Australia up and not the center of the projection (causing Australia to move down in a Miller projection).
I've been trying to find the correct rotation angles to apply to the 3 axis as shown here http://bl.ocks.org/mbostock/4282586 .
I can get the x/y position on the canvas from the start and end of the mouse drag, I can get the geo-coordinates of these points too, and I can get the x/y of the current center as well as its geo-coordinates, but honestly I'm stuck now...
Any idea ?
I had a similar problem here Compose two rotations in D3 geo projection?
I came up with a way to compose the trackball rotation with the existing projection rotation so that you get intuitive control regardless of the original globe orientation.

Resources