Javascript 在three.js中更改纹理时遇到问题_Javascript_Three.js

Javascript 在three.js中更改纹理时遇到问题

javascript three.js

Javascript 在three.js中更改纹理时遇到问题,javascript,three.js,Javascript,Three.js,我正在three.js中的网格上设置纹理： var容器，stats； var摄像机、场景、投影仪、光线投射器、渲染器 var mouse = new THREE.Vector2(), INTERSECTED; onMouseDownMouseX = 0, onMouseDownMouseY = 0, lon = 0, onMouseDownLon = 0, lat = 0, onMouseDownLat = 0, phi = 0, theta = 0,

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

var容器，stats； 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;
            }

此外：

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

更新：完整代码页

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

            }

var容器，stats；
var摄像机、场景、投影仪、光线投射器、渲染器；
var mouse=new THREE.Vector2（），相交；
onMouseDownMouseX=0，onMouseDownMouseY=0，
lon=0，onMouseDownLon=0，
lat=0，onMouseDownLat=0，
φ=0，θ=0，
target=新的3.Vector3（）；
init（）；
制作动画（）；
函数init（）{
container=document.createElement（'div'）；
文件.正文.附件（容器）；
摄像头=新的三个透视摄像头（55，window.innerWidth/window.innerHeight，11000）；
场景=新的三个。场景（）；
//质地
纹理=三个.ImageUtils.loadTexture（“纹理/DIVE_IMMO_uu00000.jpg”）；
texture_salon=THREE.ImageUtils.loadTexture（'textures/btn_salon.png'）；
//材料
var background=new THREE.MeshBasicMaterial（{map:texture}）；
var mat_salon=新的3.MeshBasicMaterial（{map:texture_salon}）
mat_salon.transparent=真；
mat_salon.map.needsUpdate=true；
mat_salon.depthTest=假；
//物体
var sphere=new THREE.网格（new THREE.SphereGeometry（500,60,40），背景）；
sphere.scale.x=-1；
场景。添加（球体）；
var plane_salon=新三网格（新三平面几何体（80,60），mat_salon）；
平面沙龙位置设置（-280,0100）；
平面沙龙注视（摄像机位置）；
plane_salon.id=01；
场景。添加（平面沙龙）；
renderer=new THREE.WebGLRenderer（{antialas:true}）；
renderer.setClearColor（0xF0）；
renderer.setSize（window.innerWidth、window.innerHeight）；
renderer.sortObjects=false；
container.appendChild（renderer.domeElement）；
文件。添加的文件列表（'mousedown'，onDocumentMouseDown，false）；
document.addEventListener（'mousemove'，onDocumentMouseMove，false）；
文件。添加的列表器（'mouseup'，onDocumentMouseUp，false）；
文件。添加的文件列表器（'mouseweel'，OnDocumentMouseweel，false）；
文档.添加的列表器（'DOMMouseScroll'，onDocumentMouseWheel，false）；
//
addEventListener（'resize'，onWindowResize，false）；
}
函数newTexture（）{
sphere.material.map=THREE.ImageUtils.loadTexture（“textures/DIVE_IMMO_00004.jpg”）；
sphere.material.map.needsUpdate=true；
}
函数onWindowResize（）{
camera.aspect=window.innerWidth/window.innerHeight；
camera.updateProjectMatrix（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
}
函数onDocumentMouseDown（事件）{
event.preventDefault（）；
onPointerDownPointerX=event.clientX；
onPointerDownPointerY=event.clientY；
onPointerDownLon=lon；
onPointerDownLat=纬度；
document.addEventListener（'mousemove'，onDocumentMouseMove，false）；
文件。添加的列表器（'mouseup'，onDocumentMouseUp，false）；
var投影仪=新的三个投影仪（）；
var vector=new THREE.Vector3（（event.clientX/window.innerWidth）*2-1，-（event.clientY/window.innerHeight）*2+1，0.5）；
投影仪。未投影向量（向量，相机）；
var raycaster=new THREE.raycaster（camera.position，vector.sub（camera.position.normalize（））；
var intersects=raycaster.intersectObjects（scene.children，true）；
如果（相交长度>0）{
选定=与[0]相交。对象；
if（SELECTED.id==01）{
$（'#plan'）.css（'显示'，''）；
$（“#菜单平面”）.css（'height'，'285px'）；
RotToKitchen（）；
}                   
}
}
onDocumentMouseMove函数（事件）{
lon=（onPointerDownPointerX-event.clientX）*0.1+onPointerDownLon；
lat=（event.clientY-onPointerDownPointerY）*0.1+onPointerDownLat；
}
onDocumentMouseUp函数（事件）{
document.removeEventListener（'mousemove'，onDocumentMouseMove，false）；
文档删除事件列表器（'mouseup'，onDocumentMouseUp，false）；
}
DocumentMouseWheel函数（事件）{
if（event.wheelDeltaY）{fov-=event.wheelDeltaY*0.05；}//WebKit
else如果（event.wheelDelta）{fov-=event.wheelDelta*0.05；}//Opera/Explorer 9
else如果（event.detail）{fov+=event.detail*1.0；}//Firefox
}
函数animate（）{
请求动画帧（动画）；
render（）；
}
函数RotToKitchen（）{
var id=requestAnimationFrame（RotToKitchen）；
如果（lon<90）{lon+=0.85；}
如果（lon>91）{lon-=0.85；}
艾尔斯卡
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 );

            }

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

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