两个 Three-JS 对象如何在同一页面同时运行和动画？

Question

我无法弄清楚为什么通过添加第二个对象，第一个对象会停止动画并且不再运行？我如何才能弄清楚为什么我的对象会相互抵消，以及如何创建两个不同或多个同时动画的threejs项目？ 我想在某个文件中运行多于三个.js 脚本。有人可以帮助我吗？ 谢谢

    //firt object

var scene2 = new THREE.Scene();
document.addEventListener( 'mousemove', onMouseMove, false );
var camera2 = new THREE.PerspectiveCamera( 40, window.innerWidth/window.innerHeight, 0.1, 1000 );
var mouseX;
var mouseY;

var renderer2 = new THREE.WebGLRenderer();
renderer2.setSize( window.innerWidth, window.innerHeight );
renderer2.autoClear = false;
document.body.appendChild( renderer2.domElement );

window.addEventListener("resize", function() {
  camera2.aspect = window.innerWidth / window.innerHeight;
  camera2.updateProjectionMatrix();
  renderer2.setSize( window.innerWidth, window.innerHeight );
});

var distance = Math.min(200, window.innerWidth / 4);
var geometry = new THREE.Geometry();

for (var i = 0; i < 1000; i++) {

  var vertex = new THREE.Vector3();

  var theta = THREE.Math.randFloatSpread(360); 
  var phi = THREE.Math.randFloatSpread(360); 

  vertex.x = distance * Math.sin(theta) * Math.cos(phi);
  vertex.y = distance * Math.sin(theta) * Math.sin(phi);
  vertex.z = distance * Math.cos(theta);

  geometry.vertices.push(vertex);
}
var particles = new THREE.Points(geometry, new THREE.PointsMaterial({color: 0xFFFF00, size: 2}));
particles.boundingSphere = 50;


var renderingParent = new THREE.Group();
renderingParent.add(particles);

var resizeContainer = new THREE.Group();
resizeContainer.add(renderingParent);
scene2.add(resizeContainer);

camera2.position.z = 400;

var animate = function () {
  requestAnimationFrame( animate );
  renderer2.render( scene2, camera2 );
};
var myTween;
function onMouseMove(event) {
  if(myTween)
    myTween.kill();
  
  mouseX = ( event.clientX / window.innerWidth ) * 2 - 1;
  mouseY = - ( event.clientY / window.innerHeight ) * 2 + 1;
  myTween = gsap.to(particles.rotation, {duration: 0.1, x: mouseY*-1, y: mouseX});
  //particles.rotation.x = mouseY*-1;
  //particles.rotation.y = mouseX;
}
animate();

// Scaling animation
var animProps = {scale: 0.5, xRot: 0, yRot: 0};
gsap.to(animProps, {duration: 20, scale: 1.5, repeat: -1, yoyo: true, ease: "sine", onUpdate: function() {
  renderingParent.scale.set(animProps.scale,animProps.scale,animProps.scale);
}});

gsap.to(animProps, {duration: 120, xRot: Math.PI * 2, yRot: Math.PI * 4, repeat: -1, yoyo: true, ease: "none", onUpdate: function() {
  renderingParent.rotation.set(animProps.xRot,animProps.yRot,0);
}});

'''

//second object
<script>
    var scene = new THREE.Scene();
    document.addEventListener( 'mousemove', onMouseMove, false );
    var camera = new THREE.PerspectiveCamera( 40, window.innerWidth/window.innerHeight, 0.1, 1000 );
    var mouseX;
    var mouseY;
    
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    renderer.autoClear = false;
    document.body.appendChild( renderer.domElement );
    
    window.addEventListener("resize", function() {
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
      renderer.setSize( window.innerWidth, window.innerHeight );
    });
    
    var distance = Math.min(200, window.innerWidth / 4);
    var geometry = new THREE.Geometry();
    
    for (var i = 0; i < 1000; i++) {
    
      var vertex = new THREE.Vector3();
    
      var theta = THREE.Math.randFloatSpread(360); 
      var phi = THREE.Math.randFloatSpread(360); 
    
      vertex.x = distance * Math.sin(theta) * Math.cos(phi);
      vertex.y = distance * Math.sin(theta) * Math.sin(phi);
      vertex.z = distance * Math.cos(theta);
    
      geometry.vertices.push(vertex);
    }
    var particles = new THREE.Points(geometry, new THREE.PointsMaterial({color: 0xFFFF00, size: 2}));
    particles.boundingSphere = 50;
    
    
    var renderingParent = new THREE.Group();
    renderingParent.add(particles);
    
    var resizeContainer = new THREE.Group();
    resizeContainer.add(renderingParent);
    scene.add(resizeContainer);
    
    camera.position.z = 400;
    
    var animate = function () {
      requestAnimationFrame( animate );
      renderer.render( scene, camera );
    };
    var myTween;
    function onMouseMove(event) {
      if(myTween)
        myTween.kill();
      
      mouseX = ( event.clientX / window.innerWidth ) * 2 - 1;
      mouseY = - ( event.clientY / window.innerHeight ) * 2 + 1;
      myTween = gsap.to(particles.rotation, {duration: 0.1, x: mouseY*-1, y: mouseX});
      //particles.rotation.x = mouseY*-1;
      //particles.rotation.y = mouseX;
    }
    animate();
    
    // Scaling animation
    var animProps = {scale: 0.5, xRot: 0, yRot: 0};
    gsap.to(animProps, {duration: 20, scale: 1.5, repeat: -1, yoyo: true, ease: "sine", onUpdate: function() {
      renderingParent.scale.set(animProps.scale,animProps.scale,animProps.scale);
    }});
    
    gsap.to(animProps, {duration: 120, xRot: Math.PI * 2, yRot: Math.PI * 4, repeat: -1, yoyo: true, ease: "none", onUpdate: function() {
      renderingParent.rotation.set(animProps.xRot,animProps.yRot,0);
    }});
    
    </script>

'''

Answer 1

您有两个名为 animate 的函数（即使您已努力将场景重命名为 scene2，将相机重命名为 camera2 等）

由于animate 调用requestAnimationFrame(animate)，将不再调用另一个（被覆盖的）动画函数。

最简单（虽然绝不是漂亮）的修复方法是将其他动画函数类似地重命名为 animate2。

更好的解决方法是将此代码重构为具有本地命名空间的函数，这样这样的混淆就更难了。 （当你这样做时，你还可以将创建几何的函数重构为它自己的函数等）