2

I have added sphere and planegeometry to the scene, I have used X and Y values to place the planegeometry in the scene, some planegeometry are overlapping with eachother I need to detect the overlapped planegeometry and place it to a new position in order to avoid the overlapping of those planegeometry without changing the X and Y values. can someone please help me how to solve this problem. I have just added this code in jsfiddle I don't know exactly how to display result in jsfiddle. I have added the image of the result which might give an idea what the problem is. https://jsfiddle.net/lakers1234/ek7fcx9L/image

window.onload = createsphere();
function createsphere() 
{
var controls,scene,camera,renderer;

function init() 
{

var spriteResponse = [];
spriteResponse[0] = {ID:1, x: 0, y: 0, name:'Hello'};
spriteResponse[1] = {ID:2, x: 0, y: 0.01, name:'Hello world'};
spriteResponse[2] = {ID:3, x: 0, y: 0.5, name:'los Angles united states of america'};
spriteResponse[3] = {ID:4, x: 0.5, y: 0, name:'Canada'};
spriteResponse[4] = {ID:5, x: 0.25, y: 0.5, name:'London united kingdom' };

scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
//camera.position.y = 1;
camera.position.z = 1 ;             
var width = window.innerWidth;
var height = window.innerHeight;
renderer = new THREE.WebGLRenderer( {antialias:true} );
renderer.setSize(width, height);
document.body.appendChild(renderer.domElement);

/* ------------------------ creating the geometry of sphere------------------------------*/

var radius = 2.5;
var spheregeometry = new THREE.SphereGeometry(radius, 20, 20, 0, -6.283, 1, 1);
var texture =  THREE.ImageUtils.loadTexture ('rbi00000083.jpg');
texture.minFilter = THREE.NearestFilter;
//var spherematerial = new THREE.MeshBasicMaterial({map: texture});
var spherematerial = new THREE.MeshBasicMaterial({color: '#A9A9A9'});
var sphere = new THREE.Mesh(spheregeometry, spherematerial); 
scene.add(sphere);
scene.add(camera);
scene.autoUpdate = true;                
controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.minPolarAngle = Math.PI/4;
controls.maxPolarAngle = 3*Math.PI/4;   




}
lakers1234
  • 125
  • 1
  • 2
  • 14
  • can you change x and y values from spriteResponse array?? as you should give 0.1 difference in y value to avoid overlapping – spankajd Feb 21 '17 at 11:55
  • @spankajd i don't want to directly change the y value in spriteResponse array. First i need to detect which planegeometryis overlapping and then add a new value to the previous value like y+newvalue. – lakers1234 Feb 21 '17 at 12:26
  • @lakers1234 I'm a bit curious, why don't you use `THREE.Sprite()` instead of `THREE.Plane()`? – prisoner849 Feb 21 '17 at 13:00
  • @prisoner849 do you have any solution or logic how to solve the overlapping problem? – lakers1234 Feb 21 '17 at 13:20
  • @lakers1234 Using of `THREE.Sprite()` is very obvious in such situations. Insisting to use `THREE.Plane()` is very enigmatic, as it looks like reinventing a bicycle with additional crutches, totally IMHO. No, I have no any other solution or idea or logics. – prisoner849 Feb 21 '17 at 13:29

1 Answers1

0

Based on this SO answer.

When you know quaternion of your camera, you can apply it to your planes.

Put your planes in an array:

var planes = [];

and then in the animation loop we'll do this:

planes.forEach(function(p){
  p.quaternion.copy(camera.quaternion);
})

jsfiddle example.

Community
  • 1
  • 1
prisoner849
  • 16,894
  • 4
  • 34
  • 68