Html works perfect on mac bet not on windows #1121

conor-v · 2022-10-30T12:12:01Z

conor-v
Oct 30, 2022

I'm trying to make a fun 3D account card with de user data but the html --> user data, won't hold its position on windows pc and breaks. By shifting down.

import { OrbitControls, Html } from '@react-three/drei'
import { Canvas } from '@react-three/fiber'
import Card from '../../components/Card'
import AccountCard from '../../components/AcountCard'
import Cardback from '../../components/Cardback';
import React, { useState } from 'react'

function Box() {
  const [hidden, setVisible] = useState(false)

  return (
    <mesh scale={0.6}>
     <AccountCard />
      <Html
        style={{
          opacity: hidden ? 0 : 1,
          transform: `scale(1)`,
          fontSize: '25px', 
          width: '880px',
          height: '540px'
        }}
        distanceFactor={1.5}
        position={[0, 0, -0.23]}
        transform
        occlude
        onOcclude={setVisible}>
        <Card />
      </Html>

      
      <Html
        style={{
          opacity: !hidden ? 0 : 1,
          transform: `rotateY(180deg)`,
          fontSize: '25px', 
          width: '880px',
          height: '540px'
        }}
        distanceFactor={1.5}
        position={[0, 0, -0.30]}
        transform>
        <Cardback />
      </Html> 
    </mesh>
  )
}

const Account = () => {
  return (
    <Canvas dpr={[1, 2]} camera={{ fov: 25 }} style={{ background: "#cbf6e9", marginTop: '94px' }}>
    <ambientLight intensity={0.5} />
    <pointLight position={[10, 10, 4]} />

    <Box />
    <OrbitControls />
  </Canvas>
  )
}

export default Account

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Html works perfect on mac bet not on windows #1121

{{title}}

Replies: 0 comments

Select a reply

Html works perfect on mac bet not on windows #1121

conor-v Oct 30, 2022

Replies: 0 comments

conor-v
Oct 30, 2022