Question

我用THREE.TorusGeometry制作了一条移动隧道。现在我希望它在例如mouseX> 1000。

我已经做了一个mousemove事件，但是问题是我只能通过函数render（）中的console.log获得mouseX的位置。但是，当然，我是在render函数之外定义对象。那里，mouseX是未定义的...

var mouseX;
var mouseY;
var shape = 3;
var group = new THREE.Object3D();
scene.add( group );

document.addEventListener( 'mousemove', onDocumentMouseMove);
function onDocumentMouseMove( event ) {
  mouseX = event.clientX;
  mouseY = event.clientY;
}

function createHole(x,y,z) {
      var geometry = new THREE.TorusGeometry( 20, 2, 4, shape );
      var material = new THREE.MeshPhongMaterial( { color: colour } );
      var torus = new THREE.Mesh(geometry, material);
      torus.position.x = x;
      torus.position.y = y;
      torus.position.z = z;
      torus.rotation.z = index * rotation;
      return torus;
    }

    group.add(createHole(x0,y0,z0));

  }

console.log（“ mouseX：” + mouseX）;在此处给出未定义

function render(t) {
  requestAnimationFrame( render );
console.log("mouseX: " +mouseX);
}

这里给出了mouseX的位置，但是如果我更改了render函数中的shape变量，则没有效果。

通过执行以下操作来移动鼠标时，我成功地创建了具有彼此不同的管状段的环面：

var gap = false;
var shape = 3;
var rotation = 0;

document.addEventListener( 'mousemove', onDocumentMouseMove);
function onDocumentMouseMove( event ) {
  mouseX = event.clientX;
  mouseY = event.clientY;

if (gap === false && mouseX>1000) {
  gap = 1 + Math.floor((Math.random() * 5));
  shape = 3 + Math.floor(Math.random() * 5);
  rotation = Math.random() * 0.1;
} else if ( gap > 0 ) {
  gap--;
  if (gap === 0) gap = false;
}

  if (gap === false) {
    function createHole(x,y,z) {
      var geometry = new THREE.TorusGeometry( 20, 2, 4, shape );
      var material = new THREE.MeshPhongMaterial( { color: colour } );
      var torus = new THREE.Mesh(geometry, material);
      torus.position.x = x;
      torus.position.y = y;
      torus.position.z = z;
      torus.rotation.z = index * rotation;
      return torus;
    }

    group.add(createHole(x0,y0,z0));

  }
}

但是我希望创建一个“新”圆环，并删除“旧”圆环。

我希望我想要的东西可以理解，我是新来的。感谢您的帮助：）

Three.js：在mousemove事件上更改tubularSegments吗？

0 个答案: