Three.js平面几何动画

Question

我正在研究这个问题，它基本上是3D中的一个非常简单的“风景”，这是我用three.js做的第一件事，所以我失去了理智。我尝试了很多不同的东西但没有任何作用，我曾经设法让浏览器崩溃。这是代码：

$(document).ready(function() {
var vertexHeight = 900;
var vertexHeightUpdated = 1100;
var planeDefinition = 30;
var planeSize = 25000;

var container = document.getElementById('head_threejs');
var fog = new THREE.Fog(0x000000, 1000, 17000);
var camera = new THREE.PerspectiveCamera(65, window.innerWidth / window.innerHeight,1, 20000)

camera.position.z = 5500;

var scene = new THREE.Scene();

var geometry = new THREE.PlaneGeometry(planeSize, planeSize, planeDefinition, planeDefinition);
geometry.dynamic = true;
geometry.computeFaceNormals();
geometry.computeVertexNormals();
geometry.normalsNeedUpdate = true;

var material = new THREE.MeshPhongMaterial({color: 0xffffff, specular: 0xdddddd, shininess: 30, shading: THREE.FlatShading});

var plane = new THREE.Mesh(geometry, material);
plane.rotation.x -=1;

scene.add( plane );
scene.fog = fog;

  var ambientLight = new THREE.AmbientLight(0x1a1a1a);
  scene.add( ambientLight );

  var dirLight = new THREE.DirectionalLight(0xdfe8ef, 0.10);
  dirLight.position.set(3, 5, 1);
  scene.add( dirLight );


var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild( renderer.domElement );

updatePlane();

 function updatePlane() {
   for (var i = 0; i < plane.geometry.vertices.length; i++)
   {
     plane.geometry.vertices[i].z += Math.random()*vertexHeight     -vertexHeight;
   }
 };

 function animateShit(){
   plane.geometry.vertices[1].z+=.01;
   plane.geometry.verticesNeedUpdate=true;
 }


render();

        function render() {
    requestAnimationFrame( render );

    renderer.render( scene, camera );
        }


  window.addEventListener( 'resize', onWindowResize, false );

function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();

            renderer.setSize( window.innerWidth, window.innerHeight );

            }
});

所以...我的上一次动画尝试有一点遗留（我只是想看看它是否会以某种方式发生变化），更像是最后一次 - sigh-kill-me的事情。我甚至为three.js尝试了一个补间库，但我没弄清楚如何在这种情况下使用它。

我想做的是，让平面顶点（或顶点？）“随机”上下移动，创造“景观”的“呼吸”效果。希望这是可以理解的。

我真的很欣赏至少在正确方向上的推动，我想我只是以错误的方式思考它，或者我现在的代码中可能还有其他一些问题。

编辑：澄清我尝试的最后一件事：

我尝试使用tween.js库并添加这样的东西

var vertexHeightUpdate = 1100;
var tween = new TWEEN.Tween(vertexHeight).to(vertexHeightUpdate, 5000);

tween.onUpdate(function(){
vertexHeight = vertexHeightUpdate;
});

tween.start();

然后添加tween.update（）;到我的代码的渲染段。

Aaditi：

我明白了！但它仍然远离我想要的..

updateVerts();

function updateVerts() {
for (var i = 0; i < plane.geometry.vertices.length; i++)
{
 plane.geometry.vertices[i].z += Math.random()*planeDefinition -(planeDefinition/2);
}
plane.geometry.verticesNeedUpdate = true;
};

并添加updateVerts（）;到我的渲染循环。

现在这让我的飞机“颤抖”......随着时间的推移变大，不知道为什么。它非常接近我的想象，但现在我再次卡住..

Answer 1

@Jan我只是偶然发现了你的问题。

我发现您在更新/刷新场景时遇到问题。但是你同时做了很多其他的事情，所以只需坚持在画布窗口中创建一个PlaneGeometry（three.js），其中一个按钮可以更新仅移动1个顶点的场景，并在以后添加所有其他内容。

$(document).ready(function() {
  console.log("START");

  function render() {
      requestAnimationFrame( render );
      renderer.render( scene, camera );
  }

  function refresh() {
    console.log("refresh");
    plane.geometry.vertices[0].z =  50;
    plane.geometry.verticesNeedUpdate = true;
  }

  var w = 600;
  var h = 400;

  var button = document.createElement("input");
  button.type = "button";
  button.value = "REFRESH SCENE";
  button.onclick = function(){refresh()};
  document.body.appendChild(button);

  var scene = new THREE.Scene();
  var camera = new THREE.PerspectiveCamera( 45, w / h, 0.1, 1000 );

  var renderer = new THREE.WebGLRenderer();
  renderer.setSize( w, h );
  document.body.appendChild( renderer.domElement );

  var geometry = new THREE.PlaneGeometry( 300, 168, 300 , 168 );
  var material = new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.DoubleSide} );
  var plane = new THREE.Mesh( geometry, material );
  scene.add( plane );

  camera.position.set(200,200,200);
  camera.up = new THREE.Vector3(0,0,1);
  camera.lookAt(new THREE.Vector3(50,0,0));
  scene.add( camera );

  render();

});

这将创建一个带有黄色PlaneGeometry的按钮和画布窗口。如果单击按钮，plane.geometry.vertices[0]将移动到z位置50（从0开始）并在画布窗口中更新/刷新。 （PlaneGeometry的最右角）

从这里开始，操作所有顶点只是一个小步骤。 （并通过使用漂亮的算法及时变换飞机来创造真实的呼吸感，而不仅仅是随机摇动它）。

附：

var ray = new THREE.Ray(camera.position, vector.subSelf(camera.position).normalize()),intersects    = ray.intersectObject(plane);

您还可以通过单击画布上的PlaneGeometry并及时计算其他顶点上的各种反应来操纵顶点。

我希望这有帮助= ^）