Cel着色在反应三根光纤?

时间:2020-10-12 11:28:22

标签: reactjs three.js react-three-fiber

尝试在我的项目中实现cel阴影模型。 并在三个js文档中找到了this example

相同的源代码可用here。 但是,对于如何将导入的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>

卡通着色器是为徽标对象实现的,

        <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)创建效果 然后使用效果渲染场景。

0 个答案:

没有答案