I'm new to three.js and javascript. I'm trying to extrude a 2D square shape whilst rotating it about the extrusion axis like this... twist extrude
Unfortunately it doesn't seem like you can extrude in the usual way and then apply a geometrical transformation with a shear matrix to get this effect with geometry.applyMatrix(matrix).
I know that THREE.TubeGeometry.FrenetFrames implements information about the tangents, normals, binormals of a 2D shape as it carves out an extrude path.
Is there a way of hard coding tangents and binormials of a 2D shape whilst it's extruding to get this 'twisted' effect?
Is there a simpler way to get this effect in three.js?
Any help very much appreciated!
Related
I'm implementing area light in my ray tracer. In a simple sphere obj model (i.e. it's the sphere that consists of triangles) squared patches are displayed. How can I make sphere surface smooth?
I suspect that surface normals calculation must be fixed.
Currently for each triangle single normal is computed for all points it contains.
Here's the sphere:
The square patches are displayed because you are simply seeing the triangles that make up the obj model. Either find an obj model with more triangles or use texture mapping to smooth the surface. If you are looking for a computationally effective method for drawing spheres, you can create a collision algorithm for spheres. I do not know how low-level you went on your ray-tracing project, but if you defined the reflection algorithm for the triangle, you can pretty easily do one for a sphere. I have created a visualization here:
https://www.geogebra.org/m/g9rrhttp
You can check that out if you want. If you do not want to implement this new algorithm, you can look for an obj model with a texture. the texture is what will make it appear smooth.
Is there a way to resize the edges and faces of objects like cubes in three.js?
For example, I want to build the shape you see below without using Blender or a modelling tool. I want to scale the edge and faces of the cube to make the sharp edges as you see below.
I would like to create a vertex shader in Three.js to render the faces of a textured geometry so that all the triangles are face-on to the camera.
This is to emulate the functionality and performance of Three.js Points, but without the size limitation of gl_PointSize.
I'm not really sure what calculation to perform in the vertex shader. Any help appreciated.
you will have to add custom attribute to your geometry, easiest one to use would be a vector to the center of the triangle
in vertex shader you will have to calculate how to move each vertex, you now have
vertex position
vector to center
vertex normal == face normal
camera orientation (from matrices)
from that you can calculate the triangle center, which be static and calculate the rotation vertex has to make around the triangle center around axis perpendicular to the vector to center so that normal will come out as inverse of the camera orientation
the math is not very complicated, but writing shader code is tedious because of the non-existent debug - i advise you to first write a code that rotates the positions of geometry(using only the same parametres) and port it to shader
I have a 3D matrix in Matlab that was created using a volume MRI scan. I then use matlab toolbox iso2mesh (vol2surf) to convert this volume to a surface mesh and then extract the nodes/vertex coordinates and faces of this mesh.
However I find that this mesh is in the wrong coordinate system. I have tried to use the imrotate to rotate the matrix as well as rot90 to rotate the nodes matrix but it rotates the image only around the y-axis while I need rotation around both x and y axes.
Does anyone have any advice on what function I can use for this?
Thanks!
Here is the original image, the green colour is the background, and blue is the shape.
If my eye go closer to the shape, the blue square will be bigger like this:
If my eye go left, the shape will work like this:
I already know my eyes movement position, but how can I calculate what will the shape change? Any recommends? Thanks.
You need know the camera matrix http://en.wikipedia.org/wiki/Camera_matrix it will define the way which 3D coord will be projected to your sreen coordinates. If you know orientation of your camera, then you know 3d coords of object points relative to camera. Applying camera matrix transform to these 3d coords will give you 2d projections in you screen coordinates.