Movement of a Spider Model

Questions
1

Hi y’all!

I want to use my 3D model and have a an accurate depiction of what is happening in real life, this three.js project will be linked to the real thing and I want to create a website where I can move the body of the spider and see what the legs do, which angles need to be set and everything else. I tried using cannon.js but the constraints don’t want to connect with each other.

The 3D model that I’m using: Assembly - Hexapod calibrated - Download Free 3D model by stemi [9f8ffc7] - Sketchfab
My code:

import React from 'react'
import { useRef } from 'react'
import { Canvas, useLoader  } from '@react-three/fiber'
import { OrbitControls, PivotControls } from '@react-three/drei'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
import { Physics, usePointToPointConstraint } from '@react-three/cannon'

function Model(props) {
  // This reference gives us direct access to the THREE.Mesh object
  const ref = useRef()
  const gltf = useLoader(GLTFLoader, 'src/assets/3dmodel/scene.gltf')
  const body = useRef()
  const joint1 = useRef()

  usePointToPointConstraint(body.current, joint1.current)
  return (
    <PivotControls>
      <mesh
        {...props}
        ref={ref}
        receiveShadow
        castShadow
        scale={0.02}>
        <group >
          <primitive object={gltf.scene} />
        </group>
        <group ref={body} rotation-x={Math.PI / -2}>
          <mesh>
            <primitive object={gltf.scene.getObjectByName('Top_plate_i_kukovi_v21')}/>
            <primitive object={gltf.scene.getObjectByName('standoff_m2-31_v11')}/>
            <primitive object={gltf.scene.getObjectByName('standoff_m2-31_v12')}/>
            <primitive object={gltf.scene.getObjectByName('standoff_m2-31_v13')}/>
            <primitive object={gltf.scene.getObjectByName('standoff_m2-31_v14')}/>
            <primitive object={gltf.scene.getObjectByName('92005A0231')}/>
            <primitive object={gltf.scene.getObjectByName('92005A023(Mirror)(Mirror)1')}/>
            <primitive object={gltf.scene.getObjectByName('92005A023(Mirror)(Mirror)(Mirror)1')}/>
            <primitive object={gltf.scene.getObjectByName('92005A023(Mirror)(Mirror)_(1)1')}/>
            <primitive object={gltf.scene.getObjectByName('92005A1201')}/>
            <primitive object={gltf.scene.getObjectByName('94997A125_(1)1')}/>
            <primitive object={gltf.scene.getObjectByName('92005A120(Mirror)1')}/>
            <primitive object={gltf.scene.getObjectByName('92005A120(Mirror)2')}/>
            <primitive object={gltf.scene.getObjectByName('92005A120(Mirror)(Mirror)1')}/>
            <primitive object={gltf.scene.getObjectByName('92005A120(Mirror)(Mirror)(Mirror)1')}/>
            <primitive object={gltf.scene.getObjectByName('92005A120(Mirror)(Mirror)_(1)1')}/>
            <primitive object={gltf.scene.getObjectByName('94997A125_(1)(Mirror)1')}/>
            <primitive object={gltf.scene.getObjectByName('94997A125_(1)2')}/>
            <primitive object={gltf.scene.getObjectByName('94997A125_(1)(Mirror)_(1)1')}/>
            <primitive object={gltf.scene.getObjectByName('94997A125_(1)3')}/>
            <primitive object={gltf.scene.getObjectByName('94997A125_(1)(Mirror)_(2)1')}/>
            <primitive object={gltf.scene.getObjectByName('bottom_za_rezanje_fin_v81')}/>
            <primitive object={gltf.scene.getObjectByName('PCB_v21')}/>
            <primitive object={gltf.scene.getObjectByName('92005A023(Mirror)1')}/>
            <primitive object={gltf.scene.getObjectByName('Body86')}/>
            <primitive object={gltf.scene.getObjectByName('Body87')}/>
            <primitive object={gltf.scene.getObjectByName('Body88')}/>
          </mesh>
        </group>
        <group rotation-x={Math.PI / -2}>
          <primitive ref={joint1} object={gltf.scene.getObjectByName('Bone_link_v3(Mirror)1')} />
        </group>
      </mesh>
    </PivotControls>
  )
}


const tdm = () => {
  return (
    <div className='bg-primary rounded-md w-2/3 mr-3 mb-3 h-[70%]'>
      <Canvas shadows className='h-full w-full' camera={{ fov: 60, position: [4, 3, 7] }}>
        <ambientLight intensity={2} />
        <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} />
        <pointLight position={[-10, -10, -10]} />
        <Physics>
          <Model></Model>
        </Physics>
        <OrbitControls/>
      </Canvas>
    </div>
  )
}

export default tdm
2

You may need to look into Kabsh algorithm for this…

Solved thanks to VoR

You may also consider using the CCDIKSolver class in conjunction with or seperately to Kabsh…

2 Likes
3

Also you can have a look at this closed-chain-ik-js example by the almighty @gkjohnson which is doing pretty much exactly what you need…

2 Likes