Is a new release coming soon?

[sw-vish]

Hi,
I've been looking into using Three.JS with SolidJs and found this package. However, the last release on NPM was 8 months ago. Looking around, I can see there's a large pull request as well as recently updated fork at https://github.com/vorth/solid-three. So, I'm wondering if there are any plans to release a new version to NPM any time soon?

Thanks!

[vorth]

We have a critical mass problem at the moment; the principal developer for all the recent work is focused on other projects at the moment. That large PR needs a lot more testing than I have done. If you have an app that could be ported to try this branch without too much difficulty, I'd be happy to help you with any questions about the dev workflow or even the API, since I've done a port recently. Just having someone new engaged in the project might be the catalyst we need.

[bigmistqke]

Hi 👋

I wrote the big pr moving from reconciler to proxy this summer, but have been pre-occupied eversince. It's in a place where it needs actual codebases to be tested on, not the small tests I used when writing the code.

If you would like to test I recommend using Vorth's fork, he cleaned up some of the oddities in how I initially structured the repo.

[sw-vish]

Hi! Thanks for the replies.

I'm currently in the exploratory phases of a project with 3D requirements, which is how I came across this. I should be able to switch to using a different branch or fork without too much hassle, though given the early stage of the project it's unlikely to be a thorough test.

If I were to change branches, I have two questions:

1. Which repository (this one or the fork), and which branch in that repository should I switch to?
2. What would be the recommended way of integrating that branch into the project? (eg. NPM with git url, git submodule etc.)

[vorth]

You should use the fork, vorth/solid-three, and the no-modules branch there. You'll have to make a local clone of the fork, and also https://github.com/bigmistqke/drei if you need it.

I have been testing successfully by using Yalc. See the commit message log and changes for commit 6e0ea83a88a1a8b008813a41ee0a10850534cc0b. Yalc acts like a local npm repo, so you'll build and "publish" solid-three/fiber first, then solid-three/drei based on that (assuming you need it), then your own app. There is also a Yalc step that modifies a package.json to use the Yalc repo... see the Yalc docs.

To spell this out a little more clearly: (don't assume these are ready-to-use command lines!)

1. git clone vorth/solid-three
2. yalc publish solid-three/fiber
3. git clone bigmistqke/drei
4. yalc add solid-three/fiber
5. yalc publish solid-three/drei
6. cd yourproject
7. yalc add solid-three/fiber
8. yalc add solid-three/drei
9. build and debug yourproject

[sw-vish]

Thanks for the detailed instructions!

I was able to clone and build vorth/solid-three (no-modules branch), though I did get some Typescript errors (log below), and then add it using yalc. Migration was relatively straightforward, mostly involving updating the import declarations and changing JSX element names. The most prominent issues so far are:

1. When using <T.Primitive /> to show a loaded model, I can set the rotation property and it works correctly, but is flagged by TSC as not existing on the element.
2. The same <T.Primitive /> also doesn't seem to handle any click/pointer events. I added onClick={x => console.log(x)} but nothing happens.

It's possible that I'm not using these elements correctly, or have missed a configuration, or they're just a result of the build errors.

Solid-Three Build Log

[0] 
[0] > @solid-three/fiber@0.9.0 build:lib
[0] > vite build
[0] 
[1] 
[1] > @solid-three/fiber@0.9.0 build:types
[1] > tsc --emitDeclarationOnly --declarationDir types
[1] 
[0] vite v4.4.9 building for production...
[1] src/core/proxy.tsx(54,14): error TS2739: Type '{}' is missing the following properties from type 'IntrinsicElements': HasObject3dMember, HasObject3dMethods, MyColor
[1] src/core/renderer.tsx(372,24): error TS2353: Object literal may only specify known properties, and 'children' does not exist in type 'Accessor<Element>'.
[1] src/core/renderer.tsx(433,18): error TS2322: Type 'Element | Accessor<Element>' is not assignable to type 'Element'.
[1]   Type 'Accessor<Element>' is not assignable to type 'Element'.
[1] tests/core/hooks.test.tsx(30,14): error TS2304: Cannot find name 'createCanvas'.
[1] tests/core/hooks.test.tsx(159,13): error TS2488: Type 'Resource<GLTF[]>' must have a '[Symbol.iterator]()' method that returns an iterator.
[1] tests/core/hooks.test.tsx(193,24): error TS2345: Argument of type 'typeof Loader' is not assignable to parameter of type 'LoaderProto<unknown>'.
[1]   Types of construct signatures are incompatible.
[1]     Type 'new (manager?: LoadingManager | undefined) => Loader' is not assignable to type 'new (...args: any[]) => Loader<unknown>'.
[1]       Property 'loadAsync' is missing in type 'Loader' but required in type 'Loader<unknown>'.
[1] tests/core/hooks.test.tsx(193,49): error TS2322: Type 'Loader<unknown>' is not assignable to type 'Loader'.
[1] tests/core/hooks.test.tsx(193,49): error TS2322: Type 'Loader<unknown>' is not assignable to type 'Loader'.
[1]   The types returned by 'load(...)' are incompatible between these types.
[1]     Type 'unknown' is not assignable to type 'null'.
[1] tests/core/hooks.test.tsx(195,38): error TS2786: 'Test' cannot be used as a JSX component.
[1]   Its return type 'Resource<unknown>' is not a valid JSX element.
[1]     Type 'Unresolved' is not assignable to type 'Element'.
[1] tests/core/renderer.test.tsx(80,20): error TS2304: Cannot find name 'createCanvas'.
[1] tests/core/renderer.test.tsx(376,55): error TS2322: Type '{ children: Element; object: Group; onPointerOver: () => null; }' is not assignable to type 'IntrinsicAttributes & Omit<Partial<Group>, "object" | "children" | "ref"> & { object: Group; children?: Element; ref?: Group | ... 1 more ... | undefined; }'.
[1]   Property 'onPointerOver' does not exist on type 'IntrinsicAttributes & Omit<Partial<Group>, "object" | "children" | "ref"> & { object: Group; children?: Element; ref?: Group | ... 1 more ... | undefined; }'.
[1] tests/core/renderer.test.tsx(621,8): error TS2339: Property 'outputColorSpace' does not exist on type 'WebGLRenderer'.
[1] tests/core/renderer.test.tsx(625,15): error TS2339: Property 'outputColorSpace' does not exist on type 'WebGLRenderer'.
[1] tests/core/renderer.test.tsx(629,15): error TS2339: Property 'outputColorSpace' does not exist on type 'WebGLRenderer'.
[1] tests/core/renderer.test.tsx(636,14): error TS2322: Type 'null' is not assignable to type 'ConstructorRepresentation'.
[1] tests/core/renderer.test.tsx(827,50): error TS2454: Variable 'child' is used before being assigned.
[1] tests/core/renderer.test.tsx(828,39): error TS2454: Variable 'attachedChild' is used before being assigned.
[1] tests/core/renderer.test.tsx(833,50): error TS2454: Variable 'child' is used before being assigned.
[1] tests/core/renderer.test.tsx(834,39): error TS2454: Variable 'attachedChild' is used before being assigned.
[1] tests/core/renderer.test.tsx(839,50): error TS2454: Variable 'child' is used before being assigned.
[1] tests/core/renderer.test.tsx(840,39): error TS2454: Variable 'attachedChild' is used before being assigned.
[1] tests/web/canvas.test.tsx(31,17): error TS2322: Type 'HTMLCanvasElement' is not assignable to type 'HTMLDivElement | ((el: HTMLDivElement) => void) | undefined'.
[1]   Property 'align' is missing in type 'HTMLCanvasElement' but required in type 'HTMLDivElement'.
[1]  ELIFECYCLE  Command failed with exit code 2.
[1] pnpm build:types exited with code 1
[0] transforming...
[0] ✓ 22 modules transformed.
[0] rendering chunks...
[0] 
[0] [vite:dts] Start generate declaration files...
[0] computing gzip size...
[0] dist/index.js  57.95 kB │ gzip: 15.05 kB
[0] [vite:dts] Declaration files built in 2394ms.
[0] 
[0] dist/index.cjs  59.83 kB │ gzip: 15.30 kB
[0] No name was provided for external module "solid-js/web" in "output.globals" – guessing "web".
[0] No name was provided for external module "solid-js" in "output.globals" – guessing "solidJs".
[0] No name was provided for external module "three" in "output.globals" – guessing "THREE".
[0] No name was provided for external module "solid-js/store" in "output.globals" – guessing "store".
[0] dist/index.umd.cjs  63.71 kB │ gzip: 15.65 kB
[0] ✓ built in 2.82s
[0] pnpm build:lib exited with code 0

I haven't used solid-drei thus far, since it isn't published. I've instead just been replicating the elements I need (eg. Controls). I did clone it and try to build the solid-drei branch but got stymied by a ton of Typescript errors.

[clicktodev]

I gave this a try but there's a problem where new items added to an array don't show up in the scene.

[bigmistqke]

@sw-vish I published the proxy version as a next pre-release: you can play around with it at solid-three@next

[bigmistqke]

@clicktodev if you can make an extra issue with a minimal reproduction (in the solid playground) i can have a look at it.

[bigmistqke]

@sw-vish i just tried to reproduce your <T.Primitive/> bug, but I think it has since been handled

import { createSignal } from "solid-js";
import * as THREE from "three";
import { Canvas, T, extend, useFrame } from "solid-three";

extend(THREE);

function Box() {
  const mesh = new THREE.Mesh();
  const [hovered, setHovered] = createSignal(false);

  useFrame(() => (mesh!.rotation.y += 0.01));

  return (
    <>
      <T.Primitive
        object={mesh}
        onPointerEnter={e => setHovered(true)}
        onPointerLeave={e => setHovered(false)}
      >
        <T.BoxGeometry />
        <T.MeshStandardMaterial color={hovered() ? "green" : "red"} />
      </T.Primitive>
    </>
  );
}

export function App() {
  return (
    <Canvas camera={{ position: new THREE.Vector3(0, 0, 5) }}>
      <T.AmbientLight color={[0.2, 0.2, 0.2]} />
      <T.PointLight intensity={1.2} decay={1} position={[2, 2, 5]} rotation={[0, Math.PI / 3, 0]} />
      <Box />
      <T.ExtrudeGeometry args={[[new THREE.Shape()]]} />
    </Canvas>
  );
};