Javascript 更改按钮上的网格颜色按三次_Javascript_Three.js

Javascript 更改按钮上的网格颜色按三次

javascript three.js

Javascript 更改按钮上的网格颜色按三次,javascript,three.js,Javascript,Three.js,当用三个js按下按钮时，我试图更改球体网格的颜色，但每当我使用带有单击事件列表的Mesh.material.color.SetHex（）时，似乎无法使其工作。它不工作。然而，每当我在Eventlistner之外使用它时，它都可以正常工作。这是我的代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" cont

当用三个js按下按钮时，我试图更改球体网格的颜色，但每当我使用带有单击事件列表的Mesh.material.color.SetHex（）时，似乎无法使其工作。它不工作。然而，每当我在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>


文件
属性面板
反照率颜色
改变
var scene=new THREE.scene（）；
var摄像机=新的三透视摄像机（75，window.innerWidth/window.innerWidth，0.11000）；
摄像机位置z=5；
var renderer=new THREE.WebGLRenderer（{antialas:true}）；
渲染器.setClearColor（“#4b4b”）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
window.addEventListener（“调整大小”，（）=>{
renderer.setSize（window.innerWidth、window.innerHeight）；
camera.aspect=window.innerWidth/window.innerHeight；
camera.updateProjectMatrix（）；
})
var几何=新的三种。球墨法（1,20,20）；
var material=new THREE.MeshLambertMaterial（{color:0xFFCC00}）；
var mesh=新的三个网格（几何体、材质）；
场景。添加（网格）；
var btn=document.getElementById（“btn”）；
btn.addEventListener（“单击”，（）=>{
网格。材质。颜色。setHex（0xc24a4a）；}）；
var灯=新的三点灯（0xFFFFFF，1500）；
光。位置。设置（10，0，25）；
场景。添加（灯光）；
渲染器。渲染（场景、摄影机）；

您不会反复渲染，这意味着球体的颜色可能会改变，但不会显示“新”球体。在代码的末尾写上：

function render(){
  window.requestAnimationFrame(render)
  renderer.render(scene, camera)
}
render();

代码的其余部分应该可以正常工作