As someone new to Three.js, I'm facing a bit of a challenge with this.
I came across a possible solution here: Using multiuple textures on a sphere [Three.js]
The suggestion in the answer is to use a cube to load textures onto instead of a sphere. By doing this, the cube can then be expanded into a sphere.
var geometry = new THREE.BoxGeometry( 1, 1, 1, 8, 8, 8 );
for ( var i in geometry.vertices ) {
var vertex = geometry.vertices[ i ];
vertex.normalize().multiplyScalar(radius);
}
var materialArray = [];
var faceMaterial = new THREE.MeshLambertMaterial({
color: sphereColor,
transparent: true,
opacity: 0.4
});
for (var i = 0; i < 6; i++) {
materialArray.push(faceMaterial);
}
var material = new THREE.MeshFaceMaterial(materialArray);
var sphere = new THREE.Mesh( geometry, material );
scene.add( sphere );
Would the same approach work for videos? If I wanted to display six videos on a sphere, should I load the video texture onto the six faces of a cube and then expand it into a sphere?
EDIT:
Here's the code snippet I have:
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - equirectangular video panorama</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
background-color: #000000;
margin: 0px;
overflow: hidden;
}
#info {
position: absolute;
top: 0px; width: 100%;
color: #ffffff;
padding: 5px;
font-family:Monospace;
font-size:13px;
font-weight: bold;
text-align:center;
}
a {
color: #ffffff;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="three.js"></script>
<script>
// Code continues...
</script>
</body>
However, unfortunately, it doesn't seem to work as expected. When hosted online, all I see is a black screen. Can you please assist me in figuring out what could be causing this issue?