I want to create a triangular prism in three.js where a user will be able to highlight its vertices/edges/faces on clicking.
The color of triangles is flickering on mouse-move.
How can i make the triangles as stable as the rectangular planes? I achieved a stable implementation in cube and cuboid but that didn't involve any rotation of planes and triangles.
Here, I've created a separate mesh for each of the 5 objects.
I am not sure if the CanvasRenderer has depth sorting but you can easily use WebGLRenderer to get rid of those artifacts.
Related
Can someone give me a pointer on where should start?
I am trying to port this code → http://glennchun.github.io/free-form-deformation/
to the latest threejs Version.
the major challenge I’m facing is how to divide Geometry into multiple Faces.
Since SubdivisionModifier is removed from the latest threejs version what should I do how do I create a subDivision on geometry so I can attach the related face to my transform controls and deform them?
Reference
SubdivisionModifier works on THREE.Geometry() and now THREE.Geometry() is not present in threeJS r-136.
What I've done I started converting THREE.Geometry() Meshes to THREE.BufferGeometry() but SubdivisionModifier does not work on BufferGeometry.
So can anyone please point me to any new Library which replaced SubdivisionModifier or any new threeJS library which I can use?
The original subdivision modifier in three.js was based on the Catmull-Clark subdivision surface algorithm, which works best for geometry with convex coplanar n-gon faces. This modifier last appeared in release 59 (available here). To use the Catmull-Clark algorithm with the current triangle based BufferGeometry, it would be best to separate convex coplanar faces. The general idea would be go through triangles one by one, first gathering neighboring triangles with the same normals (to ensure coplanar) and then doing edge traversal to determine convex polygon faces. You would then run through the Catmull-Clark algorithm, and rebuild a new triangle based BufferGeometry.
To simplify subdivision with triangle meshes, three.js switched to the Loop subdivision surface algorithm in r60 until it was removed in r125 (available here). This algorithm generally doesn't look as nice on some geometries as it heavily weights corners with shared vertices and the modifier was eventually removed.
I have recently implemented a new modifier using Loop subdivision for modern three.js BufferGeometry and released it on GitHub under the MIT license. It includes a pre-subdivision pass to evenly split coplanar faces, smoothing sharp geometries more evenly.
Here is a demo of it in action.
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.
Is it currently possible to display the intersection of a mesh and a plane as below in THREEJS:
Display in red, green, yellow the intersection of meshes with a back plane with a texture on it.
If not, which would the best approach be:
compute a "line geometry" at the intersection of the mesh and the plane in JavaScript, then renderer it
apply a custom shader material to the mesh (with the plane parameters as a uniform) that only colors a pixel if the current triangle intersects the plane
For option #2 are there some demos online already of such shaders?
Thanks,
Nicolas
=== UPDATE 2022 ===
THREE-Mesh-BVH provides new efficient ways to create contours. That is how I currently do it:
Adjust you geomeotry to a BVH tree
Compute each triangle to pllane intersection as it is super fast thanks to the BVH tree.
Live example: https://gkjohnson.github.io/three-mesh-bvh/example/bundle/clippedEdges.html
====
AMI now supports it (https://fnndsc.github.io/ami/#viewers_quadview)
The steps are:
Display intersection between a mesh and a plane
Post process the intersection to display the contours.
There are different techniques to display mesh/plane intersection:
With a stencil buffer (https://github.com/daign/clipping-with-caps)
Playing the the mesh opacity (https://github.com/FNNDSC/ami/tree/dev/examples/viewers_quadview)
All those techniques are computationally expensive at it requires 3 renders pass to display contours of 1 mesh and there may be a better approach but not sure what would be the best alternative.
HTH
I'm working on some simple building planning editor. For 3D preview I'm using Three.js library for Dart (from GitHib). So far algorithm is pretty simple: it converts single lines to rectangles and then extrude it (based on thickness and height).
Is it possible to normalize vertex position depending on adjacent walls? Technically I store list of walls, within can query adjacent walls and can calculate Vector2 list for mesh generation for each wall. I have to apply changes to each wall separately due to extrusion.
Thanks in advance!
Maybe you could instead try to properly tessellate the 2D thickened walls, and then only extrude them (instead of extruding, tessellating and then trying to fix the joints). For simple polylines, joint tessellation can be handled like described in this article: http://www.codeproject.com/Articles/226569/Drawing-polylines-by-tessellation.