我试图在用三个 js 按下按钮时更改球体网格的颜色，但每当我将 mesh.material.color.SetHex() 与 Click 事件监听器一起使用时，似乎无法使其工作不工作。然而，每当我在 Eventlistner 之外使用它时，它都可以正常工作，这是我的代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="three.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="propertiesPanel">
<p>Properties Panel</p>
<p>Albedo Colour</p>
<input type="text" id="albedo">
<button id="btn">Change</button>
</div>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerWidth, 0.1, 1000);
camera.position.z = 5;
var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setClearColor("#4b4b4b");
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
window.addEventListener("resize", () => {
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
})
var geometry = new THREE.SphereGeometry(1, 20, 20);
var material = new THREE.MeshLambertMaterial({color: 0xFFCC00});
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
var btn = document.getElementById("btn");
btn.addEventListener("click", () => {
mesh.material.color.setHex( 0xc24a4a );});
var light = new THREE.PointLight(0xFFFFFF, 1, 500);
light.position.set(10, 0, 25);
scene.add(light);
renderer.render(scene, camera);
</script>
</body>
</html>
最佳答案
您不会一遍又一遍地渲染，这意味着球体的颜色可能会改变，但不会显示"new"球体。将其放在代码末尾:
function render(){
window.requestAnimationFrame(render)
renderer.render(scene, camera)
}
render();
其余代码应该可以正常工作。
关于javascript - 更改网格颜色按钮按三个 js，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62221066/