Question

我是three.js中的新手并使用以下代码我想知道如何通过单击按钮来更改背景。所以我认为有一些不同于使用＆＃34; switch＆＃34;并且＆＃34;打破＆＃34;。这是.loadTexture的东西我是对的吗？

<html lang="en">
    <head>
        <title>gyroscopic</title>
        <meta charset="utf-8">
        <meta name="viewport" content="user-scalable=no, initial-scale=1">
        <style>
            body {
                margin: 0px;
                background-color: #000000;
                overflow: hidden;
            }
        </style>
    </head>
    <body>

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

        <script src="three.min.js"></script>
        <script src="DeviceOrientationControls.js"></script>

        <script>
            (function() {
                  "use strict"

                  window.addEventListener('load', function() {

                        var container, camera, scene, renderer, controls, geometry, mesh;

                        var animate = function(){

                            window.requestAnimationFrame( animate );

                            controls.update();
                            renderer.render(scene, camera);

                        };

                        container = document.getElementById( 'container' );

                        camera = new THREE.PerspectiveCamera(80, window.innerWidth / window.innerHeight, 1, 1100);

                        controls = new THREE.DeviceOrientationControls( camera );

                        scene = new THREE.Scene();

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

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

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

                        var geometry = new THREE.BoxGeometry( 100, 100, 100, 4, 4, 4 );
                        var mesh = new THREE.Mesh( geometry, material );
                        scene.add( mesh );

                        renderer = new THREE.WebGLRenderer();
                        renderer.setSize(window.innerWidth, window.innerHeight);
                        renderer.domElement.style.position = 'absolute';
                        renderer.domElement.style.top = 0;
                        container.appendChild(renderer.domElement);

                        window.addEventListener('resize', function() {

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

                        }, false);

                        animate();

                  }, false);

            })();
        </script>

    </body>
</html>

Answer 1

您应该能够在按钮单击侦听器上使用.loadTexture更改纹理。

所以你可能会在你的HTML中添加这样的内容：

<button id="change-background">Change Background</button>

然后在Javascript中：

var backgroundButton = document.getElementById('change-background');

backgroundButton.addEventListener('click', function(){
   material.map = THREE.ImageUtils.loadTexture('//new image path//');
});

您显然需要使用新图片的任何网址替换//new image path//。

唯一的问题是这是否也会更新网格上的材质。我确信它确实如此，但目前无法对其进行测试。

如何通过three.js上的按钮更改背景？

1 个答案: