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 Uncaught TypeError：无法读取未定义的属性“可见”

非常感谢您的帮助！

Answer 1

您使用的代码和three.js版本不一样。您的代码看起来可能与three.js版本r72兼容。

三个js在场景中加载Img

1 个答案: