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

Question

我不明白为什么添加第二个对象后第一个对象停止动画并且不再运行？我怎样才能弄清楚为什么我的对象相互抵消以及如何创建两个不同的或多个同时动画的多个 threejs 项目？我想运行比某些文件中的 three.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。

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

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

How to two Three-JS Objects run and animate at the same time same page?

javascript

three.js

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

How to two Three-JS Objects run and animate at the same time same page?

javascript

three.js

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