时间戳

首页 > 解决方案 > 动态更改图片 360

javascript - 动态更改图片 360

问题描述

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

我需要将图像更改为先前选择的图像

我试过这篇文章但没有成功

Threejs在运行时更改图像

标签： javascriptthree.jshtml5-canvas

解决方案

您需要使变量全局可访问，而不是将其范围限制为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' );
}

推荐阅读