如何通过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替换//new image path// 。

唯一的问题是这是否也会更新网格物体上的材质。 我敢肯定，但目前尚无测试方法。

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-01-18 15:03:58

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-01-18 15:03:58

解决方案1
1 已采纳 2015-01-18 15:03:58