gpt4 book ai didi

javascript - 如何通过 Three.js 上的按钮更改背景?

转载 作者:行者123 更新时间:2023-12-03 11:02:44 26 4
gpt4 key购买 nike

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

最佳答案

您应该能够在按钮单击监听器上使用 .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 。我确信确实如此,但目前无法对其进行测试。

关于javascript - 如何通过 Three.js 上的按钮更改背景?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28009786/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com