三個js在場景中加載Img

Question

我想在我的360度場景中加載圖像，但它不起作用。 我的代碼：

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

} 

在此位置：

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

得到這個錯誤信息： three.min.js：538遺漏的類型錯誤：無法讀取的未定義的屬性 '可見的'

非常感謝您的幫助！

Answer 1

您的代碼和您使用的three.js版本不一樣。你的代碼看起來可能與three.js版本r72兼容。