圣诞树动画

Question

pepel_xD

Asked:2020-07-11 16:12:57 +0000 UTC2020-07-11 16:12:57 +0000 UTC 2020-07-11 16:12:57 +0000 UTC

重新计算对象顶点坐标

772

根据答案
中的示例代码，我对代码进行了一些实验，我将点分散在屏幕上

textGeo.vertices.forEach(function (vertex) {
    vertex.x = THREE.Math.randFloat(-20, 20)//.copy(vertex.startPoint).addScaledVector(vertex.direction, 5 + Math.sin(Date.now() * 0.001) * 5);
    vertex.y = THREE.Math.randFloat(-20, 20)//.copy(vertex.startPoint).addScaledVector(vertex.direction, 5 + Math.sin(Date.now() * 0.001) * 5);
    vertex.z = THREE.Math.randFloat(-10, 10)//.copy(vertex.startPoint).addScaledVector(vertex.direction, 5 + Math.sin(Date.now() * 0.001) * 5);
  });

添加了几个功能并更改了渲染功能

function setPosition(vertex, curent, orign, step) {
  let curentPoint = Math.round(curent * 10) / 10;
  let orignPoint = Math.round(orign * 10) / 10;
  if (curentPoint !== orignPoint) {
    curent = orign < curent ? curent - step : curent + step;
  } else {
    curent = orign;
    vertex.complate = true;
  }
  return curent;
}

function isComplated(vertices) {
  let result = true;
  vertices.forEach(function(vertex, i) {
    if(!vertex.complate) {
      result = false;
    }
  });
  return result;
}

function render() {
  let animationId = requestAnimationFrame(render);
  if (!isComplated(textGeo.vertices)) {
    textGeo.vertices.forEach(function (vertex) {
      vertex.x = setPosition(vertex, vertex.x, vertex.startPoint.x, 0.1);
      vertex.y = setPosition(vertex, vertex.y, vertex.startPoint.y, 0.1);
      vertex.z = setPosition(vertex, vertex.z, vertex.startPoint.z, 0.1);
    });
  } else {
    cancelAnimationFrame(animationId);
  }

  textGeo.verticesNeedUpdate = true;
  renderer.render(scene, camera);
}

思路如下：
将点分散在屏幕周围，然后开始将它们返回到原来的位置，当所有点都回到初始位置时，通过停止 AnimationFrame 来完成动画。但问题是 cancelAnimationFrame(animationId) 在所有点都回到原位之前被调用。

工作示例：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 10, 20);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// var controls = new OrbitControls(camera, renderer.domElement);
camera.lookAt(scene.position);

var light = new THREE.DirectionalLight(0xffffff, 2);
light.position.setScalar(100);
scene.add(light);

var textGeo = null;
var textPoints = null;
var loader = new THREE.FontLoader();
loader.load('https://threejs.org/examples/fonts/droid/droid_serif_bold.typeface.json', function (response) {
  var font = response;
  setText(font);
  render();
});

function setText(font) {
  textGeo = new THREE.TextGeometry('ABC', {
    font: font,
    size: 4,
    height: 0.5,
    curveSegments: 4,
    bevelEnabled: false,
    bevelSize: 10,
    bevelThickness: 50
  });
  textGeo.computeBoundingBox();
  textGeo.computeVertexNormals();
  textGeo.center();

  fillWithPoints(textGeo, 10);

  textGeo.vertices.forEach(function (vertex) {
    vertex.startPoint = vertex.clone();
    vertex.direction = vertex.clone().normalize();
  })

  textGeo.vertices.forEach(function (vertex) {
    vertex.x = THREE.Math.randFloat(-20, 20)//.copy(vertex.startPoint).addScaledVector(vertex.direction, 5 + Math.sin(Date.now() * 0.001) * 5);
    vertex.y = THREE.Math.randFloat(-20, 20)//.copy(vertex.startPoint).addScaledVector(vertex.direction, 5 + Math.sin(Date.now() * 0.001) * 5);
    vertex.z = THREE.Math.randFloat(-10, 10)//.copy(vertex.startPoint).addScaledVector(vertex.direction, 5 + Math.sin(Date.now() * 0.001) * 5);
  });
  window.p = textGeo.vertices[0]
  //console.log(textGeo.vertices[0]);

  //textGeo.verticesNeedUpdate = true;

  //textGeo.applyMatrix( new THREE.Matrix4().makeTranslation( 1, 1, 1 ) );

  textPoints = new THREE.Points(textGeo, new THREE.PointsMaterial({
    color: 0xf00008,
    size: 0.1
  }));
  scene.add(textPoints);
}

function fillWithPoints(geometry, pointNumber) {
  geometry.computeBoundingBox();
  for (var i = 0; i < pointNumber; i++) {
    setRandomPoint(geometry);
  }
}

function setRandomPoint(geometry) {
  var point = new THREE.Vector3(
    THREE.Math.randFloat(geometry.boundingBox.min.x, geometry.boundingBox.max.x),
    THREE.Math.randFloat(geometry.boundingBox.min.y, geometry.boundingBox.max.y),
    THREE.Math.randFloat(geometry.boundingBox.min.z, geometry.boundingBox.max.z)
  );
  //console.log(point);
  if (isPointInside(point, geometry)) {
    geometry.vertices.push(point);
  } else {
    setRandomPoint(geometry);
  }
}

var a = new THREE.Vector3();
var b = new THREE.Vector3();
var c = new THREE.Vector3();
var face = new THREE.Face3();

function isPointInside(point, geometry) {
  var retVal = false;
  for (var i = 0; i < geometry.faces.length; i++) {
    face = geometry.faces[i];
    a = geometry.vertices[face.a];
    b = geometry.vertices[face.b];
    c = geometry.vertices[face.c];
    //console.log(face, a, b, c);
    if (ptInTriangle(point, a, b, c)) {
      var retVal = true;
      break;
    }
  }
  return retVal;
}

function ptInTriangle(p, p0, p1, p2) {
  // credits: http://jsfiddle.net/PerroAZUL/zdaY8/1/
  var A = 1 / 2 * (-p1.y * p2.x + p0.y * (-p1.x + p2.x) + p0.x * (p1.y - p2.y) + p1.x * p2.y);
  var sign = A < 0 ? -1 : 1;
  var s = (p0.y * p2.x - p0.x * p2.y + (p2.y - p0.y) * p.x + (p0.x - p2.x) * p.y) * sign;
  var t = (p0.x * p1.y - p0.y * p1.x + (p0.y - p1.y) * p.x + (p1.x - p0.x) * p.y) * sign;

  return s > 0 && t > 0 && (s + t) < 2 * A * sign;
}

function setPosition(vertex, curent, orign, step) {
  let curentPoint = Math.round(curent * 10) / 10;
  let orignPoint = Math.round(orign * 10) / 10;
  if (curentPoint !== orignPoint) {
    curent = orign < curent ? curent - step : curent + step;
  } else {
    curent = orign;
    vertex.complate = true;
  }
  return curent;
}

function isComplated(vertices) {
  let result = true;
  vertices.forEach(function(vertex, i) {
    if(!vertex.complate) {
      result = false;
    }
  });
  return result;
}
function render() {
  let animationId = requestAnimationFrame(render);
  if (!isComplated(textGeo.vertices)) {
    textGeo.vertices.forEach(function (vertex) {
      vertex.x = setPosition(vertex, vertex.x, vertex.startPoint.x, 0.1);
      vertex.y = setPosition(vertex, vertex.y, vertex.startPoint.y, 0.1);
      vertex.z = setPosition(vertex, vertex.z, vertex.startPoint.z, 0.1);
    });
  } else {
    cancelAnimationFrame(animationId);
  }
  
  textGeo.verticesNeedUpdate = true;
  
  /* complated = isComplated(textGeo.vertices);
  if (complated) {
    //console.log(complated);
    cancelAnimationFrame(animationId);
    console.log('end')
  } */
  

  renderer.render(scene, camera);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/94/three.min.js"></script>

我走对了吗？还是这些事情做的不同？

1 个回答

Voted

prisoner849 · Answer 1 · 2020-07-11T17:49:23Z

点的随机位置已知，点的最终位置已知，它们之间的距离已知，速度已知。我们可以通过将所有距离中的最大值除以速度来找到动画时间，一旦当前动画时间大于或等于计算出的时间，我们就执行一些动作。

此外，还有一种方法.clampLength()可以简化生活，并且不允许增量向量的长度超出指定的限制：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(2, 3, 5);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

var tempDist = new THREE.Vector3();
var boxGeom = new THREE.BoxGeometry(2, 2, 2, 10, 10, 10);
boxGeom.vertices.forEach(v => {
  v.init = v.clone();
  v.random = new THREE.Vector3(THREE.Math.randFloatSpread(10), THREE.Math.randFloatSpread(10), THREE.Math.randFloatSpread(5));
  v.dir = new THREE.Vector3().copy(v.init).sub(v.random).normalize();
  v.dist = tempDist.copy(v.init).sub(v.random).length();
  v.copy(v.random);
});

var boxMat = new THREE.PointsMaterial({
  size: 0.1,
  color: "red"
});

var box = new THREE.Points(boxGeom, boxMat);
scene.add(box);

var speed = 2; // единиц в секунду
var longestDist = 0;
boxGeom.vertices.forEach(v => {
  longestDist = Math.max(longestDist, v.dist);
});
var fullTime = longestDist / speed; // продолжительность анимации определяется по самой длинной дистанции, так как скорость постоянная
console.log({
  fullTime
});

var clock = new THREE.Clock();
var delta = 0;
var globalTime = 0;
var clampedDirLength = new THREE.Vector3();

render();

function render() {
  let req = requestAnimationFrame(render);
  delta = clock.getDelta();
  globalTime += delta;

  boxGeom.vertices.forEach(v => {
    clampedDirLength.copy(v.dir).multiplyScalar(globalTime * speed).clampLength(0, v.dist); // clamp the length!
    v.copy(v.random).add(clampedDirLength);
  });
  boxGeom.verticesNeedUpdate = true;
  if (globalTime >= fullTime) { // если текущая продолжительность больше или равна заданной, то останавливаем цикл прорисовки или делаем что-то другое
    //cancelAnimationFrame(req);
    boxMat.color.set("aqua");
  }
  renderer.render(scene, camera);
}

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/94/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

参考

重新计算对象顶点坐标

是否可以在 C++ 中继承类 <---> 结构？

这种神经网络架构适合文本分类吗？

为什么分配的工作方式不同？

控制台中的光标坐标

如何在 C++ 中删除类的实例？

点是否属于线段的问题

json结构错误

ServiceWorker 中的“获取”事件

c ++控制台应用程序exe文件[重复]

按多列从sql表中选择

重新计算对象顶点坐标

1 个回答

相关问题