[ThreeJs] Add a new ux-threejs package to create/load 3D scene #2672
Conversation
📊 Packages dist files size differenceThanks for the PR! Here is the difference in size of the packages dist files between the base branch and the PR.
|
||||||||||||
|
Hey! I have to say, this was a nice surprise :)) 🙇 It might take a bit of time to properly review this PR — given the standards of quality, integrity, and security we aim to uphold, we want to make sure everything aligns before moving forward. Would you mind listing a few concrete use cases that this package helps solve? That would really help with the review process, especially since not everyone is familiar with it on a daily basis. Also, just to get a broader picture: do you already have a long-term vision for the package? No pressure at all — there's no wrong answer here, it's more of a food-for-thought kind of question. |
|
@smnandre thanks for your kind feedback.
For future, as I said there is a lot of three.js feature to implement (more geometry, material). I think we can also improve a lot animation features, and interaction. First big improvement would be to make it compatible with Live components, to allow more interaction with 3D scene. |
|
Add "skybox" option to material (360 background textures) |
|
Hey, that's a lot of work! Do you have some code examples to show us? However, I'm not really sure about making it an UX package, isn't it too niche? I mean, UX Chart, UX Map, or even the UX TogglePassword have more sense to me to be in UX, and, I believe they are more "useful" and pertinent on Symfony apps than UX ThreeJS can be, even if this package is super cool. I think it would make more sense to make it an external package, in your GitHub, WDYT? |
|
Hi @Kocal Thanks for your feedback :-) /** Basic green box */
$threeBox = new Three();
$basicGreenMaterial = new MeshBasic('green');
$box = new Box(3, 2, 2);
$greenBox = new Mesh(
geometry: $box,
material: $basicGreenMaterial,
);
$threeBox->addMesh($greenBox);
/** Basic animated green box */
$basicGreyMaterial = new MeshBasic('grey');
$startScene = new Scene(
material: $basicGreyMaterial,
);
$threeBox2 = new Three();
$threeBox2->setScene($startScene);
$basicGreenMaterial = new MeshBasic('green');
$box = new Box(3, 2, 2);
$greenBox = new Mesh(
geometry: $box,
material: $basicGreenMaterial,
animation: (new Animation())->rotate(rY: 0.01),
);
$threeBox2->addMesh($greenBox);
/** Box with texture */
$crateTexture = new MeshBasic(map: 'https://raw.githubusercontent.com/mrdoob/three.js/refs/heads/master/examples/textures/crate.gif');
$texturedBox = new Mesh(
geometry: $box,
material: $crateTexture,
animation: (new Animation())->rotate(rY: 0.01),
);
$threeBox3 = new Three();
$threeBox3->addMesh($texturedBox);
/** Other geometric shapes */
$threeBox4 = new Three();
$threeBox4->addMesh(new Mesh(
new Sphere(),
new MeshPhong('purple'),
));
$threeBox4->addMesh(new Mesh(
new Plane(5, 5),
new MeshPhong(color: 'green', doubleSide: true),
));
$cylinderMesh = new Mesh(
new Cylinder(radiusTop: 0.5, height: 3, openEnded: true),
new MeshPhong(color: 'yellow', doubleSide: true),
);
$cylinderMesh->setAngle(aX: M_PI_2)->setPosition(1, 1, 1);
$threeBox4->addMesh($cylinderMesh);
/** Other geometric shapes with red ambient light */
$threeBox5 = new Three();
$threeBox5->setScene($threeBox4->getScene());
$threeBox5->addLight(new AmbientLight('red', 5));
/** Other geometric shapes with directional lights */
$threeBox6 = new Three();
$threeBox6->setScene($threeBox4->getScene());
$threeBox6->addLight(new DirectionalLight('blue', 5, new Vector3(1, 3)));
$threeBox6->addLight(new DirectionalLight('white', 25, new Vector3(0, 0, 2), new Vector3(1, 1, 1)));
/** Loaded model */
$threeBox7 = new Three();
$model = new GLTFModel($assetMapper->getPublicPath('/models/Xbot.glb'), new Vector3(0, 0, 0));
$threeBox7->addModel($model);
/** Animated loaded model */
$threeBox8 = new Three();
$animatedModel = new GLTFModel($assetMapper->getPublicPath('/models/Xbot.glb'), new Vector3(0, 0, 0));
$animatedModel->animation->playClip = 'run';
$threeBox8->addModel($animatedModel);
/** AI generated 3D Model and background scene */
$threeBox9 = new Three(900, 500);
$background = new MeshBasic(
map: $assetMapper->getPublicPath('/images/back.jpg'),
);
$threeBox9->setScene(new Scene(material: $background));
$model = new GLTFModel(
$assetMapper->getPublicPath('/models/wizard.glb'),
);
$threeBox9->addModel($model);
/** Model with skybox background scene */
$threeBox10 = new Three(900, 500);
$skybox = new MeshBasic(
map: $assetMapper->getPublicPath('/images/hall.webp'),
skybox: true,
);
$threeBox10->setScene(new Scene(material: $skybox));
$model = new GLTFModel(
$assetMapper->getPublicPath('/models/troll.glb'),
);
$threeBox10->addModel($model);and in Twig, to render {{ render_threejs(threebox) }}I am agree that the project is maybe less popular than Map or ChartJS in the PHP/Symfony community, but it seems more popular globally (105K stars on github, vs 65K for ChartJS or 42K for Leaflet). And I think three.js has a huge number of use cases (load 3D model, data viz, 360 pictures views, design...). The actual code is already a good start, you can easily load existing 3D models and animate them. There are tons of others features in three.js but it is maybe not necessary to implement more :-). I understand that it could be one more big package to maintain, and it is difficult to have data about potential future uses. Thanks ;-) |
|
Thanks for the response, that's appreciated! We talked a bit with @smnandre yesterday, and I think there is a real issue with the approach. For example, UX Map lets you fill a "create a map, display markers and other stuff" use case, using either Google Maps or Leaflet. It's not a "UX Google Maps" package that reimplements the Google Maps API in PHP in 1-1, with all possible classes, options, methods, etc... :/ Having a "Three.js implementation in PHP" is a no-go for me, but, having dedicated packages (based on Three.js or whatever other libraries) for specific use cases is yes! Like, a package 3D models visualization/interaction, another package for 360° pictures, etc.. Do you see what I mean? |
|
@Kocal thanks for your feeback. The idea never was to reimplement all threejs classes and options, it would be an endless and certainly impossible work in php. About multiple packages for different use-cases, I understand totally to have simpler, more focused packages, open to several libraries.
I am available to discuss further about it :-) |
Hi !
I have created a new experimental Package to integrate three.js 3D library to available Symfony Ux components.
Three.js is a huge library, so I have selected only some key features, the minimal to create a useful 3D scene.
Available features are :
I think there are a lot of use cases, mostly loading 3D objects or creating simple 3D scenes (we are not talking about creating complex animations or games :-) ).
Here are some examples of what is possible today:
uxthreejs.webm
TODO in this PR :
TODO in next PR
I hope you will find it interesting for Symfony Ux environment.
There is still a lot of work to implement other three.js features but this PR is a first start.