Three.js: изменить tubularSegments на событие mousemove? - PullRequest
Новая
       38

Three.js: изменить tubularSegments на событие mousemove?

0 голосов
/ 30 марта 2019

Я сделал движущийся туннель с ТРИ. Геометрия Торуса. Теперь я хочу изменить количество трубчатых сегментов, например, когда mouseX> 1000.

Я сделал событие mousemove, но проблема в том, что я получаю только позицию mouseX с console.log в функции 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, но она не действует, если я изменяю переменную формы в функции рендеринга.

Я выполнил создание тора с различными трубчатыми сегментами друг над другом, когда я перемещаю мышь, выполнив следующее: 

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));

  }
}

Но я хочу, чтобы "новый" Торус был создан, а "старый" - удален.

Надеюсь, то, что я хочу, понятно, я новичок здесь. Спасибо за вашу помощь :)

...