Texturing THREE.Points

[tquintudelft-source]

I’m sure this has been asked before but I’ve searched around and haven’t found a direct solution for the problem I’m having.

I’m trying to apply a texture to a THREE.Points object, but so far I’ve only been able to wrap the whole texture around each point. Ideally, I want it to sample the color of each point from the corresponding location in the texture.

I already wrote some code that does this manually, but it is of course very slow. I was wondering if there is a built-in way to do this and if so what exactly is it?

I’ve included images to explain what I mean:

This is the model being created as a THREE.Mesh where the texture works fine

Code:

const material = new THREE.MeshBasicMaterial({map: texture});
const mesh = new THREE.Mesh(teacherModel, material);

And this is what is happening with THREE.Points

Code:

const material = new THREE.PointsMaterial({map: texture, size: 0.2});
    const mesh = new THREE.Points(teacherModel, material);

Any help would be greatly appreciated.

[prisoner849]

Hi!
In case, when you’ve got uv coordinates on your geometry teacherModel (seems it has them), use modified PointsMaterial().

Example: https://jsfiddle.net/prisoner849/v970bpmy/
Picture:

[tquintudelft-source]

Hi!
Yes, the UV coordinates are already computed. This is great! Thank you for your help!

[tquintudelft-source]

If you don’t mind, I have another question.

This texturing needs to run for every frame of a video stream. Is there a way to separate the creation of the shader => {…} part so that it doesn’t need to be run every frame? Could it be defined once and then just referenced each time? Something like this:

onBeforeCompile: shader => shaderPredefined

where shaderPredefined is the whole definition.

[prisoner849]

You don’t need to re-create the shader on each frame.
I modified the previous example, using the code from here: three.js examples

Example: https://jsfiddle.net/prisoner849/9ah0byuc/
Picture:

[tquintudelft-source]

Awesome, thanks!