在三.js中更改纹理时遇到麻烦

Question

我正在三个网格上设置纹理.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;

不确定它如何预加载图像等...