# \#responsive

**URL:** https://discourse.threejs.org/tag/responsive/570.md

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

---

## [Three js responsive chess app](https://discourse.threejs.org/t/three-js-responsive-chess-app/77159)

<div class="topic-metadata">

**Author:** [@awres](https://discourse.threejs.org/u/awres)\
**Replies:** 1\
**Last updated:** [January 28, 2025, 1:03pm UTC](https://discourse.threejs.org/t/three-js-responsive-chess-app/77159 "2025-01-28T13:03:02Z")

</div>

Hello guys this is my code Chessboard.tsx and my app is completely no responsive i was watching guides to fix this but nothing helped me. import React, { useEffect, useRef, useState } from "react"; import \* as THREE fr…

---

## [Responsive object position/scale](https://discourse.threejs.org/t/responsive-object-position-scale/71335)

<div class="topic-metadata">

**Author:** [@aka\_lux](https://discourse.threejs.org/u/aka_lux)\
**Replies:** 2\
**Last updated:** [September 27, 2024, 11:19pm UTC](https://discourse.threejs.org/t/responsive-object-position-scale/71335 "2024-09-27T23:19:01Z")

</div>

Hi everyone, I’m trying to figure out the best way to make the position (and scale if needed) of the model across all devices without relying only on match medias. Ofc I can’t use %, so is there something built into Thre…

---

## [How to make ThreeJS respect the size of the container when resizing?](https://discourse.threejs.org/t/how-to-make-threejs-respect-the-size-of-the-container-when-resizing/62002)

<div class="topic-metadata">

**Author:** [@black-littlebird](https://discourse.threejs.org/u/black-littlebird)\
**Replies:** 1\
**Last updated:** [February 28, 2024, 5:39am UTC](https://discourse.threejs.org/t/how-to-make-threejs-respect-the-size-of-the-container-when-resizing/62002 "2024-02-28T05:39:22Z")

</div>

I have a canva already set with a proper width that is responsive. When the page loads, ThreeJS respects the size of the canva and then loads the model accordingly. The problem is when I resize the page, the canva does …

---

## [2D Scene is not responsive according to screen sizes](https://discourse.threejs.org/t/2d-scene-is-not-responsive-according-to-screen-sizes/59258)

<div class="topic-metadata">

**Author:** [@Deepak\_Saini](https://discourse.threejs.org/u/Deepak_Saini)\
**Replies:** 1\
**Last updated:** [December 15, 2023, 2:47pm UTC](https://discourse.threejs.org/t/2d-scene-is-not-responsive-according-to-screen-sizes/59258 "2023-12-15T14:47:25Z")

</div>

I was building a 2D Scene in threejs using orthographic camera and placed the Sprites for the HUD part inside the Scene only so that i cant be changed from html. I have added everything of the HUD in the cameragroup alo…

---

## [Responsiveness Problem On Mobile Phone After Landscape](https://discourse.threejs.org/t/responsiveness-problem-on-mobile-phone-after-landscape/25774)

<div class="topic-metadata">

**Author:** [@turkkan](https://discourse.threejs.org/u/turkkan)\
**Replies:** 10\
**Last updated:** [August 19, 2023, 2:22am UTC](https://discourse.threejs.org/t/responsiveness-problem-on-mobile-phone-after-landscape/25774 "2023-08-19T02:22:46Z")

</div>

Hi everyone, I have a problem about resizing the render on mobile phone after device orientation has changed. Don’t mind the css responsiveness. I m aware of it :slight\_smile: i am not done with css yet. I think the p…

---

## [Calculate the camera z position based on a number of factors](https://discourse.threejs.org/t/calculate-the-camera-z-position-based-on-a-number-of-factors/52266)

<div class="topic-metadata">

**Author:** [@cswkim](https://discourse.threejs.org/u/cswkim)\
**Replies:** 2\
**Last updated:** [May 31, 2023, 11:07pm UTC](https://discourse.threejs.org/t/calculate-the-camera-z-position-based-on-a-number-of-factors/52266 "2023-05-31T23:07:55Z")

</div>

What would be a function to output a number for the camera position’s z value based on a number of factors: fov: (default 50) windowWidth: (window.innerWidth) 3DObject size + position: (PlaneGeometry with width 5, h…

---

## [Position mesh to fill viewport width](https://discourse.threejs.org/t/position-mesh-to-fill-viewport-width/48303)

<div class="topic-metadata">

**Author:** [@shaun](https://discourse.threejs.org/u/shaun)\
**Replies:** 2\
**Last updated:** [February 22, 2023, 10:44am UTC](https://discourse.threejs.org/t/position-mesh-to-fill-viewport-width/48303 "2023-02-22T10:44:23Z")

</div>

Hi, I have a simple mesh containing a row of cubes at the origin, and a simple camera at (0, 0, 4), and I want to calculate where that mesh should be in world space, so that it fills the visible viewport width. I’ve be…

---

## [How to make canvas responsive threejs wrapped in React?](https://discourse.threejs.org/t/how-to-make-canvas-responsive-threejs-wrapped-in-react/43343)

<div class="topic-metadata">

**Author:** [@BEBARK\_BALOCH](https://discourse.threejs.org/u/BEBARK_BALOCH)\
**Replies:** 7\
**Last updated:** [October 7, 2022, 2:21pm UTC](https://discourse.threejs.org/t/how-to-make-canvas-responsive-threejs-wrapped-in-react/43343 "2022-10-07T14:21:22Z")

</div>

Im using threejs wrapped in react functional component and now i wanna make it responsive on everytime when window resize but search alot function on stack and google not working on mine code. any body can guide me how …

---

## [SkinnedMesh Skeleton control](https://discourse.threejs.org/t/skinnedmesh-skeleton-control/40022)

<div class="topic-metadata">

**Author:** [@stanis3d](https://discourse.threejs.org/u/stanis3d)\
**Replies:** 2\
**Last updated:** [July 6, 2022, 9:27pm UTC](https://discourse.threejs.org/t/skinnedmesh-skeleton-control/40022 "2022-07-06T21:27:12Z")

</div>

Hello everyone, I want to share my Research in the field of SkinnedMesh → Skeleton → Bone! It was once developed for rig testing, and possibly… for some fun. Link to source First steps you get by watching the vide…

---

## [Object that resizes based on the viewport size](https://discourse.threejs.org/t/object-that-resizes-based-on-the-viewport-size/38370)

<div class="topic-metadata">

**Author:** [@eltiszl](https://discourse.threejs.org/u/eltiszl)\
**Replies:** 0\
**Last updated:** [May 20, 2022, 11:33pm UTC](https://discourse.threejs.org/t/object-that-resizes-based-on-the-viewport-size/38370 "2022-05-20T23:33:00Z")

</div>

Hi, I’m kinda struggling with the responsiveness within three.js. I’m trying to show a 3d model using the gltf loader, but I’d like the model to resize based on the users viewport size. Take https://modelviewer.dev/, a s…

---

## [OrbitControls constrain panning responsive](https://discourse.threejs.org/t/orbitcontrols-constrain-panning-responsive/33752)

<div class="topic-metadata">

**Author:** [@kordou](https://discourse.threejs.org/u/kordou)\
**Replies:** 1\
**Last updated:** [January 17, 2022, 8:43pm UTC](https://discourse.threejs.org/t/orbitcontrols-constrain-panning-responsive/33752 "2022-01-17T20:43:35Z")

</div>

Hi, I have a scene that I want the user to be able only to pan up the limits of the scene (top, bottom left , right) I made it b blocking the rotation and the zoom orbit controls and I contained the movement in the x …

---

## [\[React Three Fiber\] Canvas rerenders each time the window is resized, not responsive](https://discourse.threejs.org/t/react-three-fiber-canvas-rerenders-each-time-the-window-is-resized-not-responsive/23675)

<div class="topic-metadata">

**Author:** [@mikejernil](https://discourse.threejs.org/u/mikejernil)\
**Replies:** 1\
**Last updated:** [February 20, 2021, 2:22pm UTC](https://discourse.threejs.org/t/react-three-fiber-canvas-rerenders-each-time-the-window-is-resized-not-responsive/23675 "2021-02-20T14:22:51Z")

</div>

@drcmda I’ve created a React App using r3f. I have a scene set up with the scene background as a cubetexture. The issue I’m having is whenever I resize the window, the canvas seems to rerender, causing the screen to flic…

---

## [How to have .glb files scale responsivley with users screen size?](https://discourse.threejs.org/t/how-to-have-glb-files-scale-responsivley-with-users-screen-size/8035)

<div class="topic-metadata">

**Author:** [@waldrus](https://discourse.threejs.org/u/waldrus)\
**Replies:** 1\
**Last updated:** [June 11, 2019, 7:56am UTC](https://discourse.threejs.org/t/how-to-have-glb-files-scale-responsivley-with-users-screen-size/8035 "2019-06-11T07:56:16Z")

</div>

Hello! I’m looking to have my .glb file reduce and expand in size, while maintaining its aspect ration, in response to the varying view port widths. To clarify, I’m not looking to scale the size of the canvas but, rathe…

---

## [3dObject with Device-Orientation only on Smartphone and Tablet](https://discourse.threejs.org/t/3dobject-with-device-orientation-only-on-smartphone-and-tablet/5589)

<div class="topic-metadata">

**Author:** [@dario.good.guy](https://discourse.threejs.org/u/dario.good.guy)\
**Replies:** 2\
**Last updated:** [January 8, 2019, 12:43pm UTC](https://discourse.threejs.org/t/3dobject-with-device-orientation-only-on-smartphone-and-tablet/5589 "2019-01-08T12:43:37Z")

</div>

Hi, I had a question, I wondered if it was possible, as the title suggests, to make my object3d in device-orientation function only when you shrink the wireframe to a tablet or smartphone size and use another function in…