Question

我有一个对象数组，我希望每个对象以随机速度围绕y轴旋转（所以它们有不同的周期）所以我试图为它们应用for循环，但看起来所有的对象仍然以相同的速度旋转。任何人都可以帮我这个？

  <!doctype html>
<html lang="en">
<head>
  <title>Test 2</title>
  <meta charset="utf-8">
</head>
<body style="margin: 0;">

  <script src="js/three.min.js"></script>
  <script src="js/OrbitControls.js"></script>
  <script type="text/javascript" src="js/RequestAnimationFrame.js"></script>


  <script>
    // Set up the scene, camera, and renderer as global variables.
          var scene, camera, renderer;
          var spheres = [];
          var group = new THREE.Object3D();
          var mesh;




          init();
          animate();
          myRotate();

   // Sets up the scene.
   function init() {

        // Create the scene and set the scene size.
        scene = new THREE.Scene();
        var WIDTH = window.innerWidth,
            HEIGHT = window.innerHeight;

        // Create a renderer and add it to the DOM.
        renderer = new THREE.WebGLRenderer({antialias:true});
        renderer.setSize(WIDTH, HEIGHT);
        document.body.appendChild(renderer.domElement);//create a canvas inside the body

        // Create a camera, zoom it out from the model a bit, and add it to the scene.
        camera = new THREE.PerspectiveCamera(45, WIDTH / HEIGHT, 0.1, 20000);
        camera.position.set(0,40,0);
        scene.add(camera);

        // Create an event listener that resizes the renderer with the browser window.
        window.addEventListener('resize', function() {
          var WIDTH = window.innerWidth,
              HEIGHT = window.innerHeight;
          renderer.setSize(WIDTH, HEIGHT);
          camera.aspect = WIDTH / HEIGHT;
          camera.updateProjectionMatrix();
        });

        // Set the background color of the scene.
        renderer.setClearColorHex(0x374F47, 1);

        // Create a light, set its position, and add it to the scene.
        var light = new THREE.PointLight(0xfff555);
        light.position.set(-100,500,100);
        scene.add(light);


        //Set up the group of mesh
        for (var i=0; i<5; i++){
            var myloader= new THREE.JSONLoader();
            myloader[i] = myloader.load( "models/treehouse_logo.js", function(geometry)
            {var material = new THREE.MeshPhongMaterial({ambient: 0x030303, color: 0xdddddd, specular: 0x009900, shininess: 30, shading: THREE.FlatShading});
             mesh = new THREE.Mesh(geometry, material);
             //creating random positions for mesh
             var a = Math.floor(Math.random()*12);
             var b = Math.floor(Math.random()*7);
             var c = Math.floor(Math.random()*15);
             mesh.position.set(a,b,c);
             mesh.scale.x = mesh.scale.y = mesh.scale.z = Math.random()+ 1;
             group.add(mesh);
             spheres.push(mesh);
             scene.add(group);  
             scene.add(spheres);
             //scene.addObject( mesh );                  
             });
            }





        controls = new THREE.OrbitControls(camera, renderer.domElement);

  }


  // Animate function and render
  function animate() {

        requestAnimationFrame(animate);

        //rotate the group of objects   
        group.rotation.y += 0.0175;
        group.rotation.x += 0.002;
        group.rotation.z += 0.015;  

        //apply function to every element in the group




    spheres.myRotate=function()
        {
          for (i=0;i<spheres.length;i++)
            {
            spheres[i].rotation.x += Math.random()*0.001;
            }
        }

        renderer.render(scene, camera);
        controls.update();
        }

  </script>

</body>
</html>

在Three.JS中为数组中的每个应用随机值

0 个答案: