Vertices and face data into three object

Im trying to manually give an array of vertices and faces to a threejs object, i want to then take that object and feed it to a threejs mesh constructor. im curious how i format the data, and where exactly it goes, as well as what constructors i use.

i was thinking something like this.

let geometry = new THREE.geometry();
geometry.vertices = [vertices];
geometry.faces = [faces];
let myMesh = new THREE.Mesh(geometry, material);

can anyone help me figure out exactly how to format my data, and the bare minimum i need for THREE.Mesh() to except the geometry object? im a c++ openGL guy, if that helps in explaining it to me, and what i know. im also curious about indices, and if it can calculate normals on its own, or if i need to program that.

There are two ways of building a mesh.

  1. With BufferGeometry:
  2. With Geometry

Each one has its own example at the top of the page. BufferGeometry is recommended because it’s less resource-intensive, but they both work.

Hi! Is it possible to format your code, it’s just a bit easier on the eyes.

I think it’s pretty self explanatory with Geometry. What you wrote is how i think it can be used. Note three doesn’t really like:

mesh.position = vector

or at least wont do what you expect but:

mesh.position.copy(vector) //under the hood

With vertices and faces though i think it works.

Vertices should just be Vector3 and faces have a Face3 class which is complex.

You can also use BufferGeometry which uses type arrays and would be more similar to cpp /ogl.

oooh i searched the documentation and i didnt find these. i gotta learn how to crawl through the docs better. thanks!

Thanks! ya im super new to JS and this api. i learned js in two days and just was like " okay thats good " and now im trying to figure out how this engine handles everything, so i dont have to learn webGL and build a ground up solution for this client.

WebGL is just OpenGL ES2. The gotchas are mostly coming from the “web” and javascript.

yes… im very interested in finding out all the problems the web will bring. i jumped into the deepend and am working on my work first job in software engineering as a contractor, flying solo… i love hate it haha. but thanks for the help!

I think the biggest piece of advice is to be mindful of this pattern.

const myObject = new Object3D()
//myObject.position = new Vector3(1,1,1) NO
myObject.position.set(1,1,1) //YES

Which expands to all math operations. You don’t want to create matrix and vector objects and cache them as much as possible.

One always learns well from simple examples. The original examples are sometimes quite difficult for beginners to overlook.

In the source code are links to the origin.

A selection of these for the beginning. Note .addAttribute is now better .setAttribute

Enjoy :slightly_smiling_face:

so im using obj, and obj indices start at 1. should i make every indice element like

indice[i] -= 1;

does three js want them to start at 1 or 0?

ahh wait… i got it.