轮廓对象后面的透明对象

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（基于https://stackoverflow.com/a/23198184/2785396）

Answer 1

我无法发表评论（代表不够），所以我会发一个答案。

你从原来的JS小提琴中取了例子：http://jsfiddle.net/Eskel/g593q/5/并删除了作曲家。作曲家在渲染过程中广告了一些额外的操作。

<Resource name="jdbc/my_ds" auth="Container" factory="oracle.ucp.jdbc.PoolDataSourceImpl" 
          type="oracle.ucp.jdbc.PoolDataSource" description="UCP Pool in Tomcat" 
          connectionFactoryClassName="oracle.jdbc.pool.OracleDataSource" minPoolSize="1" maxPoolSize="10" 
          initialPoolSize="2" inactiveConnectionTimeout="20" setMaxIdleTime="1800" 
          user="my_user" password="my_password" 
          url="jdbc:oracle:thin:@mydb.com:1234:DATABASEID" connectionPoolName="MY_UCPPool" 
          connectionProperties="defaultBatchValue=7000,defaultRowPrefetch=7000" validateConnectionOnBorrow="true"/>

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

我的建议是分叉原始示例并保持作曲家的完整性。如果您无法使用它，请记住包含原始示例中的以下脚本。如果其中任何一个在操作中丢失，你就会有一个破碎的作曲家，这意味着你的页面不会渲染。

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