Я работаю на уступки и не слишком хорошо с thee.js, это назначение на солнечной системе,Я строю Солнечной системы, используя Three.js

проблема сталкиваюсь, мои изображения могут не будет отображаться на Google chrome из-за политики CORS, но работает на firefox. я искал ответы , но никто не работал.
Я пытаюсь генерировать частицы в моем назначении, я смог создать одну звезду, но как размножать звезды - проблема. I использовал 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>

источник

2016-12-01 Ugochukwu Alex Gbenimachor

вы можете предоставить jsfiddle ссылку, чтобы я мог видеть беговой код и обновления в то же время. – spankajd

Вы действительно знаете javascript? Вы должны поместить скрипт в отдельный файл, чтобы он был более управляемым. –

Кроме того, здесь используется Three.js, основанная на WebGL, но это не одно и то же. Поверьте мне, если бы вам пришлось работать с чистым WebGL, вы были бы очень ввернуты –

-1

1.) Для того, чтобы получить текстуру без вещей CORS может быть сделано путем создания локального сервера (попробуйте XAMPP, это хороший старт для начинающих), а вместо того, чтобы пытаться достичь локальных изображений, попробуйте получить их через сервер.

2.) Чтобы отображать несколько частиц, вам необходимо создать для них несколько позиций, тогда вам нужно пройти через них и перебросить частицы в каждую позицию.

multiplyScalar не меняет вектор, вам нужно сделать

vector = vector.multiplyScalar(6300);

источник

2016-12-01 12:16:02

https://cdnjs.cloudflare.com/ajax/libs/three.js/r72/three.min.js –

с помощью XAMPP, собираюсь ли я создать базу данных для изображений и запрос изображений из XAMPP –

@ugo вам необходимо создать веб-сервер, на котором вы храните свой сайт, без базы данных. –

Я строю Солнечной системы, используя Three.js

ниже мой код ...

ответ

Смежные вопросы