I have a rotating panoramic image (sphereGeometry) with a functionality to draw line segments using mouse events. The problem is that the lines disappear when I rotate the panoramic image. The lines are visible on only one part of the image. I tried changing the camera FOV and setting the camera position but none of that helps!
How can I fix this?
Here’s my code for reference:
function init() {
container = document.getElementById('container');
//to hide context-menu options on mouse right click
container.oncontextmenu = function() {
return false;
}
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 10000);
camera.target = new THREE.Vector3(0, 0, 0);
camera.position.set(0,0,10);
camera.lookAt(camera.target);
// creation of a big sphere geometry
var geometry = new THREE.SphereBufferGeometry( 1000, 120, 80 );
geometry.applyMatrix4(new THREE.Matrix4().makeScale(-1, 1, 1));
scene = new THREE.Scene();
spherical = new THREE.Spherical();
texture = new THREE.TextureLoader().load( 'bg1.jpg' );
// texture = new THREE.TextureLoader().load( param );
var material = new THREE.MeshBasicMaterial( { map: texture } );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
//defining geometry for end points
sphereGeometry = new THREE.SphereGeometry(sphereSize, 32, 32);
sphereMaterial = new THREE.MeshBasicMaterial({color: 0xffff00, transparent: true, opacity: 0.6});
raycaster = new THREE.Raycaster();
renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
var MAX_POINTS = 500;
positions = new Float32Array(MAX_POINTS * 3);
lineGeometry = new THREE.BufferGeometry();
lineGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
lineMaterial = new THREE.LineBasicMaterial({color: 0xffffff, depthTest: false, side: THREE.DoubleSide});
line = new THREE.Line(lineGeometry, lineMaterial);
scene.add(line);
container.addEventListener( 'mousedown', onPointerStart, false );
container.addEventListener( 'mousemove', onPointerMove, false );
//container.addEventListener( 'mouseup', onPointerUp, false );
container.addEventListener( 'wheel', onDocumentMouseWheel, false );
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function onPointerStart( event ) {
isUserInteracting = true;
var clientX = event.clientX || event.touches[ 0 ].clientX;
var clientY = event.clientY || event.touches[ 0 ].clientY;
onMouseDownMouseX = clientX;
onMouseDownMouseY = clientY;
onMouseDownLon = lon;
onMouseDownLat = lat;
if(drawMode == true && event.which == 1)
{
leftMouseClicked = true;
//defining geometry for lines
// lineGeometry = new THREE.Geometry();
// lineMaterial = new THREE.LineBasicMaterial({color: 0xffffff});
var mouse3D = new THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1,
-( event.clientY / window.innerHeight ) * 2 + 1,
0.5 );
raycaster.setFromCamera( mouse3D, camera );
var intersects = raycaster.intersectObjects( scene.children,true );
if ( intersects.length > 0 ) {
//creating a new point
newPoint = new THREE.Vector3(0,1,0);
spherical.setFromCartesianCoords(intersects[ 0 ].point.x, intersects[ 0 ].point.y, intersects[ 0 ].point.z);
spherical.set(800, spherical.phi, spherical.theta); //setting radius, phi and theta remains same
newPoint.setFromSphericalCoords(spherical.radius, spherical.phi, spherical.theta);
//console.log("NewPoints: " + newPoint.x +", " + newPoint.y + ", " + newPoint.z);
//lineGeometry.vertices.push(newPoint);
if(count === 0)
addEndPoints(newPoint.x, newPoint.y, newPoint.z);
addEndPoints(newPoint.x, newPoint.y, newPoint.z);
}
}
else{
event.preventDefault();
return;
}
}
function onPointerMove( event ) {
if ( isUserInteracting === true && drawMode == false && event.which == 3) {
var clientX = event.clientX || event.touches[ 0 ].clientX;
var clientY = event.clientY || event.touches[ 0 ].clientY;
lon = ( onMouseDownMouseX - clientX ) * 0.1 + onMouseDownLon;
lat = ( clientY - onMouseDownMouseY ) * 0.1 + onMouseDownLat;
}
else if(drawMode == true)
{
if(event.which === 3)
{
var clientX = event.clientX || event.touches[ 0 ].clientX;
var clientY = event.clientY || event.touches[ 0 ].clientY;
lon = ( onMouseDownMouseX - clientX ) * 0.1 + onMouseDownLon;
lat = ( clientY - onMouseDownMouseY ) * 0.1 + onMouseDownLat;
}
else{ //enable line drawing
var mouse3D = new THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1,
-( event.clientY / window.innerHeight ) * 2 + 1,
0.5 );
raycaster.setFromCamera( mouse3D, camera );
var intersects = raycaster.intersectObjects( scene.children,true );
if ( intersects.length > 0 ) {
//creating a new point
var currPoint = new THREE.Vector3(0,1,0);
spherical.setFromCartesianCoords(intersects[ 0 ].point.x, intersects[ 0 ].point.y, intersects[ 0 ].point.z);
spherical.set(800, spherical.phi, spherical.theta); //setting radius, phi and theta remains same
currPoint.setFromSphericalCoords(spherical.radius, spherical.phi, spherical.theta);
console.log("CurrPoints: " + currPoint.x +", " + currPoint.y + ", " + currPoint.z);
//lineGeometry.vertices.push(newPoint);
if(count !== 0)
updateLine(currPoint.x, currPoint.y, currPoint.z);
}
}
}
else{
event.preventDefault();
return;
}
}
// update line
function updateLine(x, y, z) {
positions[count * 3 - 3] = x;
positions[count * 3 - 2] = y;
positions[count * 3 - 1] = z;
line.geometry.attributes.position.needsUpdate = true;
}
function onDocumentMouseWheel( event ) {
var clientX = event.clientX || event.touches[ 0 ].clientX;
var fov = camera.fov + event.deltaY * 0.05;
console.log("CAMERA FOV: "+ fov);
camera.fov = THREE.Math.clamp( fov, 10, 75 );
camera.position.set(0,0,10);
camera.updateProjectionMatrix();
}
function animate() {
requestAnimationFrame( animate );
update();
}
function update() {
if ( isUserInteracting === false )
{
//for rotation
//lon += 0.1;
}
// limiting latitude from -85 to 85 (cannot point to the sky or under your feet)
lat = Math.max( - 85, Math.min( 85, lat ) );
phi = THREE.Math.degToRad( 90 - lat );
theta = THREE.Math.degToRad( lon );
lat = Math.max( - 85, Math.min( 85, lat ) );
camera.target.x = 500 * Math.sin(THREE.Math.degToRad(90 - lat)) * Math.cos(THREE.Math.degToRad(lon));
camera.target.y = 500 * Math.cos(THREE.Math.degToRad(90 - lat));
camera.target.z = 500 * Math.sin(THREE.Math.degToRad(90 - lat)) * Math.sin(THREE.Math.degToRad(lon));
camera.lookAt(camera.target);
console.log("CAMERA TARGET" + camera.target.x + " " + camera.target.y + " "+ camera.target.z);
renderer.render( scene, camera );
}
//add spherical objects
function addEndPoints(x, y, z)
{
sphereGeometry = new THREE.SphereGeometry(sphereSize, 32, 32);
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphere.position.set(x, y, z);
scene.add(sphere);
positions[count * 3 + 0] = x;
positions[count * 3 + 1] = y;
positions[count * 3 + 2] = z;
count++;
line.geometry.setDrawRange(0, count);
updateLine(x, y, z);
renderer.render( scene, camera );
}
The output, when lines are visible:
The output when lines disappear after I rotate the background:
