带有 OrbitControls 的 SVGRenderer 在对面显示两个 SVG 元素

Question

我创建了两个场景和两个渲染器，一个用于简单的 3D 网格球体，另一个用于 svg 圆形。 SVG 场景位于 Mesh 场景之上，就像一个叠加层。球体和圆位于 3D 空间中的同一位置。我使用 OrbitControls 环顾四周。当程序加载时，我看到球体和圆圈在同一个地方，但是当我环顾四周时，我看到另一侧的另一个 svg 球体。为什么我在 3D 空间中看到两个 svg 图标以及如何摆脱第二个？我确定它是一个 svg 节点，而不是两个，但不知何故，轨道控制看到它就像在镜子里一样。

这里是演示链接：http://mystic-peanut.com/mystic_sites/svgdouble/svg_sandbox.html

这里是代码sn-p：

camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = -50;

scene = new THREE.Scene();
scene.background = new THREE.Color( 0xff0000 );

meshScene = new THREE.Scene();
meshScene.background = new THREE.Color( 0x000000 );

// 3d sphere mesh added to mesh scene

var sphereGeometry = new THREE.SphereGeometry( 51, 60, 40 )
var mesh = new THREE.Mesh( sphereGeometry, new THREE.MeshLambertMaterial( { color: Math.random() * 0xffffff } ) );
mesh.name = 'pointer sphere';
mesh.position.set( 0, 0, 1500 );
meshScene.add( mesh );

// svg circle added to svg scene

node = document.createElementNS( 'http://www.w3.org/2000/svg', 'circle' );
node.setAttribute( 'stroke', 'black' );
node.setAttribute( 'fill', 'blue' );
node.setAttribute( 'r', '10' );
node.style.cursor = 'pointer';
var object = new THREE.SVGObject( node );
object.position.x = 0;
object.position.y = 0;
object.position.z = 1500;
scene.add( object );

meshRenderer = new THREE.WebGLRenderer( { antialias: true } );
meshRenderer.setPixelRatio( window.devicePixelRatio );
meshRenderer.setSize(window.innerWidth, window.innerHeight);
meshRenderer.domElement.style.position = 'absolute';
meshRenderer.domElement.style.top = '0px';
threeJSCanvas.appendChild( meshRenderer.domElement );

renderer = new THREE.SVGRenderer( {alpha: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setQuality( 'low' );
renderer.domElement.style.position = 'absolute';
renderer.domElement.style.top = '0px';
renderer.domElement.style.zIndex = 2;
renderer.setClearColor( 0x000000, 0);
threeJSCanvas.appendChild( renderer.domElement );

// controls

controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.addEventListener( 'change', render ); // call this only in static scenes (i.e., if there is no animation loop)
controls.minDistance = 10;
controls.maxDistance = 100;
controls.maxPolarAngle = 2*Math.PI / 3;
controls.minPolarAngle = Math.PI / 3;

Answer 1

此问题已在此票证中得到解决： github.com/mrdoob/three.js/issues/15476