Three.js Plane Geometryアニメーション

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用のトゥイーンライブラリを試してみましたが、このシナリオでどのように使用するのか分かりませんでした。

私がしたいのは、飛行機の頂点（または頂点）を「ランダム」に上下に移動させて、「風景」の「呼吸」効果を作り出すことです。うまくいけばそれは理解できる。

IDは本当に正しい方向のナッジを本当に感謝しています。私はちょうど間違った方法でそれについて考えるか、おそらく私の現在のコードにいくつかの他の問題があると思います。

EDIT： 私が試した最後のものだったかを明確にする：

私は（tween.jsライブラリを使用して、この

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

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

tween.start(); 

のようなものを追加し、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を追加（）;私のレンダーループに。

これで私の飛行機は "震える"ようになりました。それは私が想像しているものに非常に近いですが、今度は再びついたImです。

Answer 1

@Jan私はちょうどあなたの質問につまずいた。

シーンを更新/リフレッシュする際に問題が発生しています。しかし、あなたは同時に多くのことをしているので、カンバスウィンドウにPlaneGeometry（3つの.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をクリックすると、時間に他の頂点での反応のすべての種類を計算することによって、頂点を操作することができます。

私はこれが助けてくれることを願っています^^