在three.js中更改纹理的问题

Question

我在 three.js 中的网格上设置纹理：

var 容器，统计信息； var 相机、场景、投影仪、光线投射器、渲染器；

    var mouse = new THREE.Vector2(), INTERSECTED;

    onMouseDownMouseX = 0, onMouseDownMouseY = 0,
    lon = 0, onMouseDownLon = 0,
    lat = 0, onMouseDownLat = 0,
    phi = 0, theta = 0,
    target = new THREE.Vector3();


    init();
    animate();



    function init() {

        container = document.createElement( 'div' );
        document.body.appendChild( container );

        camera = new THREE.PerspectiveCamera( 55, window.innerWidth / window.innerHeight, 1, 1000 );

        scene = new THREE.Scene();

        texture = THREE.ImageUtils.loadTexture( "textures/DIVE_IMMO_00000.jpg");

        var background = new THREE.MeshBasicMaterial({map: texture});

        var sphere = new THREE.Mesh( new THREE.SphereGeometry( 500, 60, 40 ), background );
        sphere.scale.x = -1;
        scene.add( sphere );

        //projector = new THREE.Projector();
        //raycaster = new THREE.Raycaster();

        renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setClearColor( 0xf0f0f0 );
        renderer.setSize( window.innerWidth, window.innerHeight );
        renderer.sortObjects = false;
        container.appendChild(renderer.domElement);

        document.addEventListener( 'mousedown', onDocumentMouseDown, false );
        document.addEventListener( 'mousemove', onDocumentMouseMove, false );
        document.addEventListener( 'mouseup', onDocumentMouseUp, false );
        document.addEventListener( 'mousewheel', onDocumentMouseWheel, false );
        document.addEventListener( 'DOMMouseScroll', onDocumentMouseWheel, false);

        //

        window.addEventListener( 'resize', onWindowResize, false );

    }

接下来，我想使用按钮更改此网格上的纹理。我试过了：

function newTexture() {
           sphere.material.texture = THREE.ImageUtils.loadTexture( "textures/DIVE_IMMO_00004.jpg");
sphere.material.texture.needsUpdate = true;
            }

还有：

texture2 = THREE.ImageUtils.loadTexture( "textures/DIVE_IMMO_00004.jpg"); and

function newTexture() {
background = new THREE.MeshBasicMaterial({map: texture2});
}

但它不起作用，我真的不明白为什么。 抱歉这个菜鸟问题^^

更新：完整代码页

var container, stats;
            var camera, scene, projector, raycaster, renderer;

            var mouse = new THREE.Vector2(), INTERSECTED;

            onMouseDownMouseX = 0, onMouseDownMouseY = 0,
            lon = 0, onMouseDownLon = 0,
            lat = 0, onMouseDownLat = 0,
            phi = 0, theta = 0,
            target = new THREE.Vector3();


            init();
            animate();



            function init() {

                container = document.createElement( 'div' );
                document.body.appendChild( container );

                camera = new THREE.PerspectiveCamera( 55, window.innerWidth / window.innerHeight, 1, 1000 );

                scene = new THREE.Scene();

                //textures              
                texture = THREE.ImageUtils.loadTexture( "textures/DIVE_IMMO_00000.jpg");
                texture_salon= THREE.ImageUtils.loadTexture( 'textures/btn_salon.png');

                //materials 
                var background = new THREE.MeshBasicMaterial({map: texture});

                var mat_salon = new THREE.MeshBasicMaterial( { map: texture_salon } )
                    mat_salon.transparent = true;
                    mat_salon.map.needsUpdate = true;
                    mat_salon.depthTest = false;

                //Objects
                var sphere = new THREE.Mesh( new THREE.SphereGeometry( 500, 60, 40 ), background );
                sphere.scale.x = -1;
                scene.add( sphere );

                var plane_salon = new THREE.Mesh( new THREE.PlaneGeometry( 80, 60 ), mat_salon );
                plane_salon.position.set( -280, 0, 100 );
                plane_salon.lookAt( camera.position );
                plane_salon.id = 01;
                scene.add( plane_salon );


                renderer = new THREE.WebGLRenderer({ antialias: true });
                renderer.setClearColor( 0xf0f0f0 );
                renderer.setSize( window.innerWidth, window.innerHeight );
                renderer.sortObjects = false;
                container.appendChild(renderer.domElement);

                document.addEventListener( 'mousedown', onDocumentMouseDown, false );
                document.addEventListener( 'mousemove', onDocumentMouseMove, false );
                document.addEventListener( 'mouseup', onDocumentMouseUp, false );
                document.addEventListener( 'mousewheel', onDocumentMouseWheel, false );
                document.addEventListener( 'DOMMouseScroll', onDocumentMouseWheel, false);

                //

                window.addEventListener( 'resize', onWindowResize, false );

            }

            function newTexture() {
            sphere.material.map = THREE.ImageUtils.loadTexture( "textures/DIVE_IMMO_00004.jpg");
            sphere.material.map.needsUpdate = true;
            }


            function onWindowResize() {

                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();

                renderer.setSize( window.innerWidth, window.innerHeight );

            }

            function onDocumentMouseDown( event ) {
                event.preventDefault();
                onPointerDownPointerX = event.clientX;
                onPointerDownPointerY = event.clientY;
                onPointerDownLon = lon;
                onPointerDownLat = lat;

                document.addEventListener( 'mousemove', onDocumentMouseMove, false );
                document.addEventListener( 'mouseup', onDocumentMouseUp, false );

                var projector = new THREE.Projector();
                var vector = new THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );
                projector.unprojectVector( vector, camera );

                var raycaster = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );

                var intersects = raycaster.intersectObjects( scene.children,true );

                if ( intersects.length > 0 ) {
                    SELECTED = intersects[0].object;

                        if (SELECTED.id == 01){
                        $('#plan').css('display', '');
                        $('#Menu-plan').css('height', '285px');
                        RotToKitchen();
                        }                   
                }
            }

            function onDocumentMouseMove( event ) {
                    lon = ( onPointerDownPointerX - event.clientX ) * 0.1 + onPointerDownLon;
                    lat = ( event.clientY - onPointerDownPointerY ) * 0.1 + onPointerDownLat;                   
            }


            function onDocumentMouseUp( event ) {
                            document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
                            document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
            }


            function onDocumentMouseWheel( event ) {
                if ( event.wheelDeltaY ) {fov -= event.wheelDeltaY * 0.05;} // WebKit
                    else if ( event.wheelDelta ) {fov -= event.wheelDelta * 0.05;} // Opera / Explorer 9
                        else if ( event.detail ) {fov += event.detail * 1.0;} // Firefox
            }



            function animate() {
                requestAnimationFrame( animate );
                render();
            }

            function RotToKitchen() {
            var id = requestAnimationFrame( RotToKitchen );
            if (lon < 90) {lon +=0.85;}
                else if (lon > 91) {lon -=0.85;}
                    else cancelAnimationFrame( id );
            render();
            }


            function render() {

                lat = Math.max( - 85, Math.min( 85, lat ) );
                phi = THREE.Math.degToRad( 90 - lat );
                theta = THREE.Math.degToRad( lon );

                target.x = 0 * Math.sin( phi ) * Math.cos( theta );
                target.y = 0 * Math.cos( phi );
                target.z = 0 * Math.sin( phi ) * Math.sin( theta ); 

                camera.position.x = 100 * Math.sin( phi ) * Math.cos( theta );
                camera.position.y = 100 * Math.cos( phi );
                camera.position.z = 100 * Math.sin( phi ) * Math.sin( theta );
                camera.lookAt( target );


                renderer.render( scene, camera );

            }

Answer 1

我注意到的一个问题是您使用sphere.material.texture = ... 而应该是sphere.material.map = ...

而sphere.material.texture.needsUpdate 应该是sphere.material.map.needsUpdate = true;

我认为更新现有纹理会更好：

texture = THREE.ImageUtils.loadTexture( "textures/DIVE_IMMO_00000.jpg");

更新它：

texture.image = ( "textures/DIVE_IMMO_00004.jpg" );
texture.needsUpdate = true;

不确定它如何与预加载图像等一起工作......