轮廓对象后面的透明对象

Question

我有一个轮廓对象。

我想在它后面画一个透明的物体。我的问题是轮廓与透明对象混合在一起。

如何绘制轮廓才不会混合？

# PLANE
geo1 = new THREE.PlaneGeometry 500, 500
mat1 = new THREE.MeshPhongMaterial({color: 0x00ff00, transparent: true, opacity: 0.5})
plane = new THREE.Mesh geo1, mat1
plane.position.z = -100
scene.add plane

# SHADED MODEL
torusKnotGeo = new THREE.TorusKnotGeometry 50, 10, 128, 16
phongMat2 = new THREE.MeshPhongMaterial 0xffffff
torusKnot = new THREE.Mesh torusKnotGeo, phongMat2
scene.add torusKnot

# OUTLINE
uniforms = offset:
    type: "f"
    value: 2
shader = shader['outline']
shaderMat = new THREE.ShaderMaterial
    uniforms: uniforms,
    vertexShader: shader.vertex_shader,
    fragmentShader: shader.fragment_shader,
torusKnotOutline = new THREE.Mesh torusKnotGeo, shaderMat
torusKnotOutline.material.depthWrite = false
outScene.add torusKnotOutline

jsfiddle (based on )

Answer 1

我无法评论（没有足够的代表），所以我会 post 一个答案。

您从原始 JS fiddle: http://jsfiddle.net/Eskel/g593q/5/ 中获取了示例并删除了作曲家。作曲家在渲染过程中添加了一些额外的操作。

composer.addPass normal
composer.addPass mask
composer.addPass outline
composer.addPass clearMask
composer.addPass copyPass

首先渲染物体场景、轮廓场景和蒙版场景。
然后它制作一个遮罩，在其上呈现轮廓，然后清除该遮罩。这部分创建您的大纲，这是非常重要的一步。为什么？因为如果我使用你的代码并添加一个额外的对象，你会看到轮廓被两个对象遮住了。无论第二个对象是在场景的前面还是后面，都会发生这种情况，我相信你不想发生这种情况。示例：http://jsfiddle.net/adrian_moisa/84470k4n/1/
最后，它将轮廓复制到渲染的场景上。

我的建议是分叉原始示例并保持作曲家完整。如果您没有让它工作，请记住包含原始示例中的以下脚本。如果其中任何一个在操作中丢失，你的作曲家就坏了，这意味着你的页面将无法呈现。

ShaderPass.js
RenderPass.js
MaskPass.js
EffectComposer.js
CopyShader.js
AdditiveBlendShader.js

轮廓对象后面的透明对象

Transparent object behind outline object

three.js