3D-фигуры с использованием SVG или WebGL - PullRequest
Новая
       33

3D-фигуры с использованием SVG или WebGL

5 голосов
/ 23 мая 2011

Привет, я хочу сделать интерактивную трехмерную сферу в браузере.Текстура на ней будет представлять собой карту мира, поэтому в основном я пытаюсь создать глобус, который можно вращать в любом направлении, используя карту.Я удобен при рендеринге 2D-изображений с использованием SVG, но не уверен, как отрисовывать 3D-формы в SVG.Можно ли визуализировать трехмерную фигуру в SVG, если да, то как?Если нет, то лучше ли использовать WebGl?

Ответы [ 4 ]

9 голосов
/ 26 мая 2011

WebGL - ваш лучший выбор из-за производительности. Вы можете использовать (или, по крайней мере, учиться) демонстрации, такие как http://www.chromeexperiments.com/globe (см. http://data -arts.appspot.com / globe-search ). Есть также другие демонстрации глобуса на http://www.chromeexperiments.com.

6 голосов
/ 24 мая 2011

Взгляните на three.js , который немного абстрагирует реализацию (поставляется с бэкэндами WebGL / SVG / Canvas).

SVG - это 2-мерный векторный формат графики, но вы можете проецировать 3D-фигуры на 2-D, поэтому можно визуализировать 3D-объекты с помощью SVG, это всего лишь небольшая работа (лучше оставить для библиотек JavaScript).

4 голосов
/ 16 июня 2011

Если вы используете SVG, то затенение будет проблемой. Правильное затенение на самом деле невозможно в SVG, хотя вы можете подделать его в нескольких избранных обстоятельствах. Для 3D обязательно используйте WebGL, если в модели более дюжины полигонов.

2 голосов
/ 16 апреля 2012

Вы должны преобразовать все точки с помощью проекции Используйте это, чтобы изменить point2D (x, y) в point3D (x, y, z): 

  // Language Javascript

  // object Point 

  function Point(x,y,z){
    this.x = x;
    this.y = y;
    this.z = z; 
  }

 // Projection convert point 2D in 3D

  function ProjectionPoint(point){
    if ( !(point instanceof Point) )
    throw new TypeError("ProjectionPoint: incorrect type parameter");

    return { x: (point.x<<8)/(point.z+Zorig)+Xorig, 
             y: (point.y<<8)/(point.z+Zorig)+Yorig, 
             z:point.z  } 
 }

Убедитесь, что вы определили исходную точку в переменной Xorig, Yorig, Zorig

...