对象缩放问题 / scene.remove();
Trouble with object scaling / scene.remove();
我目前正在尝试在 three.js 中制作动画,出于某种原因,我在更新函数中缩放对象时遇到了问题,但我没有不透明度、位置方面的问题等。我不确定我是否只是使用了错误的命令或其他任何东西,但无论如何,
我已经尝试了多种方法,例如缩放、material.scale、geometry.scale 等。我只是很困惑我可能只是遗漏了明显的东西但是在谷歌搜索不同的解决方案并使用 scale.set(scalex, scaley, 0.000000000001) 并且只是在 if 状态中放置一个变量来循环和更新 scalex 和 scaley 之后,但是还是没有更新。
var bpm = 124;
var ring;
var ringgeometry = new THREE.BoxGeometry( 1080/10, 1080/10 , 0 );
var ringmaterial = new THREE.MeshBasicMaterial({
map: new THREE.TextureLoader().load("RING.png"),
blending: THREE.screenBlending,
transparent: true, opacity: 1
});
var clock = new THREE.Clock;
function update() {
if(clock.elapsedTime < 377){ ticker = clock.elapsedTime * (songBPM / 60);
bpm = Math.round(ticker), console.log(bpm), console.log(sect) };
clock.getDelta();
if(bpm >= 34 && bpm <= 40){
ring = new THREE.Mesh( ringgeometry, ringmaterial);
if(bpm == 34){ scene.add(ring) };
/////////////////////////////////
if(bpm >= 34 && bpm <= 40){ ringgeometry.scale.x += 0.1, ringgeometry.scale.y += 0.1 }
ring.position.set(0, 0, 0);
////////////////////////////////
if(bpm >= (32 + 1) && bpm <= (32 + 10)){ ringmaterial.opacity -= 0.01 };
}
if(bpm == 40 && bpm <= 42){ scene.remove(ring) };
}
renderer.setAnimationLoop(() => {
update();
composer.render(scene, camera);
});
function render(){ composer.render() };
此代码仅以默认比例将圆环放入场景中,不会将其从合成中移除、降低不透明度或缩放它。
我也一直不得不寻找笨拙的解决方案来从场景中删除东西,因为 scene.remove() 似乎有一半时间没有工作并且最终滞后我的场景,除非我手动设置不透明度稍后为 0。
提前致谢,如果这是一个明显的解决方案,我们深表歉意。
三个js.org/docs/index.html#api/en/core/Geometry.scale是解决方案.
if(bpm >= 33 && bpm <= (33+6)){
if(bpm == 33){ ring = new THREE.Mesh( ringgeometry, ringmaterial), scene.add(ring) };
if(bpm >= 33 && bpm < 33+9){ ringgeometry.scale(1.01,1.01,1), ringmaterial.opacity -=0.008 }
ring.position.set(0, 0, -70)};
if(bpm == (33+4)){ringgeometry.scale(-10000,-10000,1)};
犯人849的回答
我目前正在尝试在 three.js 中制作动画,出于某种原因,我在更新函数中缩放对象时遇到了问题,但我没有不透明度、位置方面的问题等。我不确定我是否只是使用了错误的命令或其他任何东西,但无论如何,
我已经尝试了多种方法,例如缩放、material.scale、geometry.scale 等。我只是很困惑我可能只是遗漏了明显的东西但是在谷歌搜索不同的解决方案并使用 scale.set(scalex, scaley, 0.000000000001) 并且只是在 if 状态中放置一个变量来循环和更新 scalex 和 scaley 之后,但是还是没有更新。
var bpm = 124;
var ring;
var ringgeometry = new THREE.BoxGeometry( 1080/10, 1080/10 , 0 );
var ringmaterial = new THREE.MeshBasicMaterial({
map: new THREE.TextureLoader().load("RING.png"),
blending: THREE.screenBlending,
transparent: true, opacity: 1
});
var clock = new THREE.Clock;
function update() {
if(clock.elapsedTime < 377){ ticker = clock.elapsedTime * (songBPM / 60);
bpm = Math.round(ticker), console.log(bpm), console.log(sect) };
clock.getDelta();
if(bpm >= 34 && bpm <= 40){
ring = new THREE.Mesh( ringgeometry, ringmaterial);
if(bpm == 34){ scene.add(ring) };
/////////////////////////////////
if(bpm >= 34 && bpm <= 40){ ringgeometry.scale.x += 0.1, ringgeometry.scale.y += 0.1 }
ring.position.set(0, 0, 0);
////////////////////////////////
if(bpm >= (32 + 1) && bpm <= (32 + 10)){ ringmaterial.opacity -= 0.01 };
}
if(bpm == 40 && bpm <= 42){ scene.remove(ring) };
}
renderer.setAnimationLoop(() => {
update();
composer.render(scene, camera);
});
function render(){ composer.render() };
此代码仅以默认比例将圆环放入场景中,不会将其从合成中移除、降低不透明度或缩放它。
我也一直不得不寻找笨拙的解决方案来从场景中删除东西,因为 scene.remove() 似乎有一半时间没有工作并且最终滞后我的场景,除非我手动设置不透明度稍后为 0。
提前致谢,如果这是一个明显的解决方案,我们深表歉意。
三个js.org/docs/index.html#api/en/core/Geometry.scale是解决方案.
if(bpm >= 33 && bpm <= (33+6)){
if(bpm == 33){ ring = new THREE.Mesh( ringgeometry, ringmaterial), scene.add(ring) };
if(bpm >= 33 && bpm < 33+9){ ringgeometry.scale(1.01,1.01,1), ringmaterial.opacity -=0.008 }
ring.position.set(0, 0, -70)};
if(bpm == (33+4)){ringgeometry.scale(-10000,-10000,1)};
犯人849的回答