Can't find the face3 addon

Questions
1

I am trying to move to a new version of threejs.

Apparently, face3 is deprecated and is now manually added.

So I need to add, face3 support in the import.

So I found it here:

https://threejs.org/docs/#examples/en/math/convexhull/Face

So I need to add to my importmat, the face thing.

"three/addons/": "https://unpkg.com/three@<version>/examples/jsm/"

Which becomes

"three/addons/": "https://unpkg.com/three@0.149.1/examples/jsm/"

And then I need to go to the face3 thing.
Wherever that is stored on unpkg website.
I am looking at the following string:

three/addons/math/ConvexHull.js

And just guessing how that was ment to be added to the url.

Where is this face3 addon, stored in the unpkg library website?

2

it’s not clear exactly what you’re asking but the Face you have referenced is part of the ConvexHull class and can be imported from there like in the documentetion you have shared…

import { Face } from 'three/addons/math/ConvexHull.js';

the ConvexHull class can be found at UNPKG - three

1 Like
3

My Importmap is now like this:

"three": "../../modules/js/external/threejs/index/2/build/three.module.js",
"three/addons": "../../modules/js/external/threejs/convex/1/index.js"

Which appears to run.

But now I cannot import face with the following:

import { Face } from 'three/addons/math/ConvexHull.js';

I get, was a bare specifier error.

How do I import the face?

4

it’s best to keep the same folder structure as the library… try like this…

"three": "../../modules/js/external/threejs/index/2/build/three.module.js",
"three/addons/": "../../modules/js/external/threejs/index/2/examples/jsm/"

and then…

import { Face } from 'three/addons/math/ConvexHull.js';
1 Like
5

Incredibly, I can actually run that.

But I still do get the original error, of face not being a constructor.

In that example above, where in my file system, should I have placed the ConvexHull.js file?

6

it should be located in

../../modules/js/external/threejs/index/2/examples/jsm/math/ConvexHull.js

i guess…

1 Like
7

I checked it and the file is already there.

So I guess I don’t need to manually download that file into the system.

So the import, apparently, works.

But the following code:

const v=new THREE.Vector3(0, 1, 0);
var normal=triangle.getNormal(v);
var face=new THREE.Face3(
    0,
    1,
    2,
    normal,
    );

Is still giving me error:

THREE.Face3 is not a constructor



The index file has the following import: 
<script async src="../../modules/js/external/threejs/shims/index.js"></script>
<script type="importmap">{
"imports":{
   "three": "../../modules/js/external/threejs/index/2/build/three.module.js",
   "three/addons/":"../../modules/js/external/threejs/index/2/examples/jsm/"
    }}
</script>

And the top of the js file giving the error is the following:

import * as THREE from 'three';
import { Face } from 'three/addons/math/ConvexHull.js';
8

you’re importing the Face class but adding the THREE name space before it, try this…

import { Face } from 'three/addons/math/ConvexHull.js';

const v = new THREE.Vector3(0, 1, 0);
var normal = triangle.getNormal(v);
var face = new Face(
    0,
    1,
    2,
    normal,
    );
2 Likes
9

Yes, that did solve it. Removing the THREE, and the number 3 at the end.

Now i’m in the next error that appears in the next few lines:

var face=this.get_face(triangle, color);

mthreejs_api.prototype.get_face=function(triangle, color){
    const v=new THREE.Vector3(0, 1, 0); 
    var normal=triangle.getNormal(v);

    //THREE.Face3(
    var face=new Face(
        0,
        1,
        2,
       normal,
    );                                                                                                             

    var color=this.get_color({css:color.css});
    face.vertexColors.push(color);
    //face.vertexColors.push(color);
    //face.vertexColors.push(color);

    return face;
    };

The error is:

face.vertexColors is undefined

I have been trying to google but its hard.
Do you have any idea?

10

geometry.vertices was removed a long time ago… vertices are now defined as geometry.attributes.position. The array of which is comprised of every xyz coordinate of the vertices so…

geometry.attributes.position.array[0]
geometry.attributes.position.array[1]
geometry.attributes.position.array[2]

are the x, y and z coordinates of the first vertex.

1 Like
11

Geometry is now buffered geometry.
So that should be ok.

So now it’s like this

var geometry=new THREE.BufferGeometry();

var triangle=   this.triangle(points);

var face=       this.get_face(triangle, color);

geometry.attributes.position.array[0]=11;
//geometry.attributes.position.array[1]=22;
//geometry.attributes.position.array[2]=33;

//geometry.vertices.push(triangle.a);

But I get error

geometry.attributes.position is undefined
12

sorry but what you’ve replied with is completely out of context and doesn’t make sense. it may be best to start a new topic with an explanation of what you’re trying to achieve as well as a link to a live example…

1 Like
13

Here is the full code and I’m trying to uncomment the attributes line:

// How this is called:
// var geometry=ext.threejs.geometry_triangle(points, colors);
mthreejs_api.prototype.geometry_triangle=function(object){
var points=     object.geometry.points;
var color=      object.surface.color;

var geometry=new THREE.BufferGeometry();
var triangle=   this.triangle(points);
var face=       this.get_face(triangle, color);

//geometry.attributes.position.array[0]=11;
//geometry.attributes.position.array[1]=22;
//geometry.attributes.position.array[2]=33;

//geometry.vertices.push(triangle.a);
//geometry.vertices.push(triangle.b);
//geometry.vertices.push(triangle.c);

//geometry.faces.push(face);

return geometry;
};
14

is this.geometry() a method, that returns an object of THREE.BufferGeometry?

1 Like
15

Yes. Changed it from geometry to bufferGeometry this morning.
I will just write it directly from now on for clarity.

16

I will make a new question out of this. Soon.