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

            }
});

所以..我上次动画尝试留下了一些剩余的东西(我只是想看看它是否以某种方式改变)，更像是最后的手段-叹息-杀死我的事情。我什至尝试了 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();到我的代码的渲染段。

编辑2:

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

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 (三.js)在 Canvas 窗口中，带有一个按钮，用于更新场景仅移动 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 的 Canvas 窗口。如果单击按钮，plane.geometry.vertices[0] 将移动到 z 位置 50(从 0)，并在 Canvas 窗口中更新/刷新。 (PlaneGeometry 的最右上角)

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

与:

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

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

我希望这有帮助=^)