时间戳

首页 > 解决方案 > 如何在同一页面上同时运行两个三个 JS 对象并设置动画？

javascript - 如何在同一页面上同时运行两个三个 JS 对象并设置动画？

问题描述

我无法弄清楚为什么通过添加第二个对象第一个对象停止动画并且不再运行？我如何才能弄清楚为什么我的对象会相互抵消，以及如何创建两个不同或多个同时动画的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>

'''

标签： javascriptthree.js

解决方案

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

由于animate调用requestAnimationFrame(animate)，其他（覆盖）动画函数将不再被调用。

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

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

推荐阅读