Welcome to my creative lab

You can create a 3D model avatar, exporting in glb in just a few minutes using https://readyplayer.me/es

Using the tweak pane to modify the bones of a 3D model. just for fun.

Changing the pivot of a 3D primitive.

Simple imitation of the light being blocked by clouds.

Simple coalition demo, thinking in a composable

In this demo we can see how to create a 3D earth, make it draggable, some parallax clouds on top and add some markers (to any city). It has also stars, MouseParallax effects and a simple GUI to control the rotation speed.

Gaea is a software for the creation of terrains, in this demo I show how to export a terrain from Gaea to TresJs.

Helpers to understand the 3D world with status

Simple experiment using <component :is /> built in vue feature

A simple nebula generator using smoke abstraction on cientos, and post-processing. This effect is base on: https://youtu.be/5f5wwQb22tE

How to select a grid (tile) in a plane using the mouse. based on this video: https://youtu.be/oQbfy8QP8Lc?si=mIsjZpQHHS5WFNUG

Using the edgeSplitModifier to smooth the edges of a Icosahedron.

We can use the Vue Transition API to create some cool effects. Here I left you a simple example.

Six textures Demo Illusion

Simple pendulum using spherical coordinates.

Example using the CSG library

A different way to add HTML to your scenes (other than the already built HTML component). based on this video: https://youtu.be/0ZW3xrFhY3w?si=QkvzEikyeuv6H1Mb

You can transform a model to follow a path (and svg one, in this case) and make it bend and rotate accordingly. This effect is base on: https://youtu.be/NH4rSzHLCp4

A way to simulate fur, hair, grass, etc. Using the sampler technique in ThreeJs. This effect is base on https://youtu.be/n98UO5sUyLo.

A glass/plastic effect you can achieve using physical material. This effect is base on: https://tympanus.net/codrops/2021/10/27/creating-the-effect-of-transparent-glass-and-plastic-in-three-js/.

It creates an infinite flow of particles without using a shader. This is the native way, but you have available an abstraction to do it in TresJs. https://cientos.tresjs.org/guide/abstractions/precipitation.html

A simple and funny way to create the illusion of an infinite tube.

Using the LightStrike Geometry on threejs. Based on: https://www.youtube.com/watch?v=fezzkdjHoiI

Following this tutorial: https://youtu.be/tsOTCn0nROI?si=DY32m9v2Vl3jhQqy.

A simple Mirror modifier from scrath

You can create an array of cameras, each one with its own viewport and its own configurations.

A initial example of how to use an ArrayModifier to create meshes.

A fun example using random movements to create a ant colony with gsap. Thanks to "Ant walkcycle" (https://skfb.ly/ZsMz) by Matrix Rex is licensed under Creative Commons Attribution (http://creativecommons.org/licenses/by/4.0/)

Simple plane with random points for future effects. This effect is base on: https://www.youtube.com/live/JaXb-hH2BIg?feature=share

My attempt to create a scatter models similar to g-scatter in Blender

Demo of how to use Sky dome as a background

Stencil is a technique to create a mask, in this demo I show how to use it to create a magic cube. this is often used to create basic portals with less

Using render target to create two scenes and, one inside the other. based on this video: https://youtu.be/3qa-nFgFRBE?si=sqxg1c4q80QV1ibW

based on: https://tympanus.net/codrops/2023/03/28/turning-3d-models-to-voxel-art-with-three-js/

simple demo using VueYZ library

A basic example of how to mix TresJs with some HTML. I use a camera config to make the units in ThreeJs match the pixels in HTML. Some hover effects on the image and some 3D icons. Also a simple fragment shader banner

A basic example of a login with 3D reactive text using VueJs and TresJs.

Canvas effect pam, which you can move through it and search for your images

Inspired by: https://dribbble.com/shots/11386939-Play-with-Magic-Motion

A different WASD movement system attach with a third person camera that follows your model, Based on: https://youtu.be/EkPfhzIbp2g?si=i7C69xj_Bs1YS7RL

A click base controls (move character with your click), with glb model + animations

A way to show 4 faces of a model depending on the position of the camera

First person shooter controls, uses my tres-FPS-controls component.

A fusion between 2D and 3D world characters using sprites and the third person camera. based on this video: https://youtu.be/pGO1Hm-JB90?si=DUtUlYphEuiRr212

A third person camera controls, with glb model + animations, based on this video: https://youtu.be/C3s0UHpwlf8?si=JdxnmkFwgAxoOdk7

How to blur a texture when hovering with the mouse, based on: https://t.co/3mIyS58Cyd

Simple chromatic aberration effect using shaders, over a texture

An image transformed into particles that you can animated separately . This effect is base on: https://youtu.be/vEaAheMO0bo

A WebGl slider made with shaders, using distorsión in images. This effect is base on: https://github.com/akella/webGLImageTransitions

Simple Audio blob with shaders and tresjs

Coffee practice from Bruno Simon. ThreeJs Journey. https://threejs-journey.com/

You can see how to extend any material to add shaders and different capabilities. We use the Custom Shader Material library. In this example we extend the MeshPhyiscalMaterial used in the previos glass example

With this demo, you can see how to destroy and manipulate the individual vertex of any type of geometries. This effect is base on: https://www.youtube.com/live/frgmk0Wu76A?feature=share

An example of Fire made with shaders. This effect is base on:https://github.com/mattatz/THREE.Fire

Example of GPGPU and flow field by Bruno Simon

Naive implementation of grass

A test to try how the instance mesh works on Tresjs, also i was experiment with the OrthographicCamera (normally I just use the PerspectiveCamera).

An interesting effect of how to use transparency in combination with the mouse to reveal the content behind

A simple ring made of particles using shaders

A star made with shaders, a combination of colors and techniques like fresnel, matrix rotation, multi layer. This effect is base on: https://www.youtube.com/live/3krH52AhPqk?feature=share

A test to try how the water reflection works on Tresjs, using the ReflectorMesh addons. Based on this video: https://youtu.be/PAy5aQK2pSg?si=4dCtEjHRNGG9tQIH

A WebGl ripple effect (like material design) but using shaders. This effect is base on: https://www.youtube.com/live/JaXb-hH2BIg?feature=share

My personal fragment shader template.

Basic of the ray marching, understanding the distance function and how to use it. playing with it and creating kind of a template

An interesting effect of how to use transparency in combination with the mouse to reveal the content behind

Basic of the ray marching, understanding the distance function and how to use it. playing with it and creating kind of a template

A naive play with fragments draws, a rinnegan design.