I'm making a custom three.js geometry for non-orthogonal cubes. It is loosely based on the existing Box-geometry in three.js, but greatly simplified insofar that it only supports one segment per side and also has the absolute position of its vertices fed directly to it.
I have problems both in wire frame rendering and texture rendering. In wire frame rendering I only get to see one of the six sides, as can be seen here:
This is the snippet that I use for setting the material:
if (woodTexture) {
texture = THREE.ImageUtils.loadTexture( 'crate.gif' );
texture.anisotropy = makeRenderer.renderer.getMaxAnisotropy();
material = new THREE.MeshBasicMaterial( { map: texture } );
} else {
material = new THREE.MeshBasicMaterial( { color: color, wireframe: true, side: THREE.DoubleSide } );
}
I know for sure the path for crate.gif is valid, as it works for Box geometries.
Here follows my faulty geometry. The 'quadruplets' array contains six arrays with each four Vector3 instances. Each inner array delineates a side of the cube.
THREE.Box3Geometry = function (quadruplets, debug) {
THREE.Geometry.call(this);
var constructee = this; // constructee = the instance currently being constructed by the Box3Geometry constructor
buildPlane(quadruplets[0], 0, debug); // px
buildPlane(quadruplets[1], 1); // nx
buildPlane(quadruplets[2], 2); // py
buildPlane(quadruplets[3], 3); // ny
buildPlane(quadruplets[4], 4); // pz
buildPlane(quadruplets[5], 5); // nz
function buildPlane(quadruplet, materialIndex, debug) {
// populate the vertex array:
constructee.vertices.push(quadruplet[0]);
constructee.vertices.push(quadruplet[1]);
constructee.vertices.push(quadruplet[2]);
constructee.vertices.push(quadruplet[3]);
// construct faceVertexUvs:
var uva = new THREE.Vector2(0, 1);
var uvb = new THREE.Vector2(0, 0);
var uvc = new THREE.Vector2(1, 0);
var uvd = new THREE.Vector2(1, 1);
// construct faces:
var a = 0; // vertex: u:50, v:50
var b = 2; // vertex: u:50, v:-50
var c = 3; // vertex: u:-50, v:-50
var d = 1; // vertex: u:-50, v:50
// construct normal:
var pv0 = quadruplet[1].clone().sub(quadruplet[0]); // pv = plane vector
var pv1 = quadruplet[2].clone().sub(quadruplet[0]);
normal = new THREE.Vector3(0,0,0).crossVectors(pv0, pv1).normalize();;
var face1 = new THREE.Face3(a, b, d);
face1.normal.copy(normal);
face1.vertexNormals.push(normal.clone(), normal.clone(), normal.clone());
face1.materialIndex = materialIndex;
constructee.faces.push(face1);
constructee.faceVertexUvs[ 0 ].push([ uva, uvb, uvd ]);
var face2 = new THREE.Face3(b, c, d);
face2.normal.copy(normal);
face2.vertexNormals.push(normal.clone(), normal.clone(), normal.clone());
face2.materialIndex = materialIndex;
constructee.faces.push(face2);
constructee.faceVertexUvs[ 0 ].push([ uvb.clone(), uvc, uvd.clone() ]);
}
this.mergeVertices();
};
THREE.Box3Geometry.prototype = Object.create(THREE.Geometry.prototype);
And this is the Box geometry from which I was "inspired".
You build a nice array of vertices, but give every face1/face2 combo the same set of indexes into that array: 0, 1, 2, 3. You essentially define the same quad 6 times.
What you need to do is keep a running base offset and add that to the vertex indices used to define each face. If you look at your BoxGeometry example, you'll that they do exactly that.
Related
I want to create a grid of, let's say 500x500, and I want it to be able to be curved in certain places (think of it as space-time plane that's curved due to gravity). I'm stuck at the start.
This is what I found on the documentation:
// Create a sine-like wave
const curve = new THREE.SplineCurve( [
new THREE.Vector2( -10, 0 ),
new THREE.Vector2( -5, 5 ),
new THREE.Vector2( 0, 0 ),
new THREE.Vector2( 5, -5 ),
new THREE.Vector2( 10, 0 )
] );
const points = curve.getPoints( 50 );
const geometry = new THREE.BufferGeometry().setFromPoints( points );
const material = new THREE.LineBasicMaterial( { color : 0xff0000 } );
// Create the final object to add to the scene
const splineObject = new THREE.Line( geometry, material );
I think this should be working but it doesn't. I don't know how to create a multiple lines from here. I tried to handle some array but I didn't know where or how. I have done my research but I can't make any headway.
I have another question: Is that this is a Vector2 I need to make it 3d for that work? There a lot of other classes like CatmullRomCurve3, CubicBezierCurve3, etc, but the problem still is that i need to make an array to create all the vectors and lines.
--
EDIT i created a code for the grid lines but the curve probleme still the same
let size = 12, step = 1;
const geometry = new THREE.BufferGeometry();
// create a simple square shape. We duplicate the top left and bottom right
// vertices because each vertex needs to appear once per triangle.
const vertices = [];
for(var i = - size; i <= size; i += step) {
vertices.push( - size, - 0.4, i);
vertices.push( size, - 0.4, i);
vertices.push( i, - 0.4, - size);
vertices.push( i, - 0.4, size);
}
let positionAttribute = new THREE.Float32BufferAttribute(vertices, 3);
geometry.setAttribute("position", positionAttribute);
let lines = new THREE.LineSegments(geometry, new THREE.LineBasicMaterial());
In a three.js rendering, I have a small texture which I want to repeat multiple times. For this texture there is the map, a displacement map, a normal map, an ambient occlusion map and a specular map. As long as the repeating pattern is 1 in the x and 1 in the y direction, the image looks as expected. There is displacement where expected.
If the repeat values are greater than 1, all of the maps appear to scaled correctly except for the displacement map. The displacement map does not appear to be repeated. The displace is the same as shown in the previous image.
A code snippet for applying these maps to a plane follows:
///////////////////////////////////////////////
// add texture plane for a test
xRep = 1;
yRep = 1;
var loader = new THREE.TextureLoader();
var tex = loader.load('images/img.png');
tex.wrapS = tex.wrapT = THREE.RepeatWrapping;
tex.repeat.set(xRep, yRep);
var nloader = new THREE.TextureLoader();
var ntex = loader.load('images/img-normal.png');
ntex.wrapS = ntex.wrapT = THREE.RepeatWrapping;
ntex.repeat.set(xRep, yRep);
var aloader = new THREE.TextureLoader();
var atex = aloader.load('images/img-ao.png');
atex.wrapS = atex.wrapT = THREE.RepeatWrapping;
atex.repeat.set(xRep, yRep);
var dloader = new THREE.TextureLoader();
var dtex = dloader.load('images/img-v003-disp.png');
dtex.wrapS = dtex.wrapT = THREE.RepeatWrapping;
dtex.repeat.set(xRep, yRep);
var sloader = new THREE.TextureLoader();
var stex = sloader.load('images/img-v003-spec.png');
stex.wrapS = stex.wrapT = THREE.RepeatWrapping;
stex.repeat.set(xRep, yRep);
var faceMaterial = new THREE.MeshPhongMaterial({
color: 0xa0a0a0,
shininess: 30,
//map : tex,
//bumpMap : tex,
//bumpScale : 1,
displacementMap: dtex,
displacementScale: 10,
normalMap: ntex,
//normalScale : (1,1),
aoMap: atex,
//aoMapIntensity : 1,
specularMap: stex
//_last: 0
});
face = new THREE.Mesh(new THREE.PlaneGeometry(50, 50, 256, 256),
faceMaterial);
face.position.z = 50;
face.receiveShadow = true;
face.castShadow = true;
scene.add(face);
How can this snippet be modified so the displacement map is repeated the same as the other maps?
Note: This issue appear to be related to the discussion at issue #7826 on Git hub.
You want your displacement map to repeat, but the displacement map does not honor the offset repeat value in the current version of three.js.
A work-around is to modify the UVs of your geometry.
Suppose you want the displacement map to be repeated 3 times. Then, multiply your UVs by 3.
Using PlaneBufferGeometry, follow this pattern to do so:
var uvs = geometry.attributes.uv.array;
for ( var i = 0; i < uvs.length; i ++ ) uvs[ i ] *= 3;
For the other textures, if you wanted to, you could compensate by scaling their repeat values accordingly:
texture.repeat.set( 1 / 3, 1 / 3 );
If you are changing the buffer geometry UVs after rendering at least once, you will need to set:
mesh.geometry.attributes.uv.needsUpdate = true;
Also, be sure to read this post.
three.js r.79
I'm using the ExplodeModifier to duplicate the vertices so I can have individual control over Face3 objects.
For my specific example, this alone looks visually poor, so I decided to add 3 extra faces (per existing face) so I can have a pyramid shape pointing inwards the geometry.
I managed to modify the ExplodeModifier and create the extra faces, however I get several errors:
THREE.DirectGeometry.fromGeometry(): Undefined vertexUv and THREE.BufferAttribute.copyVector3sArray(): vector is undefined
I understand that now I have 9 extra vertices per face, so I need according uv's, and since I don't need a texture but a solid color I don't mind having the wrong uvs... So, I also duplicated the uvs and avoid the first warning but I can't get rid of the copyVector2sArray...
pseudo code:
var geometry = new THREE.IcosahedronGeometry( 200, 1 );
var material = new THREE.MeshPhongMaterial( { shading: THREE.FlatShading } );
var explodeModifier = new THREE.ExplodeModifier();
explodeModifier.modify( geometry );
var mesh = new THREE.Mesh( geometry, material );
scene.addChild( mesh );
The Explode Modifier has this pseudo code:
var vertices = [];
var faces = [];
for ( var i = 0, il = geometry.faces.length; i < il; i ++ ) {
(...)
var extraFace1 = new THREE.Face3().copy(face)
extraFace1.c = geometry.vertices[0]
var extraFace2 = new THREE.Face3().copy(face)
extraFace2.b = geometry.vertices[0]
var extraFace3 = new THREE.Face3().copy(face)
extraFace3.a = geometry.vertices[0]
faces.push( extraFace1 );
faces.push( extraFace2 );
faces.push( extraFace3 );
}
geometry.vertices = vertices;
geometry.faces = faces;
```
I added an example HERE. It works, but I want to avoid the console warnings...
As pointed out by #mrdoob I was assigning a THREE.Vector3 and not an index to the added THREE.Face3.
var extraFace1 = new THREE.Face3().copy(face)
extraFace1.a = geometry.faces.length * 3 - 1
var extraFace2 = new THREE.Face3().copy(face)
extraFace2.b = geometry.faces.length * 3 - 1
var extraFace3 = new THREE.Face3().copy(face)
extraFace3.c = geometry.faces.length * 3 - 1
jsfiddle updated
Hi folks,
I've got a question belongig surfaces in Three.js:
I got a bunch of Vec3 Points and want want to interpolate a surface through them. While searching, I stumbeled across beziers (three.js bezier - only as lines) and what looked more like I was searching : three.js Nurbs. I've tried to reconstruct the code, but the documentation was terrible (pages like this) and I didn't get how everything worked by reconstructing the code...
So here's the question:
Is there any easy way to get a shape out of my calculated points? (I would still be happy, if it's not interpolated).
Thank you guys!
Mat
Edit: What I want to acchieve is a surface plot. I stumbeled across http://acko.net/blog/making-mathbox/ but it's way too big for my needs...
After some try and error I found a solution: add a plane and than transform the single vertices.
// need to setup 'step', 'xStart', 'xEnd', 'yStart', 'yEnd'
// calc the variables
var width = Math.abs(-xStart+xEnd),
height = Math.abs(-yStart+yEnd);
var stepsX = width*step, stepsY = height*step;
var posX = (xStart+xEnd)/2;
var posZ = (yStart+yEnd)/2;
// add a plane and morph it to a function
var geometry = new THREE.PlaneGeometry( width, height, stepsX - 1, stepsY - 1 );
geometry.applyMatrix( new THREE.Matrix4().makeRotationX( - Math.PI / 2 ) );
var size = stepsX * (stepsY),
data = new Float32Array( size );
var count = 0, scope = {};
mesh = new THREE.Mesh( geometry, new THREE.MeshNormalMaterial( {
side : THREE.DoubleSide,
transparent: true,
shading: THREE.SmoothShading,
opacity : _opacity }));
mesh.updateMatrixWorld();
// calc y value for every vertice
for ( var i = 0; i < size; i ++ ) {
// calculate the current values
// http://stackoverflow.com/questions/11495089/how-to-get-the-absolute-position-of-a-vertex-in-three-js
var vector = mesh.geometry.vertices[i].clone();
vector.applyMatrix4(
mesh.matrixWorld
);
// set them into the scope
scope.x = vector.x + posX;
scope.y = vector.z + posZ;
// calculate point and write it in a temp array
data[i] = math.eval(term, scope);
}
// push the new vertice data
for ( var i = 0, l = geometry.vertices.length; i < l; i ++ ) {
geometry.vertices[ i ].y = data[ i ];
}
// update the new normals
geometry.computeFaceNormals();
geometry.computeVertexNormals();
// add to scene
scene.add( mesh );
Only issue is that it is not working for non static functions like tan(x). This snippet is using math.js to calc the term.
Greetings Mat
I am trying to render a large forest of 100,000+ very simple-looking trees in ThreeJS. Creating many individual meshes is of course out of the question. My current method uses GeometryUtils.merge to create one large geometry which reduces the number of draw calls and this works pretty well. But approaching 100k, it bogs down. I need to improve performance further and I have a feeling there may be another trick or two to increase performance by another factor of 10 or more.
The code is below and I've also created a JSFiddle demonstrating my current technique: http://jsfiddle.net/RLtNL/
//tree geometry (two intersecting y-perpendicular triangles)
var triangle = new THREE.Shape();
triangle.moveTo(5, 0);
triangle.lineTo(0, 12);
triangle.lineTo(-5, 0);
triangle.lineTo(5, 0);
var tree_geometry1 = new THREE.ShapeGeometry(triangle);
var matrix = new THREE.Matrix4();
var tree_geometry2 = new THREE.ShapeGeometry(triangle);
tree_geometry2.applyMatrix(matrix.makeRotationY(Math.PI / 2));
//tree material
var basic_material = new THREE.MeshBasicMaterial({color: 0x14190f});
basic_material.color = new THREE.Color(0x14190f);
basic_material.side = THREE.DoubleSide;
//merge into giant geometry for max efficiency
var forest_geometry = new THREE.Geometry();
var dummy = new THREE.Mesh();
for (var i = 0; i < 1000; i++)
{
dummy.position.x = Math.random() * 1000 - 500;
dummy.position.z = Math.random() * 1000 - 500;
dummy.position.y = 0;
dummy.geometry = tree_geometry1;
THREE.GeometryUtils.merge(forest_geometry, dummy);
dummy.geometry = tree_geometry2;
THREE.GeometryUtils.merge(forest_geometry, dummy);
}
//create mesh and add to scene
var forest_mesh = new THREE.Mesh(forest_geometry, basic_material);
scene.add(forest_mesh);
Can anyone suggest further techniques to make this load and render more quickly?
How about using billboards to render the trees? The 2D nature of billboards seem to suit this particular problem. Create a simple png tree texture with transparency, and add each tree as a PointCloud object - http://threejs.org/docs/#Reference/Objects/PointCloud
Most low-end graphics cards can render well over 10,000 billboard objects without a drop in framerate. I've updated your code using the billboards technique (changing the number of trees to 10,000 and using a 100 pixel high tree texture): http://jsfiddle.net/wayfarer_boy/RLtNL/8/ - extract of the code below:
geometry = new THREE.Geometry();
sprite = new THREE.Texture(image);
sprite.needsUpdate = true;
for (var i = 0; i < 10000; i++) {
var vertex = new THREE.Vector3();
vertex.x = Math.random() * 1000 - 500;
vertex.y = 0;
vertex.z = Math.random() * 1000 - 500;
geometry.vertices.push(vertex);
}
material = new THREE.PointCloudMaterial({
size: 50,
sizeAttenuation: true,
map: sprite,
transparent: true,
alphaTest: 0.5
});
particles = new THREE.PointCloud(geometry, material);
// particles.sortParticles = true;
// Removed line above and using material.alphaTest instead
// Thanks #WestLangley
scene.add(particles);
renderer = new THREE.WebGLRenderer({
clearAlpha: 1,
alpha: true
});