изменить картинку динамически 360 - PullRequest
Новая
       8

изменить картинку динамически 360

0 голосов
/ 23 мая 2019 
<div style="margin-bottom: 200px">  
    <a href="#" onclick="cambio()"> sdsadasdas</a>
</div>

<div id="container"></div>
<div id="info"> </div>

У меня есть изображение, использующее three.js, которое мне нужно динамически изменять другим, когда я нажимаю на кнопку 

<!-- <script src="three.min.js"></script> -->
<script>
    var camera, scene, renderer;

    var texture_placeholder,
    isUserInteracting = false,
    onMouseDownMouseX = 0, onMouseDownMouseY = 0,
    lon = 0, onMouseDownLon = 0,
    lat = 0, onMouseDownLat = 0,
    phi = 0, theta = 0;

    var imagen='HabitacionPrincipal'
    init(imagen);

    function cambio(){
    //What would I need to place here to be able to make the change dynamically?

    }

    function init(imagen) {
        var container, mesh;
        container = document.getElementById( 'container' );
        camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1100 );
        camera.target = new THREE.Vector3( 0, 0, 0 );
        scene = new THREE.Scene();

        var geometry = new THREE.SphereGeometry( 500, 60, 40 );
        geometry.applyMatrix( new THREE.Matrix4().makeScale( -1, 1, 1 ) );

        console.log(imagen)
            var material = new THREE.MeshBasicMaterial( {
                map: THREE.ImageUtils.loadTexture( imagen+'.jpg' )
            } );

        mesh = new THREE.Mesh( geometry, material );    
        scene.add( mesh );

        renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );
        container.appendChild( renderer.domElement );

        window.addEventListener( 'resize', onWindowResize, false ); 
        animate();
    }
</script>

Мне нужно изменить изображение на ранее выбранное

Я попробовал этот пост, но не sucessc

Threejs Изменить изображение во время выполнения

1 Ответ

0 голосов
/ 24 мая 2019

Вам нужно сделать переменную доступной глобально, а не ограничивать ее область действия функцией init().

Думайте об этом как о диаграмме Венна, вы должны поместить material вне init() и cambio(), чтобы она была доступна обоим.Вы можете сделать это, объявив его в строке 1: 

var camera, scene, renderer, material;

Затем вы можете инициализировать material внутри init() без использования var: 

function init(imagen) {
    // ...

    material = new THREE.MeshBasicMaterial( {
        map: THREE.ImageUtils.loadTexture( imagen+'.jpg' )
    } );

    // ...
}

Как только выВы готовы позвонить cambio(), материал будет доступен по всему миру, поэтому вы можете получить к нему доступ и изменить его карту: 

function cambio(){
    material.map = THREE.ImageUtils.loadTexture( 'secondImage.jpg' );
}
...