Question

this is what i want to do。一旦您单击该框，我想出现第二个框，当我单击第二个框时，我希望第一个立方体的颜色发生变化。我设法进行了第一步，但我不知道如何执行最后一步，单击第二个多维数据集，然后更改原始颜色。这是我的代码...

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Document</title>
        <link rel="stylesheet" href="css/main.css" />
      </head>
      <body>
        <script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>
        <script>
          var camera, scene, renderer;
          var geometry, material, mesh;

          init();
          animate();

          function init() {
            camera = new THREE.PerspectiveCamera(
              75,
              window.innerWidth / window.innerHeight,
              0.01,
              1000
            );
            camera.position.z = 2;

            scene = new THREE.Scene();

            geometry = new THREE.BoxGeometry(0.5, 0.5, 0.5);
            material = new THREE.MeshLambertMaterial({ color: 0x2c9b73 });

            mesh = new THREE.Mesh(geometry, material);
            mesh.rotation.set(45, 0, 0);
            scene.add(mesh);

            var light = new THREE.PointLight(0xffffff, 1, 100);
            light.position.set(10, 10, 10);
            scene.add(light);

            renderer = new THREE.WebGLRenderer({ antialias: true });
            renderer.setClearColor("#e5e5e5");
            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 raycaster = new THREE.Raycaster();
          var mouse = new THREE.Vector2();
          function onMouseMove(event) {
            event.preventDefault();
            mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
            mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

            raycaster.setFromCamera(mouse, camera);
            var intersects = raycaster.intersectObjects(scene.children, true);
            for (var i = 0; i < intersects.length; i++) {
              var geometry1 = new THREE.BoxGeometry(0.5, 0.5, 0.5);
              var material1 = new THREE.MeshLambertMaterial({ color: 0xce2121 });
              var mesh1 = new THREE.Mesh(geometry1, material1);
              mesh1.position.y = 1;
              scene.add(mesh1);
            }
          }

          function animate() {
            requestAnimationFrame(animate);

            mesh.rotation.x += 0.01;
            //mesh.rotation.y += 0.02;

            renderer.render(scene, camera);
          }

          window.addEventListener("click", onMouseMove);
        </script>
      </body>
    </html>

Answer 1

首先，您可以命名网格物体。

可以说，我们可以将其命名为rotatingMesh和staticMesh。需要命名才能跟踪在哪个3d obj click事件上执行。

现在，如果我单击第二个多维数据集，该颜色将变为黄色，因此您还必须侦听第二个对象的单击（如下所示）

for (var i = 0; i < intersects.length; i++) {
  if(intersects[i].object.name === 'staticMesh') {
      // Set rotating mesh color to yellow
      mesh.material.color = new THREE.Color(1,1,0)
  } else {
    var geometry1 = new THREE.BoxGeometry(0.5, 0.5, 0.5);
    var material1 = new THREE.MeshLambertMaterial({ color: 0xce2121 });
    var mesh1 = new THREE.Mesh(geometry1, material1);
    mesh1.name = 'staticMesh'
    mesh1.position.y = 1;
    scene.add(mesh1);
  }
}

在下面的代码片段中显示了用例。如果您还有其他疑问，请告诉我

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Document</title>
        <link rel="stylesheet" href="css/main.css" />
      </head>
      <body>
        <script src="https://cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>
        <script>
          var camera, scene, renderer;
          var geometry, material, mesh;

          init();
          animate();

          function init() {
            camera = new THREE.PerspectiveCamera(
              75,
              window.innerWidth / window.innerHeight,
              0.01,
              1000
            );
            camera.position.z = 2;

            scene = new THREE.Scene();

            geometry = new THREE.BoxGeometry(0.5, 0.5, 0.5);
            material = new THREE.MeshLambertMaterial({ color: 0x2c9b73 });

            mesh = new THREE.Mesh(geometry, material);
            mesh.name = 'rotatingMesh'
            mesh.rotation.set(45, 0, 0);
            scene.add(mesh);

            var light = new THREE.PointLight(0xffffff, 1, 100);
            light.position.set(10, 10, 10);
            scene.add(light);

            renderer = new THREE.WebGLRenderer({ antialias: true });
            renderer.setClearColor("#e5e5e5");
            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 raycaster = new THREE.Raycaster();
          var mouse = new THREE.Vector2();
          function onMouseMove(event) {
            event.preventDefault();
            mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
            mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

            raycaster.setFromCamera(mouse, camera);
            var intersects = raycaster.intersectObjects(scene.children, true);

            for (var i = 0; i < intersects.length; i++) {
              if(intersects[i].object.name === 'staticMesh') {
                  // Set rotating mesh color to yellow
                  mesh.material.color = new THREE.Color(1,1,0)
              } else {
                var geometry1 = new THREE.BoxGeometry(0.5, 0.5, 0.5);
                var material1 = new THREE.MeshLambertMaterial({ color: 0xce2121 });
                var mesh1 = new THREE.Mesh(geometry1, material1);
                mesh1.name = 'staticMesh'
                mesh1.position.y = 1;
                scene.add(mesh1);
              }
            }
          }

          function animate() {
            requestAnimationFrame(animate);

            mesh.rotation.x += 0.01;
            //mesh.rotation.y += 0.02;

            renderer.render(scene, camera);
          }

          window.addEventListener("click", onMouseMove);
        </script>
      </body>
    </html>

THREE.js-可单击的交互式对象。单击一个多维数据集，然后出现第二个多维数据集，我想使最后一个多维数据集可单击

1 个答案: