如何在 three.js 中为平面上的特定点设置动画或移动?
How do you animate or move specific points on a plane in three.js?
我有一个映射到平面的纹理。假设我只想移动平面中的特定点。我该怎么做?
例如,我想以特定速度移动右下角,以特定速度移动右上角。
var camera;
var scene;
var renderer;
var mesh;
init();
animate();
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000);
var light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 0, 1, 1 ).normalize();
scene.add(light);
var geometry = new THREE.PlaneGeometry( 50, 50);
var texture = THREE.ImageUtils.loadTexture('images/03032122.png', {}, function() {
renderer.render(scene, camera);
})
var material = new THREE.MeshBasicMaterial({map: texture, transparent: true })
mesh = new THREE.Mesh(geometry, material );
mesh.position.z = -50;
scene.add( mesh );
renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor( 0xffffff, 1);
document.body.appendChild( renderer.domElement );
window.addEventListener( 'resize', onWindowResize, false );
render();
}
function animate() {
//mesh.scale.x+= 0.0003;
render();
requestAnimationFrame( animate );
}
function render() {
renderer.render( scene, camera );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
render();
}
您可以在创建网格后通过访问其顶点数组修改几何体。如果你想让等级1
的顶点在+x方向上线性移动,你可以在你的render
函数中添加:
mesh.geometry.vertices[1].x+=.01;
mesh.geometry.verticesNeedUpdate=true;
注意使用 PlaneBufferGeometry
而不是 PlaneGeometry
。
我有一个映射到平面的纹理。假设我只想移动平面中的特定点。我该怎么做?
例如,我想以特定速度移动右下角,以特定速度移动右上角。
var camera;
var scene;
var renderer;
var mesh;
init();
animate();
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000);
var light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 0, 1, 1 ).normalize();
scene.add(light);
var geometry = new THREE.PlaneGeometry( 50, 50);
var texture = THREE.ImageUtils.loadTexture('images/03032122.png', {}, function() {
renderer.render(scene, camera);
})
var material = new THREE.MeshBasicMaterial({map: texture, transparent: true })
mesh = new THREE.Mesh(geometry, material );
mesh.position.z = -50;
scene.add( mesh );
renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor( 0xffffff, 1);
document.body.appendChild( renderer.domElement );
window.addEventListener( 'resize', onWindowResize, false );
render();
}
function animate() {
//mesh.scale.x+= 0.0003;
render();
requestAnimationFrame( animate );
}
function render() {
renderer.render( scene, camera );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
render();
}
您可以在创建网格后通过访问其顶点数组修改几何体。如果你想让等级1
的顶点在+x方向上线性移动,你可以在你的render
函数中添加:
mesh.geometry.vertices[1].x+=.01;
mesh.geometry.verticesNeedUpdate=true;
注意使用 PlaneBufferGeometry
而不是 PlaneGeometry
。