I am currently working on developing a user-friendly panorama web application that allows users to rotate in all directions and interact with sprites within the loaded panorama. While I have successfully implemented this functionality in CSS3D using three.js, I am now facing the challenge of transitioning it to WebGL. Although I have managed to load the panorama and add a sprite to the scene without any errors, the sprite is not visible on the screen.
How can I make the sprite visible?
Below is the relevant code snippet (excluding standard event functions and the rendering loop):
function init() {
var container, mesh;
container = document.getElementById('container');
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1100);
camera.target = new THREE.Vector3(0, 0, 0);
scene = new THREE.Scene();
var sides = [
{
url: '/assets/posx.jpg'
},
{
url: '/assets/negx.jpg'
},
{
url: '/assets/posy.jpg'
},
{
url: '/assets/negy.jpg'
},
{
url: '/assets/posz.jpg'
},
{
url: '/assets/negz.jpg'
}
];
var k = 8;
for (var i = 0; i < sides.length; i++) {
var side = sides[i];
var geometry = new THREE.SphereGeometry(5, k, k);
k += 8;
geometry.applyMatrix(new THREE.Matrix4().makeScale(-1, 1, 1));
var material = new THREE.MeshBasicMaterial({
map: THREE.ImageUtils.loadTexture(side.url)
});
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
}
var map = THREE.ImageUtils.loadTexture("/assets/soap.png");
material = new THREE.SpriteMaterial({ map: map, color: 0xffffff, fog: false });
var sprite = new THREE.Sprite(material);
sprite.position.x = 128;
sprite.position.y = 128;
sprite.position.z = 128;
scene.add(sprite);
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
document.addEventListener('mousedown', onDocumentMouseDown, false);
document.addEventListener('mousewheel', onDocumentMouseWheel, false);
document.addEventListener('touchstart', onDocumentTouchStart, false);
document.addEventListener('touchmove', onDocumentTouchMove, false);
window.addEventListener('resize', onWindowResize, false);
}
Any assistance on this issue would be highly appreciated!