三.js参数化几何动画(动态变化功能)

Question

我对计算机图形学真的很陌生，我开始尝试用THREE.js做一些事情。所以我想制作旗帜（波浪运动）的动画，但我找不到任何东西（也许我不知道要搜索什么）。所以我用参数化几何制作了我的标志，函数只是一个 cos。而且我不想通过动态更改参数化几何体的功能来为标志设置动画。我该怎么做，这是正确的方法吗？

附言我想要的功能的变化只是沿着 X asis 移动 cos，所以看起来标志正在移动。

Answer 1

根据网格中的顶点数量，您可以使用着色器或通过cos函数在动画循环中简单更改顶点。

下面，是简单更改的方法。

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.set( 0, 2, 10 );
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 );
scene.add( new THREE.GridHelper( 10, 10 ) );
var planeGeom = new THREE.PlaneGeometry( 10, 3, 20, 3 );
var plane = new THREE.Mesh( planeGeom, new THREE.MeshBasicMaterial( { color: "red", side: THREE.DoubleSide } ) );
scene.add( plane );
render();
function render(){
  requestAnimationFrame( render );
  planeGeom.vertices.forEach( v => {
    v.z = Math.cos( .5 * v.x - Date.now() * .001 ) * .5;
  });
  planeGeom.verticesNeedUpdate = true; // the most important thing, when you change vertices
  renderer.render( scene, camera );
}

body{
  overflow: hidden;
  margin: 0;
}

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>