Javascript Three.js平面几何动画

我正在做这件事，它基本上是一个非常简单的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 );

            }
});

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

EDIT2:

我让它动起来了但离我想要的还很远

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（）；
函数updateVerts（）{
对于（变量i=0；i

添加updateVerts（）；到我的渲染循环

---

现在这让我的飞机“颤抖”。。随着时间的推移变得越来越大，不知道为什么。这与我的想象非常接近，但现在我又被卡住了

@Jan我刚才无意中问到了你的问题

我发现您在更新/刷新场景时遇到问题。但是你同时也在做很多其他的事情，所以只要坚持在画布窗口中创建一个（three.js），用一个按钮来更新只移动一个顶点的场景，然后添加所有其他的东西

$(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并及时计算其他顶点上的各种反应来操纵顶点

我希望这有帮助（^）

$(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();

});

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