Как переместить объект по случайному количеству кривых с Three.js и Tween.js - PullRequest
Новая
       80

Как переместить объект по случайному количеству кривых с Three.js и Tween.js

0 голосов
/ 05 сентября 2018

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

  1. Корабль входит в круглую форму.
  2. Круглая форма разделена на сегменты.
  3. Корабль проходит через несколько отрезков круглой формы.

Проблема, которую я имею, проходит через произвольно определенное количество сегментов, поэтому:

Дано:

  • gateIn (0-17)
  • gateOut (0-17)

Выход:

  • В значительной степени то, что вы видите в примере (с 4 по 7).
  • Плюс, проходящий через овальные сегменты. (в данном случае: main 4, rest 4, main 5, rest 5, main 6, rest 6, main 7. Легко уже доступен в массиве через функцию, которую я уже построил.)

Все включено: https://codepen.io/lubmes/pen/RYZbJY Анимация должна дать вам хорошее представление о моей проблеме.

Написано на CoffeeScript, та часть, о которой идет речь: 

tU = { value: 0 }

# Standard update tween function
updateTweenDef = (t, path, thing) ->
  lookAt = (t.value + 0.0001) % 1
  thing.position.copy(path.getPointAt(t.value))
  thing.lookAt(path.getPointAt(lookAt))

# Array with paths that the issue is about!
pathsInbetweenSegments = (gateIn, gateOut) ->
  arrayMiddleSegments = []
  for i in [gateIn..gateOut]
    console.log i
    arrayMiddleSegments.push pathsMainSegment[i]
    arrayMiddleSegments.push pathsRestSegment[i] unless i == gateOut
    arrayMiddleSegments.push "middle #{i}"
    arrayMiddleSegments.push "rest #{i}" unless i == gateOut
  arrayMiddleSegments

passingThroughOval = (gateIn, gateOut, goingFullCircle = false) ->
  shipOrig = if shipOrigx then shipOrigx.clone() else new THREE.Mesh(geometry, material)
  scene.add(shipOrig)
  gateOut = if gateIn == 17 then gateOut = 0 else gateOut 
  updateTweenEntry = -> 
  updateTweenDef(tU, pathsIn[gateIn], shipOrig)
  updateTweenIntoOval = ->
    updateTweenDef(tU, pathsInToSegment[gateIn], shipOrig)

  for path in pathsSegmentsInbetweenGates gateIn, gateOut
    # Do something. 
    # Maybe build an update tween function for every segment curve-path.

  # Irrelevant now: worked for going through a segment non-dynamic.
  updateTweenMainSegment = ->
  # updateTweenDef(tU, pathsMainSegment[gateIn], shipOrig)
  # updateTweenDef(tU, middleSegments(gateIn, gateOut), shipOrig)

  # Irrelevant now: worked for going through a single segment non-dynamic.
  # updateTweenRestSegment = ->
  #     updateTweenDef(tU, pathsRestSegment[0], shipOrig)
  # updateTweenMainSegment2 = ->
  #     updateTweenDef(tU, pathsMainSegment[1], shipOrig)

  updateTweenOutOfOval = ->
    updateTweenDef(tU, pathsOutFromSegment[gateOut], shipOrig)
  updateTweenExit = ->
    updateTweenDef(tU, pathsOut[gateOut], shipOrig)
  delay = 0
  tweenEntry = new TWEEN.Tween(tU).to({ value: 1 }, 5000).delay(delay).onUpdate( updateTweenEntry ).onComplete () ->
    tU.value = 0
   # => Dus na 5000 is een kruispunt bereikt.
   tweenIntoOval = new TWEEN.Tween(tU).to({ value: 1 }, 500).delay(delay).onUpdate( updateTweenIntoOval ).onComplete () ->
     tU.value = 0
   # THIS FUNCTION NEEDS TO BE FIXED / REPLACED
   # FOR EXAMPLE WITH: tweenInbetweenSegmentNo1, ...2, ...3
   tweenMainSegment = new TWEEN.Tween(tU).to({ value: 1 }, 1000).delay(delay).onUpdate( updateTweenMainSegment ).onComplete () ->
     tU.value = 0
   # tweenRestSegment = new TWEEN.Tween(tU).to({ value: 1 }, 1000).delay(delay).onUpdate( updateTweenRestSegment ).onComplete () ->
   #         tU.value = 0
   tweenOutOfOval = new TWEEN.Tween(tU).to({ value: 1 }, 700).delay(delay).onUpdate( updateTweenOutOfOval ).onComplete () ->
        tU.value = 0
   tweenExit = new TWEEN.Tween(tU).to({ value: .999 }, 6000).delay(delay).onUpdate( updateTweenExit ).onComplete () ->
     tU.value = 0
     scene.remove(shipOrig)
   # Aanzetten.
   # CHAINING NEEDS EXTRA TWEEN(S) !
   tweenEntry.chain(tweenIntoOval)
   tweenIntoOval.chain(tweenMainSegment)
   tweenMainSegment.chain(tweenOutOfOval)
   # tweenMainSegment.chain(tweenRestSegment)
   # tweenRestSegment.chain(tweenOutOfOval)
   tweenOutOfOval.chain(tweenExit)
   tweenExit.stop()
   tweenEntry.start()

passingThroughOval(4, 7)

Проблема в том, что у вас есть - с помощью введенного определенного числа - дополнительных кривых, которые вам нужно переместить.

Возможное решение

Я бы подумал, что несколько дополнительных подростков, как те, которые уже есть. По одному на каждый сегмент.

В связи с этим возникает вопрос: как определить эти функции update-tween-функции из моего gateIn и gateOut ввода.

Создание функций в JS (или CoffeeScript) кажется трудным.

Другое возможное решение

Сделай одну анимацию. Поворот над сегментами сплавляется в один путь .

Надеюсь, мой старт с pathsInbetweenSegments поможет. Это заполняет массив необходимыми кривыми.

Я действительно немного застрял с использованием JS для создания функций с функцией. Если так я правильно формулирую проблему.

В противном случае используйте Tween.js для перемещения по нескольким кривым, чтобы точно определить, сколько (беря их из массива pathsInbetweenSegments gateIn gateOut).

...