Trying out some three.js and r3f

Showcase
1

Trying some threejs :smile:
https://twitter.com/asimkhan7330/status/1506338566498045959?s=20&t=bvcGiYE4frd7C-V3NQRbWg

2

what kind of sorcery is this?

3

ok, seriously, can you explain for us people who can’t even code hello world, what is happening here? :sweat_smile:

4

So everything that’s possible in React can be exported to Studio using Plasmic Code Components API. The above example has React Three Fiber specific components and requires some basic understanding of threejs. Such as Mesh, Geometry, Material and Light objects.

I created the following code components using react-three-fiber library

  1. CanvasCC
    a. It provides React Three Canvas component functionality
  2. MeshCC
    a. It simply wraps it’s children in mesh element. It’s similar to div but it renders to 3d element
  3. ThreeGeometryCC
    a. It provides functionality of rendering a threejs geometry element. Such as boxBufferGeometry, spherBufferGeometry etc
  4. ThreeMaterialCC
    a. It provides functionality of rendering a threejs material element. Such as meshStandardMaterial
  5. ThreeLightCC
    a. it provides functionality of rendering a threejs light element. Such as ambientLight, directionalLight.
    All of the above components receive properties directly from the studio using a properties json exposed using Code Components API.
5

thanks for the explanation! I already have one of your videos in my watch-later list