web-dev-qa-db-fra.com

SVGRenderer avec OrbitControls montre deux éléments SVG sur les côtés opposés

Je crée deux scènes et deux moteurs de rendu, l’un pour la simple sphère maillée 3D et l’autre pour le cercle svg. La scène SVG se superpose à la scène Mesh. La sphère et le cercle sont placés à la même position dans l'espace 3D. J'utilise OrbitControls pour regarder autour de moi. Lorsque le programme est chargé, je vois la sphère et le cercle au même endroit, mais lorsque je regarde autour de moi, je vois une autre sphère svg du côté opposé. Pourquoi est-ce que je vois deux icônes svg dans un espace 3D et comment se débarrasser de la seconde? Je sais que c’est un noeud svg, pas deux, mais les contrôles d’orbite le voient comme derrière dans le miroir.

Voici le lien de démonstration: http://mystic-peanut.com/mystic_sites/svgdouble/svg_sandbox.html

Voici l'extrait de code:

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;
javascriptsvgthree.js
11
pera

Ce problème a été résolu dans ce ticket: github.com/mrdoob/three.js/issues/15476

0
pera