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

Question

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

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

这是代码片段:

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