Rotate and scale geometry

Hey guys,

Three.js noob here…
Am trying to create a small env scene using threejs for fun :blush:

Screenshot (81)

I am looking at reducing the no of draw calls by merging the geometry.
One of the things am doing is…

const leafGeo = new THREE.ConeGeometry(1.5, 3, 4, 2, false);
leafGeo.translate(0, 4, 0);

How can I rotate and scale the geomentry :thinking: I want to modify the geometry before adding it to THREE.Mesh. :slightly_smiling_face:

Thanks!

You can use these methods:

.rotateX()
.rotateY()
.rotateZ()
.scale()

Besides, you can also directly apply a transformation matrix to the geometry with: .applyMatrix4()

Please read the docs for more information.

3 Likes

Thanks @Mugen87 for the help! :bowing_man: That solves the problem :slight_smile:
and my sun now has rays… :smile:
image

1 Like

.translate ( x, y, z )

Translate the geometry. This is typically done as a one time operation, and not during a loop Use Object3D.position for typical real-time mesh translation.

Documentation warns about not using the translate/rotate/scale in a for loop but dosen’t gives any reason for it. Can someone throw light on why ?

For leafs am doing something like this.

const leafsGeo = new t.Geometry();
const leafGeo = new t.ConeGeometry(1.5, 3, 4, 2, false);
leafGeo.translate(0, 4, 0);
const leafMtl = new t.MeshLambertMaterial({
    color: 0x228B22
});
const leafCount = 3;
for (var i = 0; i < leafCount; i++) {
    leafGeo.translate(0, 1.2, 0);
    leafsGeo.merge(leafGeo);
}
var leaf = new t.Mesh(leafsGeo, leafMtl);

The idea behind doing this is to reduce the draw calls. :slightly_smiling_face: Am I doing it wrong :thinking:

I bet they meant not to use translate in render loop.

3 Likes

Correct! :blush:

1 Like

@fifonik The documentation is a little unclear and my brain just assumed it as for loop :slightly_frowning_face: Thanks for clarifying. Gonna fix the documentation :smile:

1 Like

In case you’re interested, I made a topic about being able to modify Geometry transforms in a loop.