# \#image

**URL:** https://discourse.threejs.org/tag/image/596.md

[Latest](https://discourse.threejs.org/latest.md) · [Categories](https://discourse.threejs.org/categories.md) · [Tags](https://discourse.threejs.org/tags.md)

---

## [Exporting high-resolution images of the canvas](https://discourse.threejs.org/t/exporting-high-resolution-images-of-the-canvas/89030)

<div class="topic-metadata">

**Author:** [@Lucas\_Lamonier](https://discourse.threejs.org/u/Lucas_Lamonier)\
**Replies:** 5\
**Last updated:** [January 9, 2026, 6:07pm UTC](https://discourse.threejs.org/t/exporting-high-resolution-images-of-the-canvas/89030 "2026-01-09T18:07:15Z")

</div>

I need to create high-resolution images of what the user is seeing and allow them to download it. This is my current setup: const highRes = () =\> { const renderer = new THREE.WebGLRenderer({ ant…

---

## [Issues while exporting image from a rendered scene](https://discourse.threejs.org/t/issues-while-exporting-image-from-a-rendered-scene/85198)

<div class="topic-metadata">

**Author:** [@Ammad](https://discourse.threejs.org/u/Ammad)\
**Replies:** 1\
**Last updated:** [July 15, 2025, 6:26pm UTC](https://discourse.threejs.org/t/issues-while-exporting-image-from-a-rendered-scene/85198 "2025-07-15T18:26:33Z")

</div>

I wrote a function (a bit of vibe coding too) that exports the users current canvas as an image. Reference Images User’s View: Please ignore the toolbar in the user’s view image that is not a part of canvas its just …

---

## [Three.js Image Text blur after Version 151](https://discourse.threejs.org/t/three-js-image-text-blur-after-version-151/84546)

<div class="topic-metadata">

**Author:** [@James\_Zhong](https://discourse.threejs.org/u/James_Zhong)\
**Replies:** 2\
**Last updated:** [July 7, 2025, 3:34am UTC](https://discourse.threejs.org/t/three-js-image-text-blur-after-version-151/84546 "2025-07-07T03:34:00Z")

</div>

I have an image with black text. In 151 and the previouse version, the text is black. After version 151, from 152, the text color became less black(blur, less sharp). The settings of WebGLRenderer, Texture and Material a…

---

## [Multiple Images to 3d view](https://discourse.threejs.org/t/multiple-images-to-3d-view/64441)

<div class="topic-metadata">

**Author:** [@Chester\_Jacob\_Cayobet](https://discourse.threejs.org/u/Chester_Jacob_Cayobet)\
**Replies:** 3\
**Last updated:** [May 2, 2025, 5:32pm UTC](https://discourse.threejs.org/t/multiple-images-to-3d-view/64441 "2025-05-02T17:32:50Z")

</div>

I wanted to make a website that contains rendered images and it will be look like 3d here’s the example cause i dont really know how to do it or what is it called https://eg22.simedarbyproperty-vr.com/type-a?filter=exter…

---

## [How do i add planes with shaders to webpages seamlessly?](https://discourse.threejs.org/t/how-do-i-add-planes-with-shaders-to-webpages-seamlessly/78473)

<div class="topic-metadata">

**Author:** [@yodha](https://discourse.threejs.org/u/yodha)\
**Replies:** 2\
**Last updated:** [February 23, 2025, 12:43pm UTC](https://discourse.threejs.org/t/how-do-i-add-planes-with-shaders-to-webpages-seamlessly/78473 "2025-02-23T12:43:17Z")

</div>

So i am trying to recreate this website: more importantly the Horizontal scroll with images and the pixel distortion. After bit of surfing i found how to implement horizontal scroll using gsap and the pixel distortion…

---

## [Is there a three.js version of html drawImage and getImage?](https://discourse.threejs.org/t/is-there-a-three-js-version-of-html-drawimage-and-getimage/76461)

<div class="topic-metadata">

**Author:** [@phil\_crowther](https://discourse.threejs.org/u/phil_crowther)\
**Replies:** 3\
**Last updated:** [January 15, 2025, 6:09am UTC](https://discourse.threejs.org/t/is-there-a-three-js-version-of-html-drawimage-and-getimage/76461 "2025-01-15T06:09:16Z")

</div>

Is there something in three.js that is similar to the html drawImage and getImage routines? I use these to combine and split images in my main program, but am not sure that I could use them in a separate module. Also, i…

---

## [Image Effect (Light Prism)](https://discourse.threejs.org/t/image-effect-light-prism/76137)

<div class="topic-metadata">

**Author:** [@yodha](https://discourse.threejs.org/u/yodha)\
**Replies:** 2\
**Last updated:** [January 7, 2025, 9:42pm UTC](https://discourse.threejs.org/t/image-effect-light-prism/76137 "2025-01-07T21:42:40Z")

</div>

I am trying to achieve the following light prism effect using programming. Is there anyway i can do this using shaders, or are there any libraries that i can use? Thanks in advance.

---

## [Unable to add images onto my fabric canvas](https://discourse.threejs.org/t/unable-to-add-images-onto-my-fabric-canvas/70419)

<div class="topic-metadata">

**Author:** [@Abomel\_puka](https://discourse.threejs.org/u/Abomel_puka)\
**Replies:** 0\
**Last updated:** [September 7, 2024, 11:32am UTC](https://discourse.threejs.org/t/unable-to-add-images-onto-my-fabric-canvas/70419 "2024-09-07T11:32:10Z")

</div>

This is my code: "use client" import { useEffect, useRef } from 'react'; import \* as THREE from 'three'; import \* as fabric from 'fabric'; export default function Home() { const fabricCanvasRef = useRef(null); u…

---

## [Unable to handle multiple images and texts on canvas](https://discourse.threejs.org/t/unable-to-handle-multiple-images-and-texts-on-canvas/70363)

<div class="topic-metadata">

**Author:** [@Abomel\_puka](https://discourse.threejs.org/u/Abomel_puka)\
**Replies:** 2\
**Last updated:** [September 6, 2024, 3:46pm UTC](https://discourse.threejs.org/t/unable-to-handle-multiple-images-and-texts-on-canvas/70363 "2024-09-06T15:46:08Z")

</div>

const \[image, setImage\] = useState(""); const \[imageWidth, setImageWidth\] = useState(0); const HandleImageInput = (e) =\> { const reader = new FileReader(); let imageUrl; reader.onload = () =\> { if…

---

## [Image-resizing vertically without keeping the aspect ratio is moving the image horizontally - it should not move it horizontally](https://discourse.threejs.org/t/image-resizing-vertically-without-keeping-the-aspect-ratio-is-moving-the-image-horizontally-it-should-not-move-it-horizontally/69130)

<div class="topic-metadata">

**Author:** [@Natalia\_Medrano](https://discourse.threejs.org/u/Natalia_Medrano)\
**Replies:** 1\
**Last updated:** [August 9, 2024, 1:50pm UTC](https://discourse.threejs.org/t/image-resizing-vertically-without-keeping-the-aspect-ratio-is-moving-the-image-horizontally-it-should-not-move-it-horizontally/69130 "2024-08-09T13:50:35Z")

</div>

So, I am trying to implement a feature of resizing an image like in PowerPoint: resizing the image without keeping the aspect ratio when the image is resized by dragging the edges. For instance, if the user drags the to…

---

## [USDZLoader: Can't parse file correctly via loader.parse](https://discourse.threejs.org/t/usdzloader-cant-parse-file-correctly-via-loader-parse/66410)

<div class="topic-metadata">

**Author:** [@MadMax888](https://discourse.threejs.org/u/MadMax888)\
**Replies:** 0\
**Last updated:** [June 4, 2024, 11:05am UTC](https://discourse.threejs.org/t/usdzloader-cant-parse-file-correctly-via-loader-parse/66410 "2024-06-04T11:05:55Z")

</div>

How do we get rich results as in the showcase example ? I’m using loader.parse to get data but the result is My actual result:

---

## [How to capture an image using THREE.PerspectiveCamera?](https://discourse.threejs.org/t/how-to-capture-an-image-using-three-perspectivecamera/6749)

<div class="topic-metadata">

**Author:** [@Loizos\_Vasileiou](https://discourse.threejs.org/u/Loizos_Vasileiou)\
**Replies:** 3\
**Last updated:** [March 26, 2019, 12:56pm UTC](https://discourse.threejs.org/t/how-to-capture-an-image-using-three-perspectivecamera/6749 "2019-03-26T12:56:03Z")

</div>

I was looking online, but I didn’t found much. I’m basically looking for the camera function that renders an image when a button is pressed. Notice that I have 2 THREE.PerspectiveCamera (main and 2nd). The main camera i…

---

## [Looking an Experienced Graphics Engineer (Front end Developer)](https://discourse.threejs.org/t/looking-an-experienced-graphics-engineer-front-end-developer/58493)

<div class="topic-metadata">

**Author:** [@Jishnu\_K](https://discourse.threejs.org/u/Jishnu_K)\
**Replies:** 7\
**Last updated:** [December 13, 2023, 7:16am UTC](https://discourse.threejs.org/t/looking-an-experienced-graphics-engineer-front-end-developer/58493 "2023-12-13T07:16:55Z")

</div>

JOB DESCRIPTION As a Software Development Engineer II (SDE II) - Three.js Developer, you will be an integral part of our development team, responsible for designing and implementing captivating 3D web experiences. You w…

---

## [How to blur a background Texture?](https://discourse.threejs.org/t/how-to-blur-a-background-texture/39433)

<div class="topic-metadata">

**Author:** [@vois](https://discourse.threejs.org/u/vois)\
**Replies:** 8\
**Last updated:** [December 6, 2023, 8:25am UTC](https://discourse.threejs.org/t/how-to-blur-a-background-texture/39433 "2023-12-06T08:25:27Z")

</div>

Hi everyone, I have a png image that I want to load it as texture. But, I want to show it blurry, like this: Original image loaded: Want to achive this: This is my source code: const backgroundImg = './assets/b…

---

## [Picto3d - a website that transforms images into a 3D model](https://discourse.threejs.org/t/picto3d-a-website-that-transforms-images-into-a-3d-model/30488)

<div class="topic-metadata">

**Author:** [@H44AF](https://discourse.threejs.org/u/H44AF)\
**Replies:** 12\
**Last updated:** [October 18, 2023, 8:22pm UTC](https://discourse.threejs.org/t/picto3d-a-website-that-transforms-images-into-a-3d-model/30488 "2023-10-18T20:22:15Z")

</div>

It generates a depth map from an image and uses it as a displacement map to create a 3D model. This model can be downloaded in stl format with generated depth map and normal map.

---

## [Visual Regression Testing with ImageMagick & using SSIM Metric](https://discourse.threejs.org/t/visual-regression-testing-with-imagemagick-using-ssim-metric/52048)

<div class="topic-metadata">

**Author:** [@jayy.96](https://discourse.threejs.org/u/jayy.96)\
**Replies:** 0\
**Last updated:** [May 26, 2023, 4:16am UTC](https://discourse.threejs.org/t/visual-regression-testing-with-imagemagick-using-ssim-metric/52048 "2023-05-26T04:16:55Z")

</div>

For Image Comparision & Metric, our team identify that ImageMagick is relevant tool and SSIM is best Metric to compare two images. So is this good or any other tool or best metric that we may go for ?

---

## [Which metric is best for image comparision?](https://discourse.threejs.org/t/which-metric-is-best-for-image-comparision/51622)

<div class="topic-metadata">

**Author:** [@jayy.96](https://discourse.threejs.org/u/jayy.96)\
**Replies:** 1\
**Last updated:** [May 16, 2023, 2:06pm UTC](https://discourse.threejs.org/t/which-metric-is-best-for-image-comparision/51622 "2023-05-16T14:06:26Z")

</div>

Hey there, we are using GraphicsMagick for image comparision, And for Metric comparision we are considering MSE metric. So, is this right and best metric to use or is there any other best and accurate metric available as…

---

## [Custom shape in image not working](https://discourse.threejs.org/t/custom-shape-in-image-not-working/49348)

<div class="topic-metadata">

**Author:** [@Myth\_Xenodo](https://discourse.threejs.org/u/Myth_Xenodo)\
**Replies:** 30\
**Last updated:** [March 21, 2023, 3:10pm UTC](https://discourse.threejs.org/t/custom-shape-in-image-not-working/49348 "2023-03-21T15:10:46Z")

</div>

From this documentation three.js docs I tried to make a custom shape with an image however the image seems like it doesn’t fit to the custom shape I’d like to happen. Like is there anyway can I make custom image shapes?…

---

## [Zooming on a 2D image](https://discourse.threejs.org/t/zooming-on-a-2d-image/49038)

<div class="topic-metadata">

**Author:** [@HimAgain](https://discourse.threejs.org/u/HimAgain)\
**Replies:** 2\
**Last updated:** [March 14, 2023, 8:51am UTC](https://discourse.threejs.org/t/zooming-on-a-2d-image/49038 "2023-03-14T08:51:40Z")

</div>

Hi all, I am using an Orthographic camera to display an image. I have created my own zooming & panning controls, but I am not content with the zooming. When I scroll forward I add 1 to the camera.zoom and when I scroll …

---

## [How to ensure all texture images are loaded memory/cache before the scene is displayed?](https://discourse.threejs.org/t/how-to-ensure-all-texture-images-are-loaded-memory-cache-before-the-scene-is-displayed/48671)

<div class="topic-metadata">

**Author:** [@CosmicFantasy](https://discourse.threejs.org/u/CosmicFantasy)\
**Replies:** 2\
**Last updated:** [March 13, 2023, 4:35am UTC](https://discourse.threejs.org/t/how-to-ensure-all-texture-images-are-loaded-memory-cache-before-the-scene-is-displayed/48671 "2023-03-13T04:35:50Z")

</div>

So my ThreeJS project loads a lot of image textures and places them onto various plane 3DObjects. The images are maybe 500Kb in size each and it loads about 500+ or so. For the textures that are immediately in front of…

---

## [Image in React Three Fiber / Drei doesn't work](https://discourse.threejs.org/t/image-in-react-three-fiber-drei-doesnt-work/48916)

<div class="topic-metadata">

**Author:** [@ARLebedevIt](https://discourse.threejs.org/u/ARLebedevIt)\
**Replies:** 1\
**Last updated:** [March 10, 2023, 10:24am UTC](https://discourse.threejs.org/t/image-in-react-three-fiber-drei-doesnt-work/48916 "2023-03-10T10:24:04Z")

</div>

Hello, for some reason, when trying to insert an image into my application, nothing works. I am using React Three Fiber / Drei. I have tried uploading an image in an tag as well as using . What other ways are there to b…

---

## [Example using Pexels API to preview videos](https://discourse.threejs.org/t/example-using-pexels-api-to-preview-videos/46214)

<div class="topic-metadata">

**Author:** [@anidivr](https://discourse.threejs.org/u/anidivr)\
**Replies:** 1\
**Last updated:** [December 25, 2022, 6:04pm UTC](https://discourse.threejs.org/t/example-using-pexels-api-to-preview-videos/46214 "2022-12-25T18:04:30Z")

</div>

Pexels Video Preview shows how the Pexels video API can be used to search and preview videos. UI supports entry of key before API can be used. Key is saved as a cookie. Works on desktop and in VR. Sound works on vid…

---

## [How to crop a image to a specified size](https://discourse.threejs.org/t/how-to-crop-a-image-to-a-specified-size/45046)

<div class="topic-metadata">

**Author:** [@Sam\_He](https://discourse.threejs.org/u/Sam_He)\
**Replies:** 2\
**Last updated:** [November 23, 2022, 12:46pm UTC](https://discourse.threejs.org/t/how-to-crop-a-image-to-a-specified-size/45046 "2022-11-23T12:46:27Z")

</div>

Hello, I’m a newer Tree.js, I have a very difficult problem that has taken a long time to solve. I need your help. I want to put pictures of any size in a fixed size (100 \* 150) area, but I don’t know how to do. The cod…

---

## [Loader (TextureLoader / ImageBitmapLoader) blocks JS main thread, causing temporary freeze](https://discourse.threejs.org/t/loader-textureloader-imagebitmaploader-blocks-js-main-thread-causing-temporary-freeze/44579)

<div class="topic-metadata">

**Author:** [@K\_Dos](https://discourse.threejs.org/u/K_Dos)\
**Replies:** 0\
**Last updated:** [November 11, 2022, 12:20pm UTC](https://discourse.threejs.org/t/loader-textureloader-imagebitmaploader-blocks-js-main-thread-causing-temporary-freeze/44579 "2022-11-11T12:20:57Z")

</div>

In my app, I load images (one at a time) to apply them as texture. The problem is that each time an image is loaded, app freezes until loading is completed. Freezing time (equals loading time) is less than 1 second but …

---

## [Whats the latest way to load an image?](https://discourse.threejs.org/t/whats-the-latest-way-to-load-an-image/44246)

<div class="topic-metadata">

**Author:** [@Vornzy](https://discourse.threejs.org/u/Vornzy)\
**Replies:** 3\
**Last updated:** [November 3, 2022, 4:13am UTC](https://discourse.threejs.org/t/whats-the-latest-way-to-load-an-image/44246 "2022-11-03T04:13:14Z")

</div>

I’m having a problem loading an image into the scene, I keep getting console log “error”. I had a very tough time with GLTF loader too but eventually found that code on a random website, whats the latest format for Ima…

---

## [Change Texture with Image on click Event](https://discourse.threejs.org/t/change-texture-with-image-on-click-event/36639)

<div class="topic-metadata">

**Author:** [@Asim\_Tahir](https://discourse.threejs.org/u/Asim_Tahir)\
**Replies:** 0\
**Last updated:** [April 1, 2022, 9:24pm UTC](https://discourse.threejs.org/t/change-texture-with-image-on-click-event/36639 "2022-04-01T21:24:00Z")

</div>

Hi, I’m trying to update the Watch dialer with another dialer, and that images are in PNG format on Click event. But when i update the image it will adding some strips in image. I don’t know where i’m doing wrong and …

---

## [Rotate and scale the added image texture](https://discourse.threejs.org/t/rotate-and-scale-the-added-image-texture/30666)

<div class="topic-metadata">

**Author:** [@tylernguyen](https://discourse.threejs.org/u/tylernguyen)\
**Replies:** 6\
**Last updated:** [November 10, 2021, 8:22am UTC](https://discourse.threejs.org/t/rotate-and-scale-the-added-image-texture/30666 "2021-11-10T08:22:43Z")

</div>

Hi guys, I’m building a product customiser similar to the one in the gif attachment, I don’t find any solutions for the image adjust stuff, it may be a caster from FabricJS to ThreeJS. But I’m just newbie. …

---

## [Texture from distorted image, what is the best way to do it?](https://discourse.threejs.org/t/texture-from-distorted-image-what-is-the-best-way-to-do-it/25191)

<div class="topic-metadata">

**Author:** [@hofk](https://discourse.threejs.org/u/hofk)\
**Replies:** 5\
**Last updated:** [April 11, 2021, 9:39pm UTC](https://discourse.threejs.org/t/texture-from-distorted-image-what-is-the-best-way-to-do-it/25191 "2021-04-11T21:39:06Z")

</div>

When I bend a plane or a cylinder, I get different geometries. If I want to use an image e.g. ( https://pixabay.com/de/photos/fass-weinfass-winzer-wein-holzfass-2609789/ -free) as a texture, the white background woul…

---

## [Image Cropping, How to Approach This Problem?](https://discourse.threejs.org/t/image-cropping-how-to-approach-this-problem/25083)

<div class="topic-metadata">

**Author:** [@mysterybear](https://discourse.threejs.org/u/mysterybear)\
**Replies:** 1\
**Last updated:** [April 5, 2021, 11:12pm UTC](https://discourse.threejs.org/t/image-cropping-how-to-approach-this-problem/25083 "2021-04-05T23:12:30Z")

</div>

Hey, How would I go about implementing image cropping? I’ve done this with regular DOM and with 2D canvas, but I’d prefer to use Three (well, I’m using react-three-fiber) I’ve tried playing with clippingPlanes and alp…

---

## [Image.src and revokeObjectURL](https://discourse.threejs.org/t/image-src-and-revokeobjecturl/23682)

<div class="topic-metadata">

**Author:** [@prominent](https://discourse.threejs.org/u/prominent)\
**Replies:** 1\
**Last updated:** [February 21, 2021, 1:26am UTC](https://discourse.threejs.org/t/image-src-and-revokeobjecturl/23682 "2021-02-21T01:26:15Z")

</div>

loader.setPath( directory ); loader.load( filename+ext, function (obj) { if(obj.hasOwnProperty('scene')) importModel.bufferObject = obj.scene; else importModel.bufferObject = obj; //get all the textures that th…

[Next page](https://discourse.threejs.org/tag/image/596.md?match_all_tags=true&page=1&tags%5B%5D=image)