1

试图在我的项目中实现一个 cel 阴影模型。并在三个 js 文档中找到了这个例子

相同的源代码可在此处获得。但是，我对如何将导入的 OutlineEffect 应用到要返回的画布感到困惑。

        <Canvas sRGB shadowMap camera={{ fov: 75 }}>
            <OutlineEffect ref = { renderer } />
            <ambientLight intensity={0.2} />
            <pointLight position={[10, 10, 10]} />
            <pointLight position={[-10, -10, -10]} intensity={0.5} />
... directional light ...
            <Suspense fallback={null}>
                <Logo position = {[0, 0, 0]} />
            </Suspense>
            <mesh rotation={[-Math.PI / 2, 0, 0]} position={[0, -2.3, 0]} receiveShadow>
                <planeBufferGeometry attach="geometry" args={[10, 10]} />
                <shadowMaterial attach="material" transparent opacity={0.5}/>
            </mesh>
        </Canvas>

为 Logo 对象实现了卡通着色器，

        <mesh
            {...props}
            ref={group}
            castShadow
            dispose={null}
            geometry = {nodes.Curve001.geometry}
            scale = {active ? [46, 46, 46] : [42, 42, 42]}
            rotation={[Math.PI / 2, 0, 0]}
            onClick = {(e) => setActive(!active)}
            onPointerOver = {(e) => setHover(true)}
            onPointerOut = {(e) => setHover(false)}
        >
            <meshToonMaterial
                color = {diffuseColor}
                gradientMap = { gradientMap }
            />
        </mesh>

该示例使用 THREE.WebGlRenderer() 使用它来使用 OutlineEffect(renderer) 创建效果，然后使用该效果来渲染场景。

4

0 回答 0