是我的代码......

Question

我正在进行作业并且对thee.js不太好，这项任务是在太阳系上，

我遇到的问题是，我的图片无法在Google Chrome上呈现由于CORS政策，但适用于firefox。我找了答案但都没有用。
我正在尝试在我的任务中生成粒子，我能够创造一颗恒星，但如何繁殖恒星是个问题。一世使用multiplyScalar但它没有用。这是一些文章，我读到粒子，我能够生成一个但我需要在整个画布上复制。这是aerotwist，solutiondesign

是我的代码......

<html lang="en">
 <head>
    <meta charset="UTF-8">
  <title> solar system project </title>
  <script src="three.min.js"></script>
    <style>
           body{
               background:#000;
              }
      </style>
  </head>

   <body>

   <script>

     var scene, camera, renderer, container;
     var W, H;

      W = parseInt(window.innerWidth);
      H = parseInt(window.innerHeight);

      container = document.createElement('div');
      document.body.appendChild(container);

      camera = new THREE.PerspectiveCamera(45, W/H, 1,1000000);
      camera.position.z=6300;
      scene = new THREE.Scene();


        //stars
         var  S_particles = new THREE.Geometry();
         var  S_material = new THREE.PointsMaterial({color:0xffffff, 
          size:20, 
          map: THREE.ImageUtils.loadTexture(
          "img/snowflake.png"),
            blending: THREE.AdditiveBlending,
          transparent: true,
          sizeAttenuation:false,});`



        for( var i=0; i < 5000; i++){
               var x= Math.random * 2-1,
                   y= Math.random *2-1,
                   z= Math.random *2-1,

            particle = new THREE.Vector3(x, y, z); 
            particle.multiplyScalar(6300);}



            particles.vertices.push(particle);


            var star= new THREE.Points(S_particles, S_material);

                scene.add(star);


         //sun 
           var sun, sun_geom, sun_matter;
           sun_geom = new THREE.SphereGeometry(830, 30,30);
           sun_matter = new THREE.MeshNormalMaterial();
           sun = new THREE.Mesh(sun_geom, sun_matter);
           scene.add(sun);





           //earth
            var earth, earth_geom, earth_matter;
            earth_geom = new THREE.SphereGeometry(50, 20,20);
            earth_matter = new THREE.MeshNormalMaterial();
            earth= new THREE.Mesh(earth_geom, earth_matter);
             earth.position.x = 6300;
             scene.add(earth);



          renderer =new THREE.WebGLRenderer();
          renderer.setSize(W,H);
          container.appendChild(renderer.domElement);

          animate();

          var t=0;
          var y=0;
         document.addEventListener('mousemove', function(event){

          y = parseInt(event.offsetY); });




   //this piece of used to animate
        function animate(){
             requestAnimationFrame(animate);

                sun.rotation.y+=0.005;


                  earth.position.x = Math.sin(t*0.1)*1500;
                   earth.position.z = Math.cos(t*0.1)*3500;
                 //camera.position.x = sun.position.x;
               //camera.position.z = sun.position.z;
                camera.position.y=y*5;
                 camera.lookAt(scene.position);
                 t+=Math.PI/180*2;

                  renderer.render(scene, camera);
            }

     </script>


 </body>
</html>

Answer 1

1。）要获得没有CORS东西的纹理，可以通过创建本地服务器来完成（尝试XAMPP，这对初学者来说是一个好的开始），然后尝试让他们通过服务器

2。）要渲染多个粒子，你需要为它们生成多个位置，然后你需要遍历它们并在每个位置重新制作一个粒子。

multiplyScalar不会改变矢量，你需要做

vector = vector.multiplyScalar(6300);

我正在使用three.js构建太阳系

是我的代码......

1 个答案: