Vertices and face data into three object

Questions
1

Hello.
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.

2

There are two ways of building a mesh.

  1. With BufferGeometry:
    https://threejs.org/docs/#api/en/core/BufferGeometry
  2. With Geometry
    https://threejs.org/docs/#api/en/core/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.

3

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.

4

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

5

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.

6

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

7

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!

8

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.

9

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

https://hofk.de/main/discourse.threejs/2017/BufferGeometry/BufferGeometry.html
https://hofk.de/main/discourse.threejs/2017/Indexed%20BufferGeometry/Indexed%20BufferGeometry.html

https://hofk.de/main/discourse.threejs/2018/SurfaceGometry/SurfaceGometry.html
https://hofk.de/main/discourse.threejs/2018/Box%20DatGui/Box%20DatGui.html

https://hofk.de/main/discourse.threejs/2018/Camera-Beginner/Camera-Beginner.html
https://hofk.de/main/discourse.threejs/2019/CameraMovement/CameraMovement.html
https://hofk.de/main/discourse.threejs/2019/MoveObject/MoveObject.html

https://hofk.de/main/discourse.threejs/2018/TweenCubesRotation/TweenCubesRotation.html
https://hofk.de/main/discourse.threejs/2018/connectMeshSprite/connectMeshSprite.html
https://hofk.de/main/discourse.threejs/2018/interactiveShape/interactiveShape.html
https://hofk.de/main/discourse.threejs/2019/WallBuilding/WallBuilding.html
https://hofk.de/main/discourse.threejs/2019/ColorStripeChanging/ColorStripeChanging.html
https://hofk.de/main/discourse.threejs/2020/PlanePoints/PlanePoints.html

https://hofk.de/main/discourse.threejs/2018/selectingFaceindex/selectingFaceindex.html

Enjoy :slightly_smiling_face:

10

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. https://threejs.org/docs/#api/en/core/Face3