3D overview

    This site uses cookies. By continuing to browse this site, you are agreeing to our Cookie Policy.

    • hey everyone, in case your looking for an easy 3d world implementation that you could work on an build here is a simple code for it...source is from

      codepen.io/zFunx/pen/dZaGJG

      HTML Source Code

      1. <div class = "earth">
      2. <div> </ div>
      3. </ div>
      Go
      Go

      CSS Source Code

      1. .earth {
      2. width: 300px;
      3. height: 300px;
      4. position: fixed;
      5. top: 0;
      6. bottom: 0;
      7. left: 0;
      8. right: 0;
      9. margin: auto;
      10. overflow: hidden;
      11. border-radius: 50%;
      12. box-shadow: 0 0 20px 20px # 000 inset, 0 0 20px 2px # 000;
      13. }
      14. Go
      15. .earth: after {
      16. position: absolute;
      17. content: "";
      18. top: 0;
      19. bottom: 0;
      20. left: 0;
      21. right: 0;
      22. box-shadow: -20px -20px 50px 2px # 000 inset;
      23. border-radius: 50%;
      24. }
      25. Go
      26. .earth> div {
      27. width: 200%;
      28. height: 100%;
      29. animation: spin 30s linear alternate infinite;
      30. background: url (https://web.opendrive.com/api/v1/download/file.json/NTlfMTQ1MTkzNDhf?inline=1);
      31. / * orginal image at https://upload.wikimedia.org/wikipedia/commons/thumb/c/c4/Earthmap1000x500compac.jpg/640px-Earthmap1000x500compac.jpg * /
      32. background-size: cover;
      33. }
      34. @keyframes spin {
      35. to {
      36. transform: translateX (-50%);
      37. }
      38. }
      Display All
    • Мне это не надо )) у меня со криптами все нормально полное 3д, а вот товарищам некоторым надо и это пвсевдо идет, как вариант можно сделать еще короче по коду..а то что Вы показали длинно я от этого ушел не интересно . и это уже не актуально так то

      Совсем простой вариант :) кому нужно можно по экспериментировать с наклоном и вариантами трансформации

      .earth
      {
      -webkit-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
      -moz-animation-name: earth;
      -moz-animation-duration: 120s;
      -webkit-animation-name: earth;
      -webkit-animation-duration: 120s;
      -moz-animation-timing-function: linear;
      -moz-animation-iteration-count: infinite;
      -moz-animation-direction: normal;
      -moz-animation-delay: 0;
      -moz-animation-play-state: running;
      -moz-animation-fill-mode: forwards;
      -webkit-animation-timing-function: linear;
      -webkit-animation-iteration-count: infinite;
      -webkit-animation-direction: normal;
      -webkit-animation-delay: 0;
      -webkit-animation-play-state: running;
      -webkit-animation-fill-mode: forwards;
      }
      @-webkit-keyframes earth {
      0% {
      -moz-transform: rotate(0deg);
      -webkit-transform: rotate(0deg);
      }
      100% {
      -moz-transform: rotate(-360deg);
      -webkit-transform: rotate(-360deg);
      }
      }
      @-moz-keyframes earth {
      0% {
      -moz-transform: rotate(0deg);
      -webkit-transform: rotate(0deg);
      }
      100% {
      -moz-transform: rotate(-360deg);
      -webkit-transform: rotate(-360deg);
      }
      }

      The post was edited 1 time, last by Shandow ().

    • вот этот код добавляет пульсацию

      .pulse {
      position:absolute;
      top:0;
      left:0;
      width:50px;
      height:50px;
      border-radius:25px;
      background:#dcf48a;
      -webkit-animation: pulsating 2s ease-in-out;
      -webkit-animation-iteration-count: infinite;
      opacity:0.0
      z-index:5;
      }

      .block{
      animation: pulse 6s infinite;
      animation: circle 100s linear infinite;
      }
      .block2{
      animation: pulse 6s infinite;
      animation: circle 100s linear infinite;
      }

      @keyframes pulse{

      10%{
      opacity: 0.4;
      }
      25%{
      opacity: 0.5;
      }
      50%{
      opacity: 0.6;
      }
      75%{
      opacity: 0.4;
      }
      100%{
      opacity: 0.8;
      }
      }

      можно получить пару моментов
      но еще раз - это все пвсевдо полезно только для второстепенных решений

      даже два д - вот я показывал код вставляйте в таком порядке и будет работать

      <canvas id="ishca'></canvas>

      <script>
      $(function(){

      var pl_id = 'ishca';

      var image = new Image();
      image.src = './styles/theme/gow/planeten/planet3d/mond.jpg';

      // загружаем изображение тени и бликов планеты
      var fxShadow = new Image();
      fxShadow.src = './styles/theme/gow/planeten/planet3d/planet_shadow.png';

      // определяем длину и высоту элемента canvas
      var width = $('#'+pl_id).width();
      var height = $('#'+pl_id).height();

      // рассчитываем угол вращения планеты
      var beta = 360/900;
      var beta = (beta*Math.PI)/360;
      var l = (Math.sqrt(width*width+width*width))/2;
      var gam = Math.PI - ((Math.PI - (beta * Math.PI)/360)/2) - (Math.PI/4);
      var b = 2*l*Math.sin(beta/2);
      var x = b*Math.sin(gam);
      var y = b*Math.cos(gam);
      var p1 = Math.cos(beta);
      var p2 = Math.sin(beta);

      var canvas = document.getElementById(pl_id);
      var id = canvas.getContext("2d");

      var newMoveWidth = 0;
      var newMoveHeight = 0;

      var drawPl = function(){

      id.clearRect(0, 0, width, height);
      // применяем к нашей планете вращение
      id.transform(p1, p2, -p2, p1, x, -y);
      // рисуем карту с новыми координатами внутри элемента
      id.drawImage(image, newMoveWidth, newMoveHeight, width, height, 0, 0, width, height);
      //добавляем тень и блики
      id.drawImage(fxShadow, 0, 0, width, height);
      // если смещение достигло предела, начинаем сначала
      if (newMoveWidth >= 899.5) newMoveWidth = 0;
      else newMoveWidth = newMoveWidth+0.5; // иначе двигаем карту дальше

      }

      setInterval(drawPl, 80); // запускаем анимацию со скоростью 70 мс.

      });
      </script>
    • есть 3 варианта один расписан тут - самый простой - есть выше.. 3D простая версия есть на просторах интернета... свою версию я пока не отдаю так как дописывал сам.. могу поменять на полезный мод join.skype.com/invite/eQ73PECFhupS yadi.sk/i/1SoE3J0NKUsIfg
    • Shandow wrote:

      есть 3 варианта один расписан тут - самый простой - есть выше.. 3D простая версия есть на просторах интернета... свою версию я пока не отдаю так как дописывал сам.. могу поменять на полезный мод join.skype.com/invite/eQ73PECFhupS yadi.sk/i/1SoE3J0NKUsIfg
      I'm sorry I don't use skype I have a home page view only if you can share the file for free?

      I have done a very successful business congratulated
    • Shandow wrote:

      babylonjs.com тут все есть бесплатно ... читайте делайте .. вот гитхаб github.com/BabylonJS/Babylon.js тут есть базовая версия с нее можно сделать что угодно
      do you share the file? you files
    • Они там есть .. Вам нужно только приспособить для своего проекта.. свой вариант я к сожалению сделал для себя. Вам не кто за Вас не будет делать работу на которую потратили много времени .. подсказку я дал Вам .. читайте код и встройте в свой проект.. свою версию я буду только продавать
    • Shandow wrote:

      Они там есть .. Вам нужно только приспособить для своего проекта.. свой вариант я к сожалению сделал для себя. Вам не кто за Вас не будет делать работу на которую потратили много времени .. подсказку я дал Вам .. читайте код и встройте в свой проект.. свою версию я буду только продавать
      Thank you for everything <3
    • Выкладываем старую свою версию 2Д обзора на whery.js подойдет к любой версии разработка Shandow and Clon22

      залить скрипты yadi.sk/d/SyyilqNrdi02nw

      в оверьвью - yadi.sk/i/COjDDqBY1cGVpQ
      предварительно рекомендую что бы не было путаницы все удалить и восстановить структуру уже под 2 Д

      это пути - к текстурам
      planetTex = loadTexture("./styles/theme/gow/planeten/planet3d/{$planetimage}.jpg"); ---- обычная планка текстура у каждой своя какую сделаете..
      normalTex = loadTexture("./styles/theme/gow/planeten/planet3d/{$planetimage}_normals.jpg");----- градиент просто делаем одну текстуру светлых тонов размеры текстур 1024 на 768

      и все работает данный скрипт легкий и не грузит систему вес зависит от тяжести картинок что делает скрипт полное управление планетой вертим отдаляем приближаем вращение по оси и так есть

      текстура светлая одна на все планеты yadi.sk/i/24lm5P06PXNP1Q
      текстура типа планеты yadi.sk/i/23-95XcCK1vFcA

      каким образом работают текстуры


      dschjungelplanet05_normals.jpg светлая текстура далее эту текстуру множим к каждой планете указываем по типу 6-7-8 и так далее они должны работать в паре то есть добавляем приставку _normals короче меняем у светлой к названию основной планеты так же параметры

      dschjungelplanet05.jpg текстура самой планеты

      The post was edited 1 time, last by Shandow ().

    • намешано много и экстериум и со стелы )) зачем два обзора, если 3д включил )) делать надо в одном стиле .. но так молодцы что идею подхватили получается ее внедрять .. мы к примеру даже юнитов 3 д для костомизации делаем свои не копируя не кого для чего наняли человека который нам делает их .. а если тупо копировать все.. прогресс будет расти медленно и серьезного проекта подражая не сделать
    • bombo450 wrote:

      можете ли вы поделиться своей версией, пожалуйста
      Спасибо
      все есть в интернете готовое... зайдите на оф. сайт и сделайте .. я с Вас поражаюсь ! дайте, подайте, поделитесь, вы что то сами сделали для проекта , что бы вам помогать? за финансы без проблем сделаю за пол часа с учетом вашего дизайна.. а так сами делайте есть уже много готовых скриптом с планетами три д внедрите и все . вот Вам источник github.com/BabylonJS/Babylon.js вот на выбор еще один threejs.org а вот это наши артефакты pp.userapi.com/c851132/v851132008/8d1f6/vmKM2Vy26Rg.jpg со сложной системой их можно тащить у игрока боевые арты с планеты находить в эскпе и не которые можно покупать они не забираются , так же сделаны фракции не для альянсов а игрок может выбирать из 5 фракций в игре 5 рас так же 5 фракций ..полностью сменена логика старых (к примеру выбрали фракцию шахтеров в каждой фракции пять значений 3 с плюсом в бонус и два отнимают уходят в минус сделан баланс между фракциями то есть если что т в фракции сильней то другое слабее чем у другой фракции и наоборот).. для каждой расы сделаны сюжетные линии 6 персонажей у каждой расы летают с флотом , хостаил ... адаптировано по 1.8 + по вопросам и сотрудничеству и если не получается или лень делать самостоятельно обзор стучимся вот по этому адресу join.skype.com/invite/eQ73PECFhupS

      The post was edited 9 times, last by Shandow ().

    • да тема интересная необычная для moons то что по ссылке
    • Shandow wrote:

      a lot of the exterior and the stela are mixed)) why two reviews, if 3D is included)) do it in the same style .. but so good that they caught the idea and implemented it. Someone who hired someone who makes them to us .. and if you stupidly copy everything .. progress will grow slowly and imitating a serious project will not do
      i see you point so i made the old version collapsible... the reason for it is players wanted a quick view of the planet so hovering over and see... it helpes alot
    • каждому свое нравится я делаю в первую очередь как мне нравится... так как найдутся те кто будет доволен ..и те кто не будет доволен.... всем не угодить и каждый вариант имеет право на реализацию .. у каждого свои вкусы