I am still new to Three.js and WebGL but I want to get better at it. Could you please check my code having found a solution to a fairly simple problem that I set for myself.
我还是Three.js和WebGL的新手,但我想要做得更好。你可以检查我的代码找到了解决我为自己设置的一个相当简单的问题。
SIMPLE PROBLEM (that took too long to solve): How can I animate a simple 400 x 400 PLANE MESH from y position 500 (below browser window) to x,y,z position 0 (centre of the browser window) - WITHOUT using Tween.js? I know Tween.js for Three.js is very efficient for simple movements but I wanted to find a solution that involves learning. Use Tween.js and I don't learn anything. And yes, I did hours of research looking at various solutions on * and on Mr Doob's code repository on GitHub. After very extensive searching, I couldn't find a solution that gave me exactly what I wanted, namley: A simple vertical upward animation STARTING out of frame AND STOPPING in the centre of the browser window.
简单的问题(需要很长时间才能解决):我如何在y位置500(浏览器窗口下方)到x,y,z位置0(浏览器窗口的中心)设置一个简单的400 x 400平面网格动画 - 无需使用Tween .js文件?我知道Three.js的Tween.js对于简单的动作非常有效,但我想找到一个涉及学习的解决方案。使用Tween.js,我什么都没学到。是的,我花了几个小时研究*上的各种解决方案以及GitHub上的Doob先生的代码库。经过非常广泛的搜索,我找不到一个能让我完全满足我想要的解决方案,namley:一个简单的垂直向上动画,在浏览器窗口的中心开始跳帧并停止。
MY SOLUTION:
`function animate() {
var newPos = plane.position.y;
plane.translateY( 4 );
function stopHere () {
if (newPos >= 0)
{
plane.position.set( 0, 0, 0);
var stopPlane = plane.position.y = 0;
}
}
requestAnimationFrame(stopHere);
}
function render() {
renderer.render(scene, camera);
animate();
}`
I've posted just the two functions that do all the work. Does anyone see bad practice there? My logic is that
我发布了完成所有工作的两个函数。有人看到不好的做法吗?我的逻辑就是这样
requestAnimationFrame
cannot be in the render(); function, as it needs to be within the scope of the nested function ('stopHere') within
不能在render()中;函数,因为它需要在嵌套函数('stopHere')的范围内
`animate();`
I ran into difficulty approaching it from this direction:
我从这个方向遇到困难时遇到了困难:
`objMesh.geometry.applyMatrix( new THREE.Matrix4().makeTranslation( 1, 0.1, 0.1 ) ); `
After wrestling with something simple for over a week, I just know it works. To my understanding, I have used a method of the applyMatrix sub-class and made it work. I'm asking for comments because I want to learn Three.js, not bad habits. Please, does anyone see bad practice or bad coding? Many thanks.
经过一周多的简单摔跤,我知道它有效。根据我的理解,我使用了applyMatrix子类的方法并使其工作。我要求评论,因为我想学习Three.js,而不是坏习惯。请问,是否有人看到不良做法或编码错误?非常感谢。
ksqInFlight
1 个解决方案
#1
0
I am a senior citizen, so my approach is, in your requestAnimationFrame loop:
我是老年人,所以我的方法是,在你的requestAnimationFrame循环中:
function fnloop() {
var dy = Math.min(Math.abs(plane.position.y), .01); // max movement
if (Math.abs(dy) >= .000001) {
if (plane.position.y > 0) dy = -dy; // move down if above
plane.position.y += dy; // move up or down
if (Math.abs(plane.position.y) < .000001) alert("Done!");
}
renderer.render(scene, camera);
requestAnimationFrame(fnloop);
}
#1
0
I am a senior citizen, so my approach is, in your requestAnimationFrame loop:
我是老年人,所以我的方法是,在你的requestAnimationFrame循环中:
function fnloop() {
var dy = Math.min(Math.abs(plane.position.y), .01); // max movement
if (Math.abs(dy) >= .000001) {
if (plane.position.y > 0) dy = -dy; // move down if above
plane.position.y += dy; // move up or down
if (Math.abs(plane.position.y) < .000001) alert("Done!");
}
renderer.render(scene, camera);
requestAnimationFrame(fnloop);
}