尝试在我的项目中实现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)创建效果 然后使用效果渲染场景。