I am new to r3f. What i can trying to do is to get my model which is rigged from Maximo have a points mesh and material .
I tired looking everywhere but could not find anything on it . I am posting a image of what i have done to a not-rigged but and unable to do the same for rigged model .
Left side is the un rigged model and right is rigged model .
<points geometry={foo}>
<pointsMaterial />
</points>
you can use gltfjsx to create a scene graph/component from your model, you can simply edit the meshes into points now.
npx gltfjsx model.glb --transform
I am able to do this with the Not rigged model but no effect with the rigged Model . Here is the link for – sandbox
i know too little about rigging. isn’t rigging done with a skinnedmesh typically? i suppose THREE.Points simply doesn’t have that capability. otherwise, if you have an example of a rigged THREE.Points you would do it 1:1 the same in fiber. it’s just a different way to express three but it’s all the same.
I found this example similar to mine but am unable to convert three.js code to r3f code . Can you help me with this please ?? Here is the link
That example is concerned with animating “instanced” meshes, so introduces additional complications.
What about this StackOverflow?
I am not able to convert this into results . Can you help me with this?
Hey, I couldn’t get it to work either. I will have another go and get back to you.
if you have a sandbox with your attempt it’s probably just a small typo or mistake, you use it like in the example you posted. if you want to use 3rd party classes, that’s what extend is for React Three Fiber Documentation
but sifting through the vanilla code to figure out how the class must be used, i don’t have the time right now unfortunately.
There isn’t really any equivalent of SkinnedMesh for THREE.Points, i.e. no SkinnedPoints, and THREE.Points does not handle skinning. I think you could assign a PointsMaterial to a SkinnedMesh and get basically the results you expect, though.
Hey, I created an example of a movable character with 3 working “similar” effects, and one broken one that I’d like to fix.
The “Custom Wireframe” is based on webgl_materials_wireframe and I cannot get it to work.
I know this doesn’t solve your question about PointsMaterial for SkinnedMesh, but it might be a stepping stone in the right direction.
likely needs some shader code? i would look into drei outline/wireframe to compare notes.
Hey, thanks @drcmda I already tried (and failed) to do this in the CodeSandbox.
Here is the relevant code, any pointers much appreciated.
/**
* 🚧 not working i.e. extra faces are being shown
* Based on: https://threejs.org/examples/webgl_materials_wireframe
*/
export const CustomWireframeMaterial = shaderMaterial(
{
thickness: 2,
},
/* glsl */`
attribute vec3 center;
varying vec3 vCenter;
#include <skinning_pars_vertex>
void main() {
vCenter = center;
#include <skinbase_vertex>
#include <begin_vertex>
#include <skinning_vertex>
#include <project_vertex>
}
`,
/* glsl */`
uniform float thickness;
varying vec3 vCenter;
void main() {
vec3 afwidth = fwidth( vCenter.xyz );
vec3 edge3 = smoothstep( ( thickness - 1.0 ) * afwidth, thickness * afwidth, vCenter.xyz );
float edge = 1.0 - min( min( edge3.x, edge3.y ), edge3.z );
gl_FragColor.rgb = gl_FrontFacing ? vec3( 0.9, 0.9, 1.0 ) : vec3( 0.4, 0.4, 0.5 );
gl_FragColor.a = edge;
}
`,
);
// view-source:https://threejs.org/examples/webgl_materials_wireframe
React.useMemo(() => {
const geometry = nodes.Cube.geometry;
geometry.deleteAttribute('normal');
geometry.deleteAttribute('uv');
console.info('geometry.attributes', geometry.attributes);
const basis = [new THREE.Vector3(1, 0, 0), new THREE.Vector3(0, 1, 0), new THREE.Vector3(0, 0, 1)];
const position = geometry.attributes.position;
const centers = new Float32Array( position.count * 3 );
for (let i = 0, l = position.count; i < l; i ++)
basis[i % 3].toArray(centers, i * 3);
geometry.setAttribute('center', new THREE.BufferAttribute(centers, 3));
}, []);
