Working with Three.js

Question

Context: trying to take THREE.js and use it to display conic sections.

Method: creating a mesh of vertices and then connect face4's to all of them. Used two faces to produce a front and back side so that when the conic section rotates it won't matter from which angle the camera views it.

Problems encountered: 1. Trying to find a good way to create a intuitive mouse rotation scheme. If you think in spherical coordinates, then it feels like just making up/down change phi and left/right change phi would work. But that requires that you can move the camera. As far as I can tell, there is no way to change actively change the rotation of anything besides the objects. Does anyone know how to change the rotation of the camera or scene? 2. Is there a way to graph functions that is better than creating a mesh? If the mesh has many points then it is too slow, and if the mesh has few points then you cannot easily make out the shape of the conic sections.

Any sort of help would be most excellent.

Answer 1

I'm still starting to learn Three.js, so I'm not sure about the second part of your question. For the first part, to change the camera, there is a very good way, which could also include zooming and moving the scene: the trackball camera.

For the exact code and how to use it, you can view: https://github.com/mrdoob/three.js/blob/master/examples/webgl_trackballcamera_earth.html

At the botton of this page (http://mrdoob.com/122/Threejs) you can see the example in action (the globe in the third row from the bottom).

Answer 2

There is an orbit control script for the three.js camera.

I'm not sure if I understand the rotation bit. You do want to rotate an object, but you are correct, the rotation is relative.

When you rotate or move your camera, a matrix is calculated for that position/rotation, and it does indeed rotate the scene while keeping the camera static.

This is irrelevant though, because you work in model/world space, and you position your camera in it, the engine takes care of the rotations under the hood.

What you probably want is to set up an object, hook up your rotation with spherical coordinates, and link your camera as a child to this object. The translation along the cameras Z axis relative to the object should mimic your dolly (zoom is FOV change).

Answer 3

You can rotate the camera by changing its position. See the code I pasted here: https://gamedev.stackexchange.com/questions/79219/three-js-camera-turning-leftside-right

As others are saying OrbitControls.js is an intuitive way for users to manage the camera.

I tackled many of the same issues when building formulatoy.net. I used Morphing Geometries since I found mapping 3d math functions to a UV surface to require v little code and it allowed an easy way to implement different coordinate systems (Cartesian, spherical, cylindrical).

You could use particles instead of a mesh I suppose but a mesh seems best. The lattice material is not too useful if you're trying to understand a surface mathematically. At this point I'm thinking of drawing my own X,Y lines on the surface (or phi, theta lines etc) to better demonstrate cross-sections.

Hope that helps.

Answer 4

You can use trackball controls by which you can zoom in and out of an object,rotate the object,pan it.In trackball controls you are moving the camera around the object.Object still rotates with respect to the screen or renderer centre (0,0,0).