In my project the shapes I created were spheres and I used an image as texture for material...
How can I make a custom shape (not sphere, rectangle, etc.)? For example, how can I create a halfsphere?
My code for now:
// create a texture
texture = THREE.ImageUtils.loadTexture('red.png');
// create a sphere shape
geometry = new THREE.SphereGeometry(50, 16, 16);
// give it a shape red color
material = new THREE.MeshLambertMaterial({map: texture});
// create an object
mesh = new THREE.Mesh( geometry, material);
There are multiple ways to use geometry in Three.js, from exporting models via a 3D editor (like Blender, for which a nice Three.js exporter already exists), to creating geometry from scratch.
One way would by to create instance of THREE.Geometry and add vertices, and then work out how those connect to add face indices, but this not an easy way to do it.
I would suggest starting with the existing geometries (found in the extras/geometries package) like THREE.CubeGeometry, THREE.CylinderGeometry, THREE.IcosahedronGeometry, THREE.OctahedronGeometry, etc.)
Additionally there are some really nice classes that allow you to generate extrusions (THREE.ExtrudeGeometry) and lathes(THREE.LatheGeometry). For extrusions, see this example.
You mentioned creating half a sphere. That's an ideal candidate for using LatheGeometry.
All you need to do is create a half-circle path (as an array of Vector3 instances) and pass that to the lathe so it revolves the half-circle into 3D - a halfsphere.
Here's an example:
var pts = [];//points array - the path profile points will be stored here
var detail = .1;//half-circle detail - how many angle increments will be used to generate points
var radius = 200;//radius for half_sphere
for(var angle = 0.0; angle < Math.PI ; angle+= detail)//loop from 0.0 radians to PI (0 - 180 degrees)
pts.push(new THREE.Vector3(Math.cos(angle) * radius,0,Math.sin(angle) * radius));//angle/radius to x,z
geometry = new THREE.LatheGeometry( pts, 12 );//create the lathe with 12 radial repetitions of the profile
Plug that geometry into your mesh and Bob’s your uncle!
Optionally, you can centre the mesh/pivot using GeometryUtils:
THREE.GeometryUtils.center(geometry);
Related
I'm looking to project a texture onto the surface of a mesh in ThreeJS.
https://www.lanyardmarket.com/en/printed-tshirt
This link achieves the result i'm looking for however i'm not sure how they achieved it.
.
I'll update this post as I research however if anyone knows how to project a ThreeJS texture onto a mesh i'd love to know.
Thanks
Working example you may find here: https://jsfiddle.net/mmalex/pcjbysn1/
BufferGeometry stores texture coordinates in 'uv' attribute, you can add it with BufferGeometry.addAttribute and access it through geom.attributes.uv.array.
let uvcoords = [];
let vertexCount = geom.attributes.position.array.length / 3;
// allocate array of UV coordinates (2 floats per each vertex)
uvcoords.length = 2 * vertCount;
if (geom.attributes.uv === undefined) {
geom.addAttribute('uv', new THREE.Float32BufferAttribute(uvcoords, 2));
}
Now all you need is to "project" mesh vertices onto some 3D plane. These projection coordinates will appear your UV coordinates.
In general case, you would need to do Plane.projectPoint for each vertex. This approach is straightforward and can be optimized with pre-rotating the mesh so that vertex x and y components become u and v accordingly. This you will find in my jsfiddle.
I'm trying to make a linear regression plane visualization tool for a math project. Currently I have the math parts completed, but I am not sure how to graph the plane. I have a equation in the form of z=C+xD+yE, where C, D, and E are known constants. How do I graph the plane using these information? Thanks.
github page: https://saxocellphone.github.io/LAProject/
z=C+xD+yE
This equation gives full information about the plane. What else you need to graph (plot, draw?) it? Probably it depends on your graphic software possibilities.
Canonical form of given equation:
xD + yE - z + C = 0
Normal to the plane is (D, E, -1). Distance to the coordinate origin Abs(C)/Sqrt(D^2+E^2+1).
Plane intersects coordinate axes at values (-C/D), (-C/E), (C)
I see your problem is not with math, but with three,
as WestLangley pointed out in his comment you can play with rotations etc. or create a simple triangle which is the easiest way
since you have your equation for the plane create 3 points to form a triangle
// z=C+xD+yE
// i assume here that the plane is not aligned with any axis
// and does not pass through the origin, otherwise choose the points in another way
var point1 = new THREE.Vector3(-C/D,0,0);//x axis intersection
var point2 = new THREE.Vector3(0,-C/E,0);//y axis intersection
var point3 = new THREE.Vector3(0,0,C);//z axis intersection
now form a new geometry as in How to make a custom triangle in three.js
var geom = new THREE.Geometry();
geom.vertices.push(point1);// adding vertices to geometry
geom.vertices.push(point2);
geom.vertices.push(point3);
// telling geometry that vertices 0,1,2 form a face = triangle
geom.faces.push( new THREE.Face3( 0, 1, 2 ) );
create a simple material and add it to a scene
var material = new THREE.MeshBasicMaterial({
color: 0xff0000, // RGB hex color for material
side: THREE.DoubleSide // do not hide object when viewing from back
});
scene.add(new THREE.Mesh(geometry,material));
that should get you going, you can add another triangles, or make it larger with choosing points that are further apart
I'm trying to build a simple game that shoots stuff out of a barrel of a gun. So far I have a simple group with a cube and a cylinder added as the barrel. When I rotate the group (90 degrees at a time) the barrel moves around facing different directions and that all fine.
My problem is that I cannot for the life of me figure out a way to determine which way the barrel of my gun is pointing. I need to know how to identify the face of the cube that the barrel is attached to and to what part of the 3D world it is facing..either X+, Y+, Z+, X-, Y-, Z-. Forgive me if my lexicon is all wrong in describing this. I have not posted any of my attempts because they are not working at all.
Please take a look at this CodePen for an example of what I'm trying to do...
... and here's some code just because I can't post this on SO w/o it.
var geometry = new THREE.BoxGeometry( 50, 50, 50 );
var material = new THREE.MeshNormalMaterial();
var cube = new THREE.Mesh( geometry, material );
var cylgeo = new THREE.CylinderGeometry( 10, 5, 100, 32 );
var cylmesh = new THREE.Mesh( cylgeo, material );
cylmesh.rotateZ(Math.PI/2);
cylmesh.translateY(35);
var group = new THREE.Group();
group.add( cube );
group.add( cylmesh );
scene.add(group);
First, construct your "gun" so the barrel, by default, points up the positive-z axis by modifying your code like so:
cylmesh.rotateX( Math.PI / 2 );
Add a helper axis to your scene so your can see what you are doing:
scene.add( new THREE.AxisHelper( 100 ) );
In this configuration, when the parent group has rotation zero, the barrel of the gun points up the positive-z axis.
If the parent group is rotated, you can get the direction the group (and hence the barrel) is looking like so:
var vector = new THREE.Vector3(); // create once an reuse
...
group.getWorldDirection( vector );
The returned value of vector will be unit-length vector pointing in the same direction as the barrel.
three.js r.75
I'm trying to export an stl from Threejs using this stl exporter
https://gist.github.com/paulkaplan/6513707
When I open the model in meshlab the vertex positions don't seem to keep their rotations from the parent mesh.
The rotations are applied to the mesh, not the geometry. Is there any flag I need to set in order to update the vertex positions?
Here's the code Im using (CS):
geometry = new THREE.CubeGeometry( 10, 10, 10)
mesh = new THREE.Mesh(geometry)
mesh.position.set(10, 10, 10)
mesh.lookAt new THREE.Vector3
scene.add mesh
saveSTL(geometry, 'mesh')
You need to apply a transform to the geometry directly (instead of the mesh), in order for the exporter you are using to work as you intend.
geometry.applyMatrix( new THREE.Matrix4().makeRotationX( - Math.PI / 2 ) );
Look in Matrix4.js for the other transforms you can construct.
three.js r.62
I have multiple WebGL lines to render, and they all have the same rendering style. So for performance, I want to render them all as a single object, in a single draw call.
But the problem is that the lines don't all connect to each other.
See example here: http://jsfiddle.net/b6jgS/6/
As you can see the rings connect, but I don't want them to. Yet I still want to draw them in a single draw call.
The relevant code is this, which simply generates some geometry for some rings:
# Pardon the coffeescript!
ringsGeom = new THREE.Geometry()
for u in [-2..2]
for v in [0..100]
ringsGeom.vertices.push new THREE.Vector3(
Math.sin(v/100 * 2 * Math.PI)
Math.cos(v/100 * 2 * Math.PI)
u
)
rings = new THREE.Line(
ringsGeom
new THREE.LineBasicMaterial(
color: 0xffff00
linewidth: 1
)
)
scene.add rings
How do I have a single object draw multiple discreet disconnected lines?
You construct your geometry as an array of pairs of points representing individual line segments, and then create your line like so:
var line = new THREE.Line( geometry, material, THREE.LinePieces );
For an example, see GridHelper.js.
three.js r.58
P.S. three.js includes the requestAnimationFrame() shim. You do not need to include it yourself.