Three js load Img in Scene

Question

i would like to load a image in my 360 degree Scene but it dosen't work. My 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 ) );
    sceneCube.add( myImg );

    //INIT END
}



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 );

}

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 ) );
    sceneCube.add( myImg );

Got this error message: three.min.js:538 Uncaught TypeError: Cannot read property 'visible' of undefined

Many thanks for help!

Answer 1

Your code and the version of three.js that you are using are not the same. Your code looks like it could be compatible with three.js version r72.