时间戳

首页 > 解决方案 > 更改按钮上的网格颜色按三个 js

javascript - 更改按钮上的网格颜色按三个 js

问题描述

当我用三个 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>

标签： javascriptthree.js

解决方案

您不会一遍又一遍地渲染，这意味着球体的颜色可能会改变，但不会显示“新”球体。将其放在代码的末尾：

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

您的其余代码应该可以正常工作。

推荐阅读