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

Question

我是 three.js 的新手，使用以下代码我想知道如何通过单击按钮更改背景。所以我认为与使用 "switch" 和 "break" 有一些不同。这是 .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// 替换为新图像的任何 URL。

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

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

How to change the background by buttons on three.js?

javascript

three.js