如何通过三个.js上的按钮更改背景

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

本文关键字：按钮背景 js 三个何通过更新时间：2023-09-26

我是三个新手.js使用以下代码我想知道如何通过单击按钮来更改背景。所以我认为与使用"开关"和"中断"有些不同。这是我对的.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>

您应该能够在按钮单击侦听器上使用 .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。

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