尝试react 3纤维磨砂玻璃着色器,但未正确应用

我一直在关注pmndrs网站的代码笔示例链接如下: https://codesandbox.io/s/frosted-glass-imn42?file=/src/App.js

当我把类似的技术应用到我自己的三维模型上时,我会有奇怪的结果。看起来玻璃霜的位置总是像阴影一样在我的3d模型后面。我不知道如何将其放在前面并充当覆盖层,因为我试图调整模型或磨砂玻璃网格的z索引位置。以下是它的视觉外观:

你可以画飞机,然后画玻璃的材料,然后画我的模型。有人能告诉我为什么它会以这种方式出现在我的面前吗?

眼睛。JSX

import * as THREE from 'three';
 import React, { useRef, useState } from 'react'
 import { useFrame, extend } from "@react-three/fiber";
import { useGLTF, MeshTransmissionMaterial, shaderMaterial } from "@react-three/drei";

function FrostedGlass({children}) {
   return (
      <>
         <mesh scale={[window.innerWidth, window.innerHeight, 1]} color={'#f0f0f0'} position={[0, 0, -5]}>
         <planeGeometry args={[1, 1]}/>
         <MeshTransmissionMaterial 
          samples={8}
          resolution={512}
          anisotropy={1}
          thickness={0.1}
          roughness={0.2}
          toneMapped={true}
          depthWrite={false} // Disable depth writing to render behind other objects
          transparent // Enable transparency
          opacity={0.7} // Adjust opacity as needed
          renderOrder={1}
         />
         </mesh>
        <group>
          {children}
        </group>
      </>
    )
}

const Eyes = ({ mousePosition, deviceOrientation }) => {

   const isMobile = window.innerWidth <= 576; 
   const objRef = useRef();
   const shaderRef = useRef();
   const objScale = isMobile ? 0.58 : 1;
   const objPos = isMobile ? [30, 0, 0] : [45.463, -29.926, 22.715]
   const { nodes, materials } = useGLTF("/Eyes_Keem.glb");
  
     const phoneAngle = 90; // Set the initial beta value you want
      const sensitivityY = 0.03; 
      const sensitivityX = 0.04; 

     return (
      <>
      <FrostedGlass>
         <group dispose={null} >
            <mesh ref={objRef}
               scale={objScale}
               castShadow
               receiveShadow
               geometry={nodes.Volume_Mesher.geometry}
               material={nodes.Volume_Mesher.material}
               position={objPos}>
               {/* <meshStandardMaterial emissive={"grey"} color={"#5b5b5b0"}/> */}
            </mesh>
         </group>
      </FrostedGlass>
      </>
      
     );
   };
 
 export default Eyes

应用程序。JS

import './App.css'
import React, { useRef, useState, useEffect } from "react";
import { Canvas, extend } from "@react-three/fiber";
import { OrbitControls, Effects, Environment } from '@react-three/drei';
import learning from './learning.svg'
import Eyes from './components/Eyes';
import { Suspense } from "react";


const App = () => {

   const isMobile = window.innerWidth <= 576;
  const [mousePosition, setMousePosition] = useState([0, 0]);
 
  const mainRef = useRef(null);


  const onMouseMove = (event) => {
   if (!isMobile) {
   const { clientX, clientY } = event;
   const mouseX = (clientX / window.innerWidth) * 2 - 1;
   const mouseY = -(clientY / window.innerHeight) * 2 + 1;

   setMousePosition([mouseX, mouseY]);

   }};



  return (
    <>
      <div style={{ width: "100vw", height: "100%" }} onMouseMove={onMouseMove}>
         <div className='diction'>
         <img src={learning} alt="learning" />
         <span>.</span>
         <span>.</span>
         <span>.</span>
         </div>
        <main
          ref={mainRef}
          style={{background: '#BABABA'}}>
          <Canvas camera={{ position: [0, 0, 300] }} >
               <ambientLight intensity={5} />
               <spotLight intensity={0.5} angle={0.1} penumbra={1} position={[10, 15, -5]} castShadow />
            <Suspense fallback={null}>     
               <Eyes mousePosition={mousePosition} deviceOrientation={null} />
            </Suspense>
            <OrbitControls/>
          </Canvas>
        </main>
      </div>
    </>
  );
};

export default App;