Merging five geometries in version 150

Showcase
1

Merging five geometries in version 150

Hi Three.js followers,

Please write me if is there a simple way to set color attributes for each geometry.

the link:

http://jrlazz.eu5.org/anim/mergo.html

Again, Thanks for the great Three.js Team!

José Roberto Lazzareschi

mergo

1 Like
2

Simply save the information about geometry vertices to any structure you comfortable with and use it to color a specific part.

изображение
изображение950×860 83.4 KB

I used an array of objects {start: _number_, count: _number_} in mesh.userData.gIndex. Pretty similar to groups, the difference is there’s the count for vertices only, no matter what geometry it is, indexed or non-indexed: https://codepen.io/prisoner849/full/PodjbJo

1 Like
3

Thank You very much for the attention.
I will study your code. :wink:

4

Dear Paul,
I confess that I have difficulty with functions like => {…}
So I stopped and thus could not understand the way in which you created the geometries.
But there must be a way to create geometries one by one, in a way that I can understand and get the same color changes.
Thank You anyway once again!

5

No problem. I modified that codepen, turned arrow expressions into functions and for-loops :slight_smile:

1 Like
6

Although arrow-functions may be hard to read/grasp at first, they have a significant benefit over regular functions. Most notably is that they don’t have/create a scope, which may give a performance benefit.

The easiest explanation is that anything after => is considered a return value, meaning that this:

const myFunc = () => 42;

is the same as this:

const myFunc = function () { return 42; }

A little ‘gotcha’ that explains the scoping benefit a bit more: Imagine having a class that has some properties. You’re writing a method in said class and want to access a property of the class from inside a forEach-callback. With regular functions, you would do something (hacky) like reassign the this variable to a temporary variable (called that):

class MyClass
{
    #somePrivateValue = 42;

    myMethod()
    {
        const that = this;

        myArray.forEach(function() {
            // "this" refers to the inner-scope of this "function", rather 
            // than the class instance. We'll have to use another variable
            // to access the class instance.
            that.#somePrivateValue++;
        });
    }

    methodUsingArrowFunction()
    {
        myArray.forEach(() => {
            // This just works, beacuse "() => {}" does not create a scope,
            // meaning "this" is still an reference to the class instance.
            this.#somePrivateValue++;
        });
    }
}
2 Likes
7

WOW…
You are really a special person…
Thank You once and twice again.
I will study it again! :smiley:

1 Like
8

Thank You Harold for the lesson…
I will take a great look at the code to find a way to learn it. :wink:

1 Like
9

A modified code where I could start to understand what is necessary to make the things happen:
http://jrlazz.eu5.org/anim/mergo_P.html