When I put a HTML close to a material thats supposed to be semi transparent, the material becomes semi transparent on its front side only. Whats happening ?
#How come that HTML in drei changes materials properties ?
lucid fiber
my code:
return (
<group ref={group} {...props} dispose={null} >
<mesh position={[0, 0, 0]}>
<boxGeometry args={[15, 1, 17]} />
<meshPhysicalMaterial
color={0xffffff}
metalness={1}
roughness={0.2}
transmission={1}
/>
<Html
className="content"
transform occlude="blending"
rotation={[-Math.PI/2,0,0]}
position={[0,0.52,0]}
>
<Portfolio />
</Html>
</mesh>
</group>
);
}
export default function App() {
return (
<Canvas camera={{ position: [0, 0, 30], fov: 35 }}>
<ambientLight intensity={1.5} />
<Suspense fallback={null}>
<group rotation={[Math.PI/3, 0, 0]} position={[0, 0.5, 0]}>
<Cube />
</group>
<Environment preset="city" />
</Suspense>
<ContactShadows position={[0, -17, 0]} scale={20} blur={2} far={4.5} />
<OrbitControls enablePan={false} enableZoom={true} minPolarAngle={Math.PI / 2.2} maxPolarAngle={Math.PI / 2.2} />
</Canvas>
);
}
frozen plaza
```javascript
return (
<group ref={group} {...props} dispose={null} >
...
you can try checking some lights
lucid fiber
you can try checking some lights
i think it might be it :
silent turret
im not sure you can mix blending modes with transmission
at least no one has ever tried before
maybe we can ask @river cloak he made the occlusion feature
lucid fiber
thx !
river cloak
Here is what i think is happeneing - The way occusion is done is to puch a hole though the canvas to expose the HTML layer that is underneeth. This is achieved though a backing plane that is tracked to the HTML div size and position. The backing div uses no alpha blending, and has an opacity of 0, thus effectively discarding all the pixels that are under it no matter the alpha to expose the HTML
I dont see an obvious way to fix this since we cannot blend HTML and WebGL. If we simply allow alpha blending then the backing plane will show though, blend with the underlying pixels not the HTML itself
HTML needs a deep dive and refactor, i will do it when I find some time, perhaps i can come up with something then
TLDR: Limitation of occlude="blending". For now atleast
formal thicket
@river cloakcant he specify this plane to be alwayss on top
like with the render order or something
river cloak
Maybe, I haven’t tested, only guessing
I’ll test in a bit
lucid fiber
<@819419103378538547>cant he specify this plane to be alwayss on top
sry, im new to this stuff. what do you mean by "specify the plane to be always on top" ?
also, how does camera work ? when i change the y coordinates, the mesh appears further as if i altered a z coordinate and the rotation doesnt seem to do anything
<Canvas camera={{ position: [0, 50, 10], rotation: [0, 0, 0], fov: 25 }}>
should i use camera elsehow ?
here is the code btw: https://codesandbox.io/p/github/Vineyardcode/vineyardcode_new/
silent turret
also, how does camera work ? when i change the y coordinates, the mesh appears f...
these are initial values, they are applied once, it will also fire lookAt(0,0,0) once.
from then on things like orbitcontrols mutate the camera. you can controls the camera in every way you like otherwsie by also mutating it
useFrame((state) => {
state.camera.position.set(...
// or
const camera = useThree(state => state.camera)
useEffecr(() => {
camera.position.set(...
or use drei cameras, they abstract some of the boilerplate, they will call camera.updateProjectionMatrix() automatically, calculate aspect ratio on resize, etc. a normal THREE.PerspectiveCamera would need the usual set up and boilerplate code.
if you set it makeDefault it will set itself as the system cam (state.camera) and fiber will use it to render
import { PerspectiveCamera } from '@react-three/drei'
<Canvas>
<PerspectiveCamera makeDefault position={[...]} rotation={[...]} />
I mean in the way where said plane draws first and the rest of 3D stuff is blocked by zbuffer
lucid fiber
i see, but how come that altering the Y coordinate behaves almost like if i altered the Z coordinate ?
this is y 100
this is y 10
formal thicket
dont you also have orbit controls with fixed vertical angle 🤔 maybe that interfers with the positioning
like, target has the priority over position
the camera is then rotated down from way above
and lands far from the target
lucid fiber
dont you also have orbit controls with fixed vertical angle 🤔 maybe that inter...
i do 😐
im so sorry for asking such stupid question
thank you so much
it actually wasnt that
i had to mutate the camera as paul suggested, like this :
const camera = useThree(state => state.camera)
useEffect(() => {
camera.position.set(0,15,15)
})
lucid fiber
now it stopped working again 😄
the camera just wont behave when the controls are present
silent turret
it actually wasnt that
if you have orbit controls mutating the camera is like a race condition
you have two pieces of code pulling on the camera, one may win
the settings in canvas and on drei perspcam should be regarded as initial then in both cases, orbitcontrols will write into camera position/rotation every single frame
this is the same in vanilla but people don't notice because a change will restart the whole app
lucid fiber
the settings in canvas and on drei perspcam should be regarded as initial then i...
it seems like the settings makeDefault position={[0,5,23]} arent regarded as initial since orbit controls always override it
with controls:
without it:
when i do
useFrame((state) => {
state.camera.position.set(...
// or
const camera = useThree(state => state.camera)
useEffecr(() => {
camera.position.set(...
OrbitControls overrides the camera rotation to make it point to 0,0,0
That’s what you’re seeing
lucid fiber
is there a way to make a default camera position ? makeDefault position={[0,5,23]} doesnt work
river cloak
is there a way to make a default camera position ? makeDefault position={[0,5,2...
Are you using the camera from Drei?
river cloak
You must be overriding position somewhere else, because it should work
lucid fiber
i have checked again and the only place where im altering the camera is here ```javascript
<Canvas >
<PerspectiveCamera makeDefault position={[0,5,23]} rotation={[0,0,0]} />
<Suspense fallback={null}>
<group rotation={[Math.PI/2.8,0,0]} position={[0, 5, 0]}>
<Cube />
</group>
<Environment preset="city" background />
</Suspense>
<ContactShadows position={[0, -5, 0]} scale={30} blur={2} far={5} />
<CameraControls enablePan={true} enableZoom={true} minPolarAngle={Math.PI / 2.2} maxPolarAngle={Math.PI / 2.2}/>
</Canvas>
when i set the y position of the group to 0, it makes the contact shadows disapear
the lowest the contact shadows are willing to go is Y= -5. which is here
formal thicket
Im gonna say this again, fix your polar angle constraints to match your initial position
lucid fiber
Im gonna say this again, fix your polar angle constraints to match your initial ...
but those only prevent the mesh from getting turned over its top
when i remove them it doesnt alter the initial camera position in any way
no controls :
controls without any constraints:
controls with constraints:
you can try it for yourself in the codesandbox link that i provided above
formal thicket
you can try it for yourself in the codesandbox link that i provided above
unfortunately I cant, it will not reload if I change things, and if I click 🔄 button it asks me to log in 
lucid fiber
unfortunately I cant, it will not reload if I change things, and if I click 🔄 b...
did you go ctrl + s after you made those changes ?
formal thicket
no? should it not just track changes
well ctrl + s only brings login window again
lucid fiber
no? should it not just track changes
i had to do that initialy before i had an account set up
is there a way to make the contact shadows go lower than y -5 ?
i had the far attribute set to 5 😄 😄 😄
i feel so retarded rn
thank you all so much for help
formal thicket
i had the far attribute set to 5 😄 😄 😄
so, like.... you changed it to 4 and it is fine now?