I am creating a TextGeometry but not able to convert in Points like a sphere or like a detailed 3d object.
In the below image I have created a sphere using
var dotGeometry = new THREE.SphereBufferGeometry(2, 100, 100);
var dotMaterial = new THREE.PointsMaterial({ size: 1, sizeAttenuation: false });
var dot = new THREE.Points(dotGeometry, dotMaterial);//new THREE.MeshBasicMaterial()
scene.add(dot);
and the for text I use
const fontloader = new THREE.FontLoader();
fontloader.load('./models/font.json', function (font) {
const textgeometry = new THREE.TextGeometry('Hello', {
font: font,
size: 1,
height: 0.5,
curveSegments: 12,
bevelEnabled: false,
bevelThickness: 10,
bevelSize: 8,
bevelOffset: 0,
bevelSegments: 5
});
var dotMaterial = new THREE.PointsMaterial({ size: 1, sizeAttenuation: false });
let textmesh = new THREE.Points(textgeometry, dotMaterial) //new THREE.MeshBasicMaterial({
// color: 0xffffff,
// wireframe: true
// }));
textmesh.geometry.center();
scene.add(textmesh);
// textmesh.position.set(0, 2, 0)
});
So how to create a geometry having many points for text also, Why I am not able to use MeshBasicMaterial for Points in sphere?
What you see is actually the expected result. TextGeometry produces a geometry intended for meshes. If you use the same data for a point cloud, the result is probably not as expected since you just render each vertex as a point.
When doing this with TextGeometry, you will only see points at the front and back side of the text since points in between are not necessary for a mesh.
Consider to author the geometry in a tool like Blender instead and import it via GLTFLoader.
Related
I try to substract text geometry from an mesh which has been previously omported (GLB with GLTFLoader).
Unfortunatly object seems not intersect rather than when I add the text geometry in my scene for debugging I see it properly and my mesh should have removed part.
See photo below:
Image 1
But I got this result:
Image 2
I tried to lower up the size of my font, and with x100 ratio I got the result below (here the mesh has removed part but I do not know what is refering to):
Image 3
The code:
let font
function engraving() {
const loaderFont = new FontLoader()
loaderFont.load('fonts/helvetiker_regular.typeface.json', function (f) {
font = f
regenerateGeometry()
})
}
function regenerateGeometry() {
let newGeometry
newGeometry = new TextGeometry("AAAAAAAAA", {
font: font,
size: 0.003,
height: 0.003,
curveSegments: 2,
})
newGeometry.center()
//bender.bend(newGeometry, 'y', Math.PI / 16)
newGeometry.translate(0, 0, 0)
const material = new THREE.MeshStandardMaterial({
envMap: '',
metalness: 1.0,
roughness: 0.0,
color: 0xffd700,
})
const textCSG = CSG.fromGeometry(newGeometry)
var engraved = engravedCSG.subtract(textCSG)
engravedMesh.geometry.dispose()
engravedMesh.geometry = CSG.toMesh(
engraved,
new THREE.Matrix4()
).geometry
}
Looking forward for some advise
I tried to export the bent text geometry in the example of https://threejs.org/examples/webgl_modifier_curve.html by OBJExporter.js. But the result text geometry exported was not bent as seen in the scene.
The code of "new OBJExporter..." was added after the code line "scene.add( flow.object3D );"
Please advise where I should put the exporter code and what steps I missed to get the text geometry with modified vertices? Great thanks for help!
const loader = new THREE.FontLoader();
loader.load( "fonts/Microsoft_YaHei_Regular.json", function (
font
) {
const geometry = new THREE.TextGeometry( "1 234567890", {
font: font,
size:0.25,
height: 0.02, //0.05 thickness
curveSegments: 12,
bevelEnabled: true,
bevelThickness: 0.02,
bevelSize: 0.01,
bevelOffset: 0,
bevelSegments: 5,
} );
geometry.rotateX( Math.PI );
geometry.rotateY( Math.PI );
const material = new THREE.MeshStandardMaterial( {
color: 0x99ffff
} );
const objectToCurve = new THREE.Mesh( geometry, material );
flow = new Flow( objectToCurve );
flow.updateCurve( 0, curve );
scene.add( flow.object3D );
const exporter = new OBJExporter();
const result = exporter.parse(flow.object3D);
The vertex displacement of the modifier happens on the GPU (in the vertex shader). So you can't use any of the exporters to export the bent/modified geometry.
I'm trying to construct a collection of flat shapes in three.js. Each one is defined as a series of coplanar Vector3 points, but the shapes are not all coplanar. Imagine two flat rectangles as the roof of a house, but with much more complex shapes.
I can make flat Shape objects and then rotate and position them, but since my shapes are conceived in 3d coordinates, it would be much simpler to keep it all in 3-space, which the Shape object doesn't like.
Is there some much more direct way to simply specify an array of coplanar Vector3's, and let three.js do the rest of the work?
I thought about this problem and came up with the idea, when you have a set of co-planar points and you know the normal of the plane (let's name it normal), which your points belong to.
We need to rotate our set of points to make it parallel to the xy-plane, thus the normal of that plane is [0, 0, 1] (let's name it normalZ). To do it, we find quaternions with .setFromUnitVectors() of THREE.Quaternion():
var quaternion = new THREE.Quaternion().setFromUnitVectors(normal, normalZ);
var quaternionBack = new THREE.Quaternion().setFromUnitVectors(normalZ, normal);
Apply quaternion to our set of points
As it's parallel to xy-plane now, z-coordinates of points don't matter, so we can now create a THREE.Shape() object of them. And then create THREE.ShapeGeometry() (name it shapeGeom) from given shape, which will triangulate our shape.
We need to put our points back to their original positions, so we'll apply quaternionBack to them.
After all, we'll assign our set of points to the .vertices property of the shapeGeom.
That's it. If it'll work for you, let me know ;)
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 20, 40);
camera.lookAt(scene.position);
var renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.target = new THREE.Vector3(10, 0, 10);
controls.update();
var grid = new THREE.GridHelper(50, 50, 0x808080, 0x202020); // xy-grid
grid.geometry.rotateX(Math.PI * 0.5);
scene.add(grid);
var points = [ // all of them are on the xz-plane
new THREE.Vector3(5, 0, 5),
new THREE.Vector3(25, 0, 5),
new THREE.Vector3(25, 0, 15),
new THREE.Vector3(15, 0, 15),
new THREE.Vector3(15, 0, 25),
new THREE.Vector3(5, 0, 25),
new THREE.Vector3(5, 0, 5)
]
var geom = new THREE.BufferGeometry().setFromPoints(points);
var pointsObj = new THREE.Points(geom, new THREE.PointsMaterial({
color: "red"
}));
scene.add(pointsObj);
var line = new THREE.LineLoop(geom, new THREE.LineBasicMaterial({
color: "aqua"
}));
scene.add(line);
// normals
var normal = new THREE.Vector3(0, 1, 0); // I already know the normal of xz-plane ;)
scene.add(new THREE.ArrowHelper(normal, new THREE.Vector3(10, 0, 10), 5, 0xffff00)); //yellow
var normalZ = new THREE.Vector3(0, 0, 1); // base normal of xy-plane
scene.add(new THREE.ArrowHelper(normalZ, scene.position, 5, 0x00ffff)); // aqua
// 1 quaternions
var quaternion = new THREE.Quaternion().setFromUnitVectors(normal, normalZ);
var quaternionBack = new THREE.Quaternion().setFromUnitVectors(normalZ, normal);
// 2 make it parallel to xy-plane
points.forEach(p => {
p.applyQuaternion(quaternion)
});
// 3 create shape and shapeGeometry
var shape = new THREE.Shape(points);
var shapeGeom = new THREE.ShapeGeometry(shape);
// 4 put our points back to their origins
points.forEach(p => {
p.applyQuaternion(quaternionBack)
});
// 5 assign points to .vertices
shapeGeom.vertices = points;
var shapeMesh = new THREE.Mesh(shapeGeom, new THREE.MeshBasicMaterial({
color: 0x404040
}));
scene.add(shapeMesh);
render();
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
}
body {
overflow: hidden;
margin: 0;
}
<script src="https://cdn.jsdelivr.net/npm/three#0.90.0/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three#0.90.0/examples/js/controls/OrbitControls.js"></script>
I have Three.Shape which I can apply Extrusion
To get a plane I drew a square first and then apply extrusion
var squareShape = new THREE.Shape();
squareShape.moveTo( 0,0 );
squareShape.lineTo( 0, sqLength );
squareShape.lineTo( sqLength, sqLength );
squareShape.lineTo( sqLength, 0 );
squareShape.lineTo( 0, 0 );
var geometry = new THREE.ExtrudeGeometry( squareShape,extrudeSettings);
now a 3D square is appearing on my browser.
Next I want to apply a image texture of 256x256 on its top face. How to do this?
If you look at src/extras/geometries/ExtrudeGeometry.js in THREE.js you will see these comments.
material: // material index for front and back faces
extrudeMaterial: // material index for extrusion and beveled faces
So for example you can say (obviously won't run directly because it is incomplete)
// The face material will be index #0. The extrusion (sides) will be #1.
var extrudeSettings = { amount: 10, bevelEnabled: true, bevelSegments: 3, steps: 4, bevelThickness: 8, material: 0, extrudeMaterial: 1 };
And when you create your mesh you create 2 materials and assign them to your mesh.
var mesh = THREE.SceneUtils.createMultiMaterialObject( geometry, [ new THREE.MeshLambertMaterial( { color: color } ), new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, transparent: true } ) ] );
Hope this gets you on the right path.
On a side note, related to the other answer, you make want to use extrude to create something that dimensionally is similar to a square but has bevels. One example would be if you were trying to draw dice and wanted to round the edges.
If all you want is a cube why are you extruding? Why don't you use the CubeGeometry.
I'm having difficulties constructing a hollow cylinder in Three.js.
Should I go and construct it using CSG or by stitching the vertices together?
var extrudeSettings = {
amount : 2,
steps : 1,
bevelEnabled: false,
curveSegments: 8
};
var arcShape = new THREE.Shape();
arcShape.absarc(0, 0, 1, 0, Math.PI * 2, 0, false);
var holePath = new THREE.Path();
holePath.absarc(0, 0, 0.8, 0, Math.PI * 2, true);
arcShape.holes.push(holePath);
var geometry = new THREE.ExtrudeGeometry(arcShape, extrudeSettings);
This solution uses ChandlerPrall's ThreeCSG.js project: http://github.com/chandlerprall/ThreeCSG
(For now, I recommend using the experimental version that supports materials - the uv branch - http://github.com/chandlerprall/ThreeCSG/tree/uvs)
Here's the code you will need:
// Cylinder constructor parameters:
// radiusAtTop, radiusAtBottom, height, segmentsAroundRadius, segmentsAlongHeight
var smallCylinderGeom = new THREE.CylinderGeometry( 30, 30, 80, 20, 4 );
var largeCylinderGeom = new THREE.CylinderGeometry( 40, 40, 80, 20, 4 );
var smallCylinderBSP = new ThreeBSP(smallCylinderGeom);
var largeCylinderBSP = new ThreeBSP(largeCylinderGeom);
var intersectionBSP = largeCylinderBSP.subtract(smallCylinderBSP);
var redMaterial = new THREE.MeshLambertMaterial( { color: 0xff0000 } );
var hollowCylinder = intersectionBSP.toMesh( redMaterial );
scene.add( hollowCylinder );
It is unlikely that you would have to stitch vertices together. If your cylinder has no thickness, you can use THREE.CylinderGeometry(). If it does have thickness, you can use CSG.
Use SVGloader to load a circle of desired radius (as an SVG). Set the geometry to ExtrudeBufferGeometry and give it your desired height as depth in the extrude settings object.