时间戳

首页 > 解决方案 > threejs - 移动由单个函数的 2 次调用创建的 2 个球体

three.js - threejs - 移动由单个函数的 2 次调用创建的 2 个球体

问题描述

我是threejs的初学者，但是：我有一个功能

    function createSphere(
  sphere_name,
  radius,
  wSegments,
  hSegments,
  surface_map,
  xPos,
  yPos,
  zPos
) {
  // START ---- 

  let geometry1 = new THREE.SphereGeometry(radius, wSegments, hSegments);
  let material1 = new THREE.MeshLambertMaterial({ map: surface_map });
  center = new THREE.Mesh(geometry1, material1);
  center.position.x = xPos;
  center.position.y = yPos;
  center.position.z = zPos;

  let materialsToMap = 1;

  for (let i = 10; i < 630; i += 62.8) {
    for (let k = 70; k < 215; k += 45) {
      let j = i / 100;
      let l = k / 100;
      let geometry = new THREE.SphereGeometry(radius, 16, 16, j, 0.62, l, 0.44);
      let material = new THREE.MeshLambertMaterial({
        map: materiale[materialsToMap],
        transparent: true,
        opacity: 0.8,
      });
      mesh_felii = new THREE.Mesh(geometry, material);
      mesh_felii.position.x = center.position.x;
      mesh_felii.position.y = center.position.y;
      mesh_felii.position.z = center.position.z;
      mesh_felii.userData = linkuri[materialeDeAratat];
      mesh_felii.layers.set(1);
      scene.add(mesh_felii);
      materialeDeAratat++;
      if (materialeDeAratat >= materiale.length) materialeDeAratat = 1;
    }
  }
  //FINISH ----- aici am creat fasiile
  scene.add(center);
}

我在我的脚本中用不同的 x 坐标调用它 2 次，所以我得到了 2 个球体，它们之间有一个距离。现在我想使用滑块将其中一个球体移动到场景中的新点。所以我读取了滑块值并将其添加到 center.position.x

我如何告诉我的脚本我想移动哪个球体？我发现无法在创建的 2 个球体之间进行识别。现在它只移动我第二次调用该函数时添加的球体

标签： three.js

解决方案

据我了解，其目的是center作为包含嵌套球体层/“切片”的“父”对象。

如果是这种情况，请记住两者center并mesh_felii添加到场景中。也许目的是将每个新mesh_felii实例嵌套到center所以当center改变位置时这样做mesh_felii吗？

此外，您的函数目前不返回任何内容。你可以很容易地改变它，让它返回center。一旦你将每个新的存储center在一个单独的变量中，你应该能够独立地移动它们。

（sphere_name没有使用该参数，但这是一个小细节）

我会建议一些类似的东西：

function createSphere(
  sphere_name,
  radius,
  wSegments,
  hSegments,
  surface_map,
  xPos,
  yPos,
  zPos
) {
  // START ---- 

  let geometry1 = new THREE.SphereGeometry(radius, wSegments, hSegments);
  let material1 = new THREE.MeshLambertMaterial({ map: surface_map });
  let center = new THREE.Mesh(geometry1, material1);
  center.position.x = xPos;
  center.position.y = yPos;
  center.position.z = zPos;
  // seteaza nume (util pt. cautari)
  center.name = sphere_name;

  let materialsToMap = 1;

  for (let i = 10; i < 630; i += 62.8) {
    for (let k = 70; k < 215; k += 45) {
      let j = i / 100;
      let l = k / 100;
      let geometry = new THREE.SphereGeometry(radius, 16, 16, j, 0.62, l, 0.44);
      let material = new THREE.MeshLambertMaterial({
        map: materiale[materialsToMap],
        transparent: true,
        opacity: 0.8,
      });
      let mesh_felii = new THREE.Mesh(geometry, material);
      mesh_felii.position.x = center.position.x;
      mesh_felii.position.y = center.position.y;
      mesh_felii.position.z = center.position.z;
      mesh_felii.userData = linkuri[materialeDeAratat];
      mesh_felii.layers.set(1);
      center.add(mesh_felii);
      materialeDeAratat++;
      if (materialeDeAratat >= materiale.length) materialeDeAratat = 1;
    }
  }
  //FINISH ----- aici am creat fasiile
  scene.add(center);
  // returneaza sfera center (pivot-ul feliilor)
  return center;
}

// test
let sphere1 = createSphere("sphere1", 10, 16, 16, yourSurfaceMapInstance, 0, 0, 0);
let sphere2 = createSphere("sphere2", 10, 16, 16, yourSurfaceMapInstance, 0, 0, 0);
// move spheres
sphere1.position.x = -15;
sphere2.position.x =  15;

请记住，此函数依赖于一些全局变量，并且有一些变量似乎具有类似的功能：

  • materialsToMap用作数组索引
  • materialeDeAratat也用作数组索引，但它也被递增并重置为 1 而materialsToMap不是。

嵌套的球体结构让我想起了裁剪交集的例子。

推荐阅读