Question

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

P.S。我想要的功能的变化只是沿着X asis移动cos，所以它看起来像是在移动。

Answer 1

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

下面是简单更改的方法。

＆＃13;

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

＆＃13;

body{
  overflow: hidden;
  margin: 0;
}

＆＃13;

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

＆＃13;

Three.js ParametricGeometry动画（动态变化功能）

1 个答案: