About "Pythreejs" equivalent implementation in pure "Three.js" javascript.

[KelSolaar]

Hi,

I was wondering what was the equivalent implementation of this pythreejs code in pure Three.js javascript:

from IPython.display import display
from pythreejs import *

width=640
height=480

vertices = [[0.3, 0.6, 0.715], [0.313, 0.329, 0.0], [0.313, 0.329, 0.0], [0.64, 0.33, 0.213], [0.64, 0.33, 0.213], [0.419, 0.505, 0.928], [0.419, 0.505, 0.928], [0.3, 0.6, 0.715], [0.225, 0.329, 0.787], [0.15, 0.06, 0.072], [0.15, 0.06, 0.072], [0.321, 0.154, 0.285], [0.321, 0.154, 0.285], [0.313, 0.329, 1.0], [0.313, 0.329, 1.0], [0.225, 0.329, 0.787], [0.64, 0.33, 0.213], [0.313, 0.329, 0.0], [0.313, 0.329, 0.0], [0.15, 0.06, 0.072], [0.15, 0.06, 0.072], [0.321, 0.154, 0.285], [0.321, 0.154, 0.285], [0.64, 0.33, 0.213], [0.419, 0.505, 0.928], [0.3, 0.6, 0.715], [0.3, 0.6, 0.715], [0.225, 0.329, 0.787], [0.225, 0.329, 0.787], [0.313, 0.329, 1.0], [0.313, 0.329, 1.0], [0.419, 0.505, 0.928], [0.15, 0.06, 0.072], [0.313, 0.329, 0.0], [0.313, 0.329, 0.0], [0.3, 0.6, 0.715], [0.3, 0.6, 0.715], [0.225, 0.329, 0.787], [0.225, 0.329, 0.787], [0.15, 0.06, 0.072], [0.321, 0.154, 0.285], [0.64, 0.33, 0.213], [0.64, 0.33, 0.213], [0.419, 0.505, 0.928], [0.419, 0.505, 0.928], [0.313, 0.329, 1.0], [0.313, 0.329, 1.0], [0.321, 0.154, 0.285]]
colours = [u'#00ff00', u'#000000', u'#000000', u'#ff0000', u'#ff0000', u'#ffff00', u'#ffff00', u'#00ff00', u'#00ffff', u'#0000ff', u'#0000ff', u'#ff00ff', u'#ff00ff', u'#ffffff', u'#ffffff', u'#00ffff', u'#ff0000', u'#000000', u'#000000', u'#0000ff', u'#0000ff', u'#ff00ff', u'#ff00ff', u'#ff0000', u'#ffff00', u'#00ff00', u'#00ff00', u'#00ffff', u'#00ffff', u'#ffffff', u'#ffffff', u'#ffff00', u'#0000ff', u'#000000', u'#000000', u'#00ff00', u'#00ff00', u'#00ffff', u'#00ffff', u'#0000ff', u'#ff00ff', u'#ff0000', u'#ff0000', u'#ffff00', u'#ffff00', u'#ffffff', u'#ffffff', u'#ff00ff']
geometry = Geometry(vertices=vertices, colors=colours)
wireframe = LineSegments(geometry=geometry, material=LineBasicMaterial(vertexColors='VertexColors'))

scene = Scene(children=[wireframe])
camera = PerspectiveCamera(
        position=[-3, 3, 3], fov=20, aspect=width / height)
controls = OrbitControls(controlling=camera)

Renderer(
        camera=camera,
        scene=scene,
        controls=[controls],
        width=width,
        height=height,
        antialias=True)

I did try few things but no cigar if I don't provide faces in a way or another, so it makes me wonder what is going on under the hood in pythreejs. Interestingly, the Three.js Geometry class constructor does not take any arguments while the pythreejs version does.

Is there a document explaining how the binding is performed? I did not spend too much time looking at the code but it was not crystal clear.

Cheers,

Thomas

[vidartf]

Hi, Thomas!

I'm a little unsure exactly what you are after here. I could manually transcribe all this to JS, but I don't want to spend the time and effort if I could answer your question in a simpler manner. If you are wondering how to set up a LineSegment in pure three.js I would recommend finding examples/tutorials for that. I cannot see why LineSegment should require faces to be set anywhere.

If you are wondering about the pythreejs code, if you can give me a few more specific questions I can better answer concisely. The synchronization logic is a little complex, and I should probably write it up in more detail in the dev guide at some point, but that will have to be a little later.

[KelSolaar]

Hi,

I should have said indices instead of faces (even though they ultimately are represented with indices). I found an example on how to do that in pure JS: https://stackoverflow.com/a/35179514 and it turns out you don't necessarily need to set the indices when fiddling with it either. I'm not sure what I did incorrectly.

if you can give me a few more specific questions I can better answer concisely.

In that case I was wondering how

wireframe = LineSegments(geometry=geometry, material=LineBasicMaterial(vertexColors='VertexColors'))

was translated to the equivalent in three.js.

Cheers,

Thomas

[vidartf]

wireframe = LineSegments(geometry=geometry, material=LineBasicMaterial(vertexColors='VertexColors'))

Should become:

var wireframe = new THREE.LineSegments(geometry, new THREE.LineBasicMaterial());
// I don't think `vertexColors` does anything for the LineBasicMaterial

Your issue might be related to the construction of the vertices array. I know I sometimes struggle to get it right.

[KelSolaar]

Right and I suppose geometry is just the equivalent three.js Geometry class and not BufferGeometry. vertexColors works for LineBasicMaterial btw!

[vidartf]

Right and I suppose geometry is just the equivalent three.js Geometry class and not BufferGeometry

Geometry and BufferGeometry are both available in pythreejs, and distinct.

vertexColors works for LineBasicMaterial btw!

Ah yes, I misread the code. Nevermind :)

[KelSolaar]

Thanks! Closing this one 👍