Using multiple images to create a visual in three.js

Question

Using multiple images to create a visual in three.js

Looking to create a unique shape or maybe even a word using three.js by incorporating various pictures. Take, for example, the following image:

https://i.sstatic.net/9O1dF.jpg

My plan is to determine the points that will form the desired shape and then place the pictures accordingly. Despite my efforts to find information on this process, I am uncertain about how to locate these points, particularly since the shape could be irregular. Any suggestions or solutions would be greatly appreciated.

javascript three.js

Answer 1

Answer №1

It appears there are two possible paths you can take in moving forward:

You have the option to utilize a modeling software such as Blender to create the shape and images, then export the JSON file (view this resource for guidance on setting up the threejs json exporter in blender), followed by using the JSON loader to load it.
Alternatively, you could construct basic geometries of the desired shape using the provided options in threejs like box, circle, etc (see documentation), then apply textures to it as exemplified here.

I hope that one of these approaches meets your requirements.

Answer 2

It appears there are two possible paths you can take in moving forward:

You have the option to utilize a modeling software such as Blender to create the shape and images, then export the JSON file (view this resource for guidance on setting up the threejs json exporter in blender), followed by using the JSON loader to load it.
Alternatively, you could construct basic geometries of the desired shape using the provided options in threejs like box, circle, etc (see documentation), then apply textures to it as exemplified here.

I hope that one of these approaches meets your requirements.

Answer 3

Answer №2

My approach involves using the canvas to plot the 3D positions of each photo.

I have set up a demonstration with text:

https://jsfiddle.net/2qu6m4h3/

Additionally, I have another demonstration with random shapes:

https://jsfiddle.net/d2th9ekb/

The process involves creating a canvas element for drawing text and then extracting pixel positions from it. These positions are used in a function that arranges cubes in 3D space. Alternatively, sprite objects can be placed instead of cubes to represent each photo. Adjusting the scale property provides spacing between positions as needed.

Below is the code snippet:

// JavaScript code goes here
// This code initializes the setup for canvases and tools
// More details about setup go here

...
// Additional setup for Three.js canvas and tools
// Details on setup continue here

...
// Another section creates a 3D representation based on examined text
// Further explanation and details included

...

// Initializing 3D environment
init3d();
// Initializing text canvas
createTextSourceCanvas("Hello World", ctx);
//
create3dProjectionText(scene, examineText(ctx ,4), ctx.canvas.width, ctx.canvas.height, 1.5);
animate();

Answer 4

My approach involves using the canvas to plot the 3D positions of each photo.

I have set up a demonstration with text:

https://jsfiddle.net/2qu6m4h3/

Additionally, I have another demonstration with random shapes:

https://jsfiddle.net/d2th9ekb/

The process involves creating a canvas element for drawing text and then extracting pixel positions from it. These positions are used in a function that arranges cubes in 3D space. Alternatively, sprite objects can be placed instead of cubes to represent each photo. Adjusting the scale property provides spacing between positions as needed.

Below is the code snippet:

// JavaScript code goes here
// This code initializes the setup for canvases and tools
// More details about setup go here

...
// Additional setup for Three.js canvas and tools
// Details on setup continue here

...
// Another section creates a 3D representation based on examined text
// Further explanation and details included

...

// Initializing 3D environment
init3d();
// Initializing text canvas
createTextSourceCanvas("Hello World", ctx);
//
create3dProjectionText(scene, examineText(ctx ,4), ctx.canvas.width, ctx.canvas.height, 1.5);
animate();

Using multiple images to create a visual in three.js

Answer №1

Answer №2

Similar questions

I am looking to superimpose one rectangle over another rectangle

How to execute a JavaScript function within a Jinja for loop

Is there a way to make the primary button on the previous page function correctly again, just like it did before it was clicked?

The lambert material is being extended, but unfortunately the opacity feature is not functioning

String ES6 syntax immediately after function

How to retrieve multiple person or group values in SharePoint using JavaScript

What is the best way to retrieve the output of MongoDB's collection.aggregate() within a NodeJS callback function?

Error: Invalid argument type

Declaring a Javascript variable within an if statement does not alter the value of the global variable

What is the best way to restrict the length and number of lines in a textarea based on pixel dimensions?

Ways to conceal buttons according to your 'occupation'?

I am experiencing issues with the search feature in angular and node.js that is not functioning properly

I encountered a response error code 500 from the development server while using my emulator

Uploading an image using ajax with multer

How to ensure an object is consistently rendered above all others using Three.js

After my jQuery functions are executed, my CSS rules are loaded

Text-field input experiencing issues with placeholder display

Can animations be stacked in a queue while using velocity.js?

Creating Unique Designs with Multiple Shapes and Elements using Clipping Masks

using flexbox in react does not automatically resize