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平面几何动画

回答

相关问题