Three.js平面幾何動畫

我在做這件事，它基本上是一個非常簡單的3D「景觀」，它是我用three.js做的第一件事，所以我正在失去理智。我嘗試了許多不同的東西，但沒有任何工作，我只有一次設法使瀏覽器崩潰。這是代碼：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（）;到我的代碼的呈現部分。

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（）;到我的渲染循環。

現在，這使我的飛機「顫抖」..並隨着時間的推移變大，不知道爲什麼。這是非常接近我的想象，但現在我再次卡住..

來源

2016-03-21 Jan

@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在畫布上，並計算各種在其他頂點反應的及時處理一個頂點。

我希望這有助於= ^）

來源

2016-09-28 10:00:14 irJvV

Three.js平面幾何動畫

回答

相關問題