Attempting to display an image in my 360-degree scene, but encountering issues with the code:
<script>
var controls, camera, scene, renderer, element;
var container;
var sceneCube;
init();
animate();
function init() {
// CAMERAS
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
camera.position.set( 0, 0, 1000 );
cameraCube = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
//
renderer = new THREE.WebGLRenderer();
renderer.autoClear = false;
renderer.setSize( window.innerWidth, window.innerHeight );
element = renderer.domElement;
container = document.getElementById('webglviewer');
container.appendChild(element);
//
controls = new THREE.OrbitControls( camera, element );
controls.noPan = true;
controls.noZoom = true;
// SCENE
scene = new THREE.Scene();
sceneCube = new THREE.Scene();
// Textures
var r = "textures/cube/Bridge2/";
var urls = [ r + "face_4_2048.jpg", r + "face_2_2048.jpg",
r + "face_6_2048.jpg", r + "face_5_2048.jpg",
r + "face_1_2048.jpg", r + "face_3_2048.jpg" ];
textureCube = THREE.ImageUtils.loadTextureCube( urls );
textureCube.format = THREE.RGBFormat;
textureCube.mapping = THREE.CubeReflectionMapping;
// Materials
var cubeShader = THREE.ShaderLib[ "cube" ];
var cubeMaterial = new THREE.ShaderMaterial( {
fragmentShader: cubeShader.fragmentShader,
vertexShader: cubeShader.vertexShader,
uniforms: cubeShader.uniforms,
depthWrite: true,
side: THREE.BackSide
} );
cubeMaterial.uniforms[ "tCube" ].value = textureCube;
// Skybox
cubeMesh = new THREE.Mesh( new THREE.BoxGeometry( 100, 100, 100 ), cubeMaterial );
sceneCube.add( cubeMesh );
var materials = THREE.ImageUtils.loadTexture('badge.png');
myImg = new THREE.Mesh(
new THREE.BoxGeometry( 562, 562, 562, 1, 1, 1 ),
new THREE.MeshFaceMaterial( materials ) );
// Attempting to add image to the sceneCube
sceneCube.add( myImg );
// Initialization complete
}
function onWindowResize() {
var width = container.offsetWidth;
var height = container.offsetHeight;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
cameraCube.aspect = window.innerWidth / window.innerHeight;
cameraCube.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
//
function animate() {
requestAnimationFrame( animate );
render();
controls.update();
}
function render() {
var timer = -0.0002 * Date.now();
camera.lookAt( scene.position );
cameraCube.rotation.copy( camera.rotation );
renderer.render( sceneCube, cameraCube );
renderer.render( scene, camera );
}
Error message encountered at this position:
var materials = THREE.ImageUtils.loadTexture('badge.png');
myImg = new THREE.Mesh(
new THREE.BoxGeometry( 562, 562, 562, 1, 1, 1 ),
new THREE.MeshFaceMaterial( materials ) );
// Adding image to sceneCube leads to error
sceneCube.add( myImg );
Error Message Received: three.min.js:538 Uncaught TypeError: Cannot read property 'visible' of undefined
Appreciate any assistance or insights!