Bdtjtk

I create two scenes and two renderers, one is for simple 3D mesh sphere and another is for svg circle. SVG scene sits on top of Mesh scene, like an overlay. Sphere and circle are placed on the same position in 3D space. I use OrbitControls to look around. When program loads I see sphere and the circle in the same place, but when I look around I see another svg sphere on the opposite side. Why do I see two svg icons in 3D space and how to get rid of the second one? I know for sure it is one svg node, not two, but somehow orbit controls see it behind like in the mirror.

Here is demo link: http://mystic-peanut.com/mystic_sites/svgdouble/svg_sandbox.html

Here is code snippet:

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;

This issue was fixed within this ticket:
github.com/mrdoob/three.js/issues/15476