Making a 3D object responsive

[SunbeamRapier]

What is the best way to modify the scale of a 3D animated object for different devices? I use vs instead of rem for text, which works quite well but I am not sure how to achieve this for the objects.

Canvas1 is set in CSS to 175px x 200px, which is just large enough to contain the imported mesh. The other canvases and meshes are smaller.

All three canvases are inside a flex box which is inside another two flex-boxes, with other components, in the Header. The mesh objects were imported from Blender.

[stephencorwin]

You can use something like https://www.npmjs.com/package/react-media to conditionally render entirely different canvases, scenes, or parts of a scene based on media queries.

<Canvas>
  <Media queries={{ small: { maxWidth: 599 } }}>
    {matches =>
      matches.small ? (
        <MobileScene>
      ) : (
        <DesktopScene>
      )
    }
  </Media>
</Canvas>

You can also use the viewport property returned from useThree(). This works well either in combination with react-media or alone.

const {viewport} = useThree();

// create a plane with a width/height = to the canvas viewport
return (
  <mesh>
    <planeBufferGeometry attach="geometry" args={[viewport.width, viewport.height]} />
    <meshBasicMaterial attach="material" color="gray" />
  </mesh>
)

[SunbeamRapier]

Thanks so much! I’ll try it out :-)

…

On 1 Sep 2020, at 1:58 pm, Stephen Corwin ***@***.***> wrote: You can use something like https://www.npmjs.com/package/react-media <https://www.npmjs.com/package/react-media> to conditionally render entirely different canvases, scenes, or parts of a scene based on media queries. <Canvas> <Media queries={{ small: { maxWidth: 599 } }}> {matches => matches.small ? ( <MobileScene> ) : ( <DesktopScene> ) } </Media> </Canvas> You can also use the viewport property returned from useThree() const {viewport} = useThree(); // create a plane with a width/height = to the canvas viewport return ( <mesh> <planeBufferGeometry attach="geometry" args={[viewport.width, viewport.height]} /> </mesh> ) — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#647 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AI3XEBLOA6RYO5BQ2FLSYT3SDRWOPANCNFSM4QRHDASQ>.

[stephencorwin]

As a note, we have an upcoming package to help out with 3D layouts. It is not quite released yet, but keep an eye out for this in the near future:
https://www.npmjs.com/package/react-three-flex

[SunbeamRapier]

Cool ! Thanks for the heads-up. The Header, with the animations is quite complex and it goes a little crazy when the viewport shrinks… /Stephen

…

On 1 Sep 2020, at 2:02 pm, Stephen Corwin ***@***.***> wrote: As a note, we have an upcoming package to help out with 3D layouts. It is not quite released yet, but keep an eye out for this in the near future: https://www.npmjs.com/package/react-three-flex <https://www.npmjs.com/package/react-three-flex> — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#647 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AI3XEBNMIDES2ND6PXKVIE3SDRW7DANCNFSM4QRHDASQ>.

[SunbeamRapier]

.. one more little problem I import useThree from react-three-fiber. I define the constant in the first function (Loading) or the 2nd function (BigW) which has the definition of constants for group and { scene }. But I always get an undefined error on the viewport constant in the returned div. I tried defining it at the start but then I got a useState error. I haven’t used this { constantName } notation except in a DIV where it refers to a previously defined constant. This is the code - perhaps you can spot the issue… /Stephen import React, { Suspense, useRef } from "react"; import { Canvas, useLoader, useFrame, useThree } from "react-three-fiber"; import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"; import "./css/Logo2.css"; import "./css/Logo1.css"; function Loading() { return ( <mesh visible position={[0, 0, 0]} rotation={[0, 0, 0]}> <meshStandardMaterial attach="material" color="white" transparent opacity={0.6} roughness={1} metalness={0} /> </mesh> ); } function BigW() { console.log("Logo1 Function BigW running"); const group = useRef(); const { scene } = useLoader(GLTFLoader, "/models/BigWScale1.5.glb"); const { viewport } = useThree(); // for console-logging of the contents of the model - delete when no longer required const { nodes } = useLoader(GLTFLoader, "/models/BigWScale1.5.glb"); console.log("Logo1 nodes = |" , {nodes} , "|"); console.log("Logo1 scene contains [",scene, "|"); console.log("Logo1 group contains [",group, "|"); useFrame(() => { group.current.rotation.x += 0.016; // axis & speed }); return ( <group ref={group}> <primitive object={scene} dispose={null} /> </group> ); } export default function Logo1() { return ( <div id="divCanvas1"> <Canvas id = "Canvas1" className = "Canvas1" orthographic camera={{ zoom: 50, position: [0, 0, 100] }} > <ambientLight /> <pointLight position={[10, 10, 10]} /> <directionalLight intensity={4.16} /> <Suspense fallback={<Loading />}> <BigW> <planeBufferGeometry attach="geometry" args={[viewport.width, viewport.height]} /> </BigW> </Suspense> </Canvas> </div> ); }

…

On 1 Sep 2020, at 1:58 pm, Stephen Corwin ***@***.***> wrote: You can use something like https://www.npmjs.com/package/react-media <https://www.npmjs.com/package/react-media> to conditionally render entirely different canvases, scenes, or parts of a scene based on media queries. <Canvas> <Media queries={{ small: { maxWidth: 599 } }}> {matches => matches.small ? ( <MobileScene> ) : ( <DesktopScene> ) } </Media> </Canvas> You can also use the viewport property returned from useThree() const {viewport} = useThree(); // create a plane with a width/height = to the canvas viewport return ( <mesh> <planeBufferGeometry attach="geometry" args={[viewport.width, viewport.height]} /> </mesh> ) — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#647 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AI3XEBLOA6RYO5BQ2FLSYT3SDRWOPANCNFSM4QRHDASQ>.

[stephencorwin]

You need to move your reference to viewport into the Big W component rather than trying to pass it as a child. There is no viewport reference in the component it is being used.

For further help, you can check out our Discord server:
https://discord.gg/ZZjjNvJ