would it be possible to use bufferedgeometry filled with circles or other shapes? by circles i mean filled circles
i have tried drawing a circle via a series of "Line"s, but of course it wans't a filled circle, i have also tried using a ParticleCloud with pngs that looked like circles, but then the performance wouldn't be as good as native meshed circle i guess.
the closest i got to is when i drew a circle via a series of multiple "Mesh" objects but it is very cumbersome.
does BufferGeometry even support such thing?
In three.js there is CircleBufferGeometry
var geometry = new THREE.CircleBufferGeometry( 5, 32 );
var material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
var circle = new THREE.Mesh( geometry, material );
scene.add( circle );
Related
In this demo:
https://threejs.org/examples/?q=clipping#webgl_clipping_advanced
if you enable the "visualize" option, you can see the 3d pyramid "cutting" the inside object.
Here:
https://threejs.org/examples/?q=clipping#webgl_clipping
there is a simple 2d plane cutting the object, but there is no such option to "see" the plane. I just started learning threejs and I am not too familiar with any 3d engine (other than fully understanding the math behind it), so I tried some basic stuff, e.g.:
localPlane.visible = true
But of course it didn't work. Any 'simple' way to make the second demo display the cutting plane?
Thank you
Here's some code to add the plane in the position you want:
const planeGeometry = new THREE.PlaneGeometry( 1.5, 1.5 );
const planeMaterial = new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.DoubleSide} );
const plane = new THREE.Mesh( planeGeometry, planeMaterial );
plane.position.copy(localPlane.normal);
plane.position.multiplyScalar(-localPlane.constant);
plane.quaternion.setFromUnitVectors(new THREE.Vector3(0, 0, 1), localPlane.normal);
plane.material.opacity = 0.5;
plane.material.transparent = true;
scene.add( plane );
And here's what that looks like...
However, depending on what you are implementing, you may find it easier to create a Plane Mesh in the position you want, and then derive the clipping plane THREE.Plane from that.
If you want to be able to move the clipping plane around, the reasoning involved in moving a Plane Mesh Object3D is probably more straightforward than reasoning about moving a THREE.Plane.
(update)
Another alternative approach I've come across: you could simply use the built in THREE.PlaneHelper, which can be used to visualize any THREE.Plane.
https://threejs.org/docs/#api/en/helpers/PlaneHelper
The sample code offered on that page is this:
const plane = new THREE.Plane( new THREE.Vector3( 1, 1, 0.2 ), 3 );
const helper = new THREE.PlaneHelper( plane, 1, 0xffff00 );
scene.add( helper );
I am drawing curves/polygons by using ExtrudeBufferGeometry.
Usually it always has closed ends.
For example:
My target is to draw similar shapes but open ended like
Note that my target is not "LINES" or "Planes". It must have extrude and I just want continuous points keep combining with angle (angle can be any floating point value in radian)
Your solution lies in the ExtrudeGeometry documentation, where it states:
When creating a Mesh with this geometry, if you'd like to have a separate material used for its face and its extruded sides, you can use an array of materials. The first material will be applied to the face; the second material will be applied to the sides.
So when generating the mesh, just pass 2 materials, the first one with visible: false so it doesn't get rendered.
const geometry = new THREE.ExtrudeGeometry( shape, extrudeSettings );
const materialFace = new THREE.MeshBasicMaterial( { visible: false } );
const materialSide = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const mesh = new THREE.Mesh( geometry, [materialFace, materialSide] ) ;
I am experimenting with THREE.js and am trying to implement a WireframeGeometry for a plane and remove the diagonal lines so that it looks like a grid of squares instead of a grid of squares with diagonal lines running through them.
Is it possible ot remove individual lines from a wireframe geometry that comes with THREE.js?
let matLine, wireframe
let geo = new THREE.PlaneGeometry( 80, 80, 80, 80 )
const geometry = new WireframeGeometry2( geo )
matLine = new LineMaterial( {
color: 0x4080ff,
linewidth: 6, // in pixels
//resolution: // to be set by renderer, eventually
dashed: false
} )
wireframe = new Wireframe( geometry, matLine )
wireframe.computeLineDistances()
wireframe.scale.set( 1, 1, 1 )
wireframe.rotation.x = Math.PI / 2
scene.add( wireframe )
Three.js faces are triangles and WireframeGeometry draws lines on the edges of faces. It's not possible to make a grid of squares with WireframeGeometry.
If you only need the grid for a Plane, you could use GridHelper:
https://threejs.org/docs/index.html?q=grid#api/en/helpers/GridHelper
But it works for only a plane and not other geometry.
I want to create some simple 3D points.
Is there any way to create this geometry without tricks?
- I don't need a pointcloud ( or do I need ? )
- I don't want a sprite ( I don't want to load any image).
Maybe I'm some clumsy but I don't see the way.
Any idea & advise ? Thanks.
You maybe want to use a simple sphere geometry with a small radius for your project.
var pointGeometry = new THREE.SphereGeometry( 2, 16, 16 ), // adjust the first value for the 'point' radius
pointMaterial = new THREE.MeshBasicMaterial( {color: 0xffff00} ), // adjust the color of your 'point'
point3D = new THREE.Mesh( pointGeometry, pointMaterial );
scene.add( point3D );
Important side notice: the radius of the sphere and the size it takes on your screen depends on the distance from the camera and the camera.['far'] value, you set while initiating.
I have a mesh with plane geometry that I texture with a 2D canvas element. This is working perfectly.
var landTexture = new THREE.Texture(land.canvas); // animated canvas element
var material = new THREE.MeshLambertMaterial({map: landTexture});
var plane = new THREE.Mesh( new THREE.PlaneGeometry( this.land_width, this.land_height ), material );
landTexture.needsUpdate = true;
landObject.add(plane);
The 2D canvas has an animated pattern which I want to use as a texture on a pentagon instead of a plane. How do I go about texturing more complex polygons, e.g. a pentagon, with a 2D canvas texture?
Edit: how I generate the pentagon
var pentagon = new THREE.Mesh( new THREE.CircleGeometry(this.land_width, 5), material );
Screenshot of the animated texture on PlaneGeometry and the same texture on a CircleGeometry with 5 sides. Notice the "stretched" canvas texture on the pentagon, which is not what I want. It should fit proportionally.
I think that the UVs are already set so that code such as:
var grid = new THREE.ImageUtils.loadTexture( 'images/uvgrid01.jpg' );
var pentagon = new THREE.Mesh( new THREE.CircleGeometry(50, 5), new THREE.MeshBasicMaterial({map:grid}) );
when the grid is the image:
will produce an image like:
Is that what you're looking for? Then all that is left is to update the texture repeatedly, and each time this is done, set the flag to update the material. I can go into more detail, but I would need to know how the canvas is being animated.