Блог

Я создал веб-сайт portifolio и развернул его на страницах github. Проблема в том, что когда я запускаю страницу локально, она работает нормально, но когда я смотрю на ссылку на страницах github, она не показывает анимационный фон, который я сделал.

Это весь мой код проекта :

 import "./style.css"
import * as THREE from 'three';

// Setup

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

const renderer = new THREE.WebGLRenderer({
  canvas: document.querySelector('#bg'),
});

renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
camera.position.setZ(30);
camera.position.setX(-3);

renderer.render(scene, camera);

// tetrahedro
const tetra = new THREE.TetrahedronGeometry(0.25, 24, 24);
const tetrahedro = new THREE.Mesh(tetra,new THREE.MeshStandardMaterial(0xffffff));
scene.add(tetrahedro);
// Lights

const pointLight = new THREE.PointLight(0xffffff);
pointLight.position.set(5, 5, 5);

const ambientLight = new THREE.AmbientLight(0xffffff);
scene.add(pointLight, ambientLight);

// Helpers

// const lightHelper = new THREE.PointLightHelper(pointLight)
// const gridHelper = new THREE.GridHelper(200, 50);
// scene.add(lightHelper, gridHelper)

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

function addStar() {
  const geometry = new THREE.SphereGeometry(0.25, 24, 24);
  const material = new THREE.MeshStandardMaterial({ color: 0xffffff });
  const star = new THREE.Mesh(geometry, material);

  const [x, y, z] = Array(3)
    .fill()
    .map(() => THREE.MathUtils.randFloatSpread(100));

  star.position.set(x, y, z);
  scene.add(star);
}

Array(200).fill().forEach(addStar);

// Background

const blacktexture = new THREE.TextureLoader().load('black-screen.jpg');
scene.background = blacktexture;

// Avatar


// Moon

const moonTexture = new THREE.TextureLoader().load('moon.jpg');


const moon = new THREE.Mesh(
  new THREE.SphereGeometry(3, 32, 32),
  new THREE.MeshStandardMaterial({
    map: moonTexture
  })
);

scene.add(moon);

moon.position.z = 30;
moon.position.setX(-10);

tetrahedro.position.z =60;
tetrahedro.position.setX(-15);

// Scroll Animation

function moveCamera() {
  const t = document.body.getBoundingClientRect().top;
  moon.rotation.x  = 0.05;
  moon.rotation.y  = 0.075;
  moon.rotation.z  = 0.05;

  tetrahedro.rotation.x  = 0.05;
  tetrahedro.rotation.y  = 0.075;
  tetrahedro.rotation.z  = 0.05;

  camera.position.z = t * -0.01;
  camera.position.x = t * -0.0005;
  camera.rotation.y = t * -0.0005;
}

document.body.onscroll = moveCamera;
moveCamera();

// Animation Loop

function animate() {
  requestAnimationFrame(animate);

  tetrahedro.rotation.x  =0.005;

  moon.rotation.x  = 0.005;

  //controls.update();

  renderer.render(scene, camera);
}

animate();
 

 @import url("https://use.typekit.net/jmk3xov.css");

canvas {
  position: fixed;
  top: 0;
  left: 0;
}


:root {
  --dark-bg: rgba(15, 15, 15, 0.95);
  --spacing: 350px;

  font-family: brandon-grotesque, sans-serif;
  font-weight: 400;
  font-style: normal;
}


main {
  width: 100vw;
  color: rgba(255, 255, 255, 0.925);
  z-index: 99;
  position: absolute;
  width: 100%;
  margin: 0px auto;
  padding: 120px 0px;
  
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

h1, h2, h3, blockquote {
  font-family: elevon, sans-serif;
  font-weight: 700;
  font-style: normal;
}

canvas {
  position: fixed;
  top: 0;
  left: 0;
}



  header {
    background: var(--dark-bg);
    grid-column: 2 / span 5;
    font-size: 2.5rem;
    padding: 2rem;
    margin-bottom: var(--spacing);
  }

  section {
    grid-column: 2 / 8;
    padding: 1rem;
    background: var(--dark-bg);
    font-size: 1.25rem;
    line-height: 1.5;
    margin-bottom: var(--spacing);
  }

  blockquote {
    margin: 0;
    padding: 0;
    grid-column: 2 / span 9;
    margin-bottom: var(--spacing);
    border-radius: 5;
  }

  blockquote p {
    color: rgb(255, 255, 255);
    background-color: rgb(43, 42, 42);
    font-size: 4rem;
    display: inline;
    line-height: 1;
    border-radius: 5;
  }

  .left {
    grid-column: 6 / 12;
 

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Luis's Portifolio</title>
    <style>   
      /* Style the Sticky icons on web page */   
      .stickyicon-list {   
      position: absolute;   
      top: 400px;
      left: 10px;
      transform: translateY(-50%);             
      }          
      .stickyicon-list a {   
      display: block;   
      text-align: center;   
      padding:left;   
      transition: all 0.5s ease;   
      color: white;   
      font-size: 70px;

      }         
      /* HOver affect on sticky social media icons */   
      .stickyicon-list a:hover {   
      color: rgb(83, 76, 5);   
      width:10px;   
      }   
         
      /* Now we have to design each icon of social media */         
      .facebook {   
      background: #3b5998;   
      color: white;  
      }         
    
      .linkedin {   
      background: #0e76a8;   
      color: white;   
      }           
      .instagram {   
      background: #3f729b;   
      color: white;   
      }
      #porti{
        background-color: black;
        color:white;
      }
      #arduino{
        background-color: black;
        color:whitesmoke;
      }
      .button{
        background-color:rgb(56, 81, 82);
        color:white;
        padding-right: 10px;
        border-radius: 25;
      }
      </style>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>
  <body>

    <canvas id="bg"></canvas>   

    <main>

      <header>
        <h1>Luis Filipe</h1>
        <p> 🙋🏻‍♂️ Welcome to my Portifolio! </p>
        <div class="stickyicon-list">  
          <a href="https://www.facebook.com/FelipeAraujods1/" target="_blank" class="facebook"
          >   
          <i class="fa fa-facebook"></i>   
      </a> 
        <a href="https://www.instagram.com/luisfaraujo1999/" target="_blank" class="instagram">   
            <i class="fa fa-instagram"></i>   
        </a>    
        <a href="https://www.linkedin.com/in/luis-filipe-de-araùjo-06337717b/" target="_blank" class="linkedin">   
              <i class="fa fa-linkedin"></i>   
        </a> 
         
        </div>
      </header>


      <blockquote id="jobyoulove">
        <p>Choose a job you love, and you will never have to work a day in your life.</p>
      </blockquote>

      <section>
        <h2>📜 About myself</h2>
        <p>
          I am a Brasilian Electrical engineering student who loves to code.🤓
        </p>

        <p>
          I got into programming as soon as I first met Python in a class at UFV.
          Ever since I have been working in some small and big projects including mainly machine learning 
          and data analyses. In the begining of 2021 though I was talked into a web developing course by a friend
          and I fell in love for the topic. Now I am starting my web developing career and will take any challenges
          you may have to offer me. 
        </p>

      </section>

      <section class="light">
        <h2>👩🏽‍🚀 Projects</h2>

        <p>
          <ul>
            <li>My first ever web developing project was the building and styling of this web page.</li>
             <a href="https://github.com/Doquey/Portifolio" target="_blank">

              <button type="button" class="button">
              <span class="button__icon"> <ion-icon name="logo-github"></ion-icon> </span>
            </button>
          </a>
            <li>A program that intagrates Python 🐍 and Arduino  in order to take data from a working glow motor.</li>
            <a href="https://github.com/Doquey/Arduino-Python" target="_blank">
              <button type="button" class="button">
              <span class="button__icon"><ion-icon name="logo-github"></ion-icon></span>
            </button>
          </a>
          </ul>
        </p>

        <h2>🏆 Accomplishments</h2>

        <p>
          <ul>
            <li> Passing grade of 85% on Python  for research hosted by harvardX</li>
          </ul>
        </p>

      </section>

      <blockquote>
        <p>The best way out is always through! <br>-Robert Frost</p>
      </blockquote>

      <section class="left">
        <h2>✈️ Work History</h2>

        <h3>diElétrica</h3>
        <p>
          As a freshman I worked in a project called "diElétrica" on my university. The main purpose of this project
          is to simulate the day to day of an Electrical engineering company. There I worked as a manager administrator.
          2018-2019
        </p>
        <h3>Skywards UfVoa</h3>
          In the begining of this year I applied to this another project within my university. The main goal
          of the project is to create a radiocontrolled airplane to go competing in the end of the year.
          I am still active in the project as head of the Eletronic and instrumentation sector.
        <p>
   
        </p>

      </section>

      <blockquote id="work">
        <p>Let's work together? <a href="https://www.linkedin.com/in/luis-filipe-de-araùjo-06337717b/" target="_blank" class="linkedin">   
          <i class="fa fa-linkedin"></i>  </a></p>
      </blockquote>


    </main>
    
    <script type="module" src="/main.js"></script>




  <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
  <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>






  </body>
</html>
 

Я перепробовал много вещей, таких как: вставка «/» в «main.js » сценарий, я также пытался развернуть свой код двумя различными способами :
1) создание вручную папки «dist» и перемещение туда всех изображений, js и html-кода
2) запуск команды npm run build для автоматического создания папки dist.

Я не уверен, как настроены страницы GitHub, однако, вероятно, у них отключен перекрестный скриптинг, поскольку это представляет серьезную угрозу безопасности. Когда отключены сторонние зависимости, они не будут часто работать. итак, если ваша анимация зависит от какого-либо скрипта вне сервера, то она не будет работать, также может быть, что структура файла изменилась при загрузке.

это неправильно. <script type="module" src="/main.js"></script> попробуйте <script type="module" src="./main.js"></script>