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

Question

Iam Trying To Change The Colour Of A Sphere Mesh when A Button Is Pressed with three js But Can't seem To Get It Working whenever i use mesh.material.color.SetHex() with a Click event listner it doesn't work.当我用三个 js 按下按钮时，我试图改变球体网格的颜色，但是当我将 mesh.material.color.SetHex() 与 Click 事件列表器一起使用时，它似乎无法正常工作。 However Whenever I use It Outside The Eventlistner It works Just Fine Here is My Code.但是，每当我在 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>

Answer 1

You don't render over and over, meaning that the color of your sphere might be changed, but the 'new' sphere isn't being displayed.您不会一遍又一遍地渲染，这意味着球体的颜色可能会改变，但不会显示“新”球体。 Put this at the end of you code:将其放在代码的末尾：

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

The rest of your code should work fine.您的代码的 rest 应该可以正常工作。

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-06-05 17:35:13

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-06-05 17:35:13

解决方案1
1 已采纳 2020-06-05 17:35:13