Thiết kế website giá rẻ

Question

I have read several questions about this in and out of stack overflow, but it is still not very clear to me where the incommunicability is.
A couple of posts I’v read about it many users recommended to use CDNs instead, but so where is the point of having installed via npm(?), it’s my first time working with modules instead, I’d like to learn this approach, but this starting point doesn’t make things clear to me heheh

Anyway before the Loader URL started with ‘node_modules/…’ while now I added ‘/’ despite the fact that in theory I think it is not needed right?

As you can see also WebGLs are imported in the same way but it doesn’t cause the error, only the GLTFLoader import for now, I also read that it is not recommended to have module imports from different folders, so why node modules installs all packs with this folder hierarchy?

/* SUPPORT WARN SUPPORT WARN SUPPORT WARN SUPPORT WARN SUPPORT WARN SUPPORT WARN SUPPORT WARN SUPPORT WARN */ 
import WebGL from '/node_modules/three/examples/jsm/capabilities/WebGL.js';

if ( WebGL.isWebGLAvailable() ) {

} else {

    const warning = WebGL.getWebGLErrorMessage();
    document.getElementById( 'container' ).appendChild( warning );

}
/* ________________________________________________________________________________________________________ */ 


/* MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN */
import * as THREE from '../build/three.module.js';


/*
import { DRACOLoader } from '/node_modules/three/examples/jsm/loaders/DRACOLoader.js';
*/


import { GLTFLoader } from '../node_modules/three/examples/jsm/loaders/GLTFLoader.js';

/* RENDER */
const container = document.querySelector( '#container' );
const renderer = new THREE.WebGLRenderer({ alpha: false, antialias: true });
renderer.setClearColor( 0x000000);
renderer.outputColorSpace = THREE.SRGBColorSpace;
renderer.setSize( container.innerWidth, container.innerHeight );

container.appendChild( renderer.domElement );

        /* render resize on container */
        function resize() {     
            if (container == null) {
                console.warn('The container element is null.');
                return;
            }
            
            try {
                renderer.setSize(container.clientWidth, container.clientHeight);
                camera.aspect = container.clientWidth / container.clientHeight;
                camera.updateProjectionMatrix();
            } catch(e) {
                console.warn('An error occured while resizing the renderer:');
                console.error(e);
            }

        };
        window.addEventListener("resize", resize);
        


/* SCENA - CAMERA */

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.set( 0, 5, 11,);
camera.lookAt(0, 0, 0);



/* GEOMETRY */
 
const groundGeometry = new THREE.PlaneGeometry( 20, 20, 32, 32 );
groundGeometry.rotateX(-Math.PI / 2 );
const groundMaterial = new THREE.MeshStandardMaterial({ 
    color: 0xffffff,
    side: THREE.DoubleSide
});
const groundMesh = new THREE.Mesh ( groundGeometry, groundMaterial );
scene.add(groundMesh);



/* SPOT LIGHT */

const spotLight = new THREE.SpotLight ( 0xffffff, 3, 100, 0.5, 0.5 );
spotLight.position.set( 0, 25, 0 );
scene.add(spotLight);
spotLight.intensity = 1000;




/* ANIMATION PLANE */
function animatePlane() {
    requestAnimationFrame (animatePlane);
    renderer.render(scene,camera);
}

animatePlane();


/* GEOMETRY */


const loader = new GLTFLoader().setPath('/public/models/');
loader.load('/public/models/untitled.gltf', function (gltf) {
    const mesh = gltf.scene;
    mesh.position.set (0, 1.05, -1);
    scene.add(mesh);
});

/* ________________________________________________________________________________________________________ */

@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@200;400;900&display=swap');
@font-face{font-family:"FontAwesome";font-display:block;src:url(../webfonts/fa-v4compatibility.woff2) format("woff2"),url(../webfonts/fa-v4compatibility.ttf) format("truetype");}


/* HEADER HEADER  HEADER HEADER  HEADER HEADER  HEADER HEADER  HEADER HEADER  HEADER HEADER  HEADER HEADER  HEADER HEADER  HEADER HEADER  */

.header {
    background-color: rgb(249, 255, 255);
    -moz-box-shadow:5px 5px 80px rgba(0,0,0,0.075);
    -webkit-box-shadow:5px 5px 80px rgba(0,0,0,0.075);
    box-shadow:5px 5px 80px rgba(0,0,0,0.075);
  }
  
.IDentity {
    font-family: 'Unbounded', cursive;
    font-weight: 300;
  }
  
.header h1{
    font-family: 'Unbounded', cursive;
    padding-left: 60px;
    padding-top: 10px;
  }
  
.header .bio{
    font-family: 'Unbounded', cursive;
    font-size: 0.84rem;
    display: flex;
    justify-content: space-between;
    /*align-items: baseline;*/
    padding-left: 60px;
  }
  
#name {
    margin: 0; font-size: 2rem ; font-weight: 400;
  }

/* LANDING SECT LANDING SECT LANDING SECT LANDING SECT LANDING SECT LANDING SECT LANDING SECT LANDING SECT LANDING SECT LANDING SECT */

.sectUNO {
  background-color: antiquewhite;
  background-position:center; 
  height:66vh;
  width: 100%;
  border-radius: 40px;}

.landZERO {
   /* background-image: url(publicimgdownload2023-11-03T213308403.png); */
    background-repeat: no-repeat;
    position: relative;
    /*margin-top: 10vh;*/
    background-size: cover;
    background-position:center; 
    height:66vh;
    width: 100%;
    border-radius: 40px;
}

#info {
    position: absolute;
    top: 10px;
    width: 100%;
    text-align: center;
    z-index: 100;
    display:block;
}

/* sectUNO sectUNO sectUNO sectUNO sectUNO sectUNO sectUNO sectUNO sectUNO sectUNO sectUNO sectUNO sectUNO sectUNO sectUNO sectUNO */

.sectUNO {
    bottom: 0;
    background-repeat: no-repeat;
    /*background-size: cover;*/
    min-width: fit-content;
    height: 69vh;
}

<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>tryTR</title>
    <style>
        body { padding: 10; }
        
    </style>
</head>
<body>

    <div class="header" id="myHeader">
        <div class="IDentity">
    
          <h1 id="name">xxx</h1>

          <div class="bio"> <p style="  font-size: 1rem ;">123456789
            <!-- Graphic Designer, Digital Artist, Creative Director -->
            </p>
            <p style="margin-right: 75px; font-weight: 500; font-size: 1rem;">Portfolio</p>
          </div> 
    
        </div>
    </div>


    
    <section class="landZERO" id="container">

        <div id="info">Description</div>
               
            <script type="module" src="main.js">
        
            </script>
    
    </section>



    <section class="sectUNO">

    </section>

    <footer style="color: rgb(153, 118, 76); height: 30px; ">

    </footer>

</body>
</html>

Thiết kế website giá rẻ

Danh mục

Trouble with loader path syntax (No CDNs) / ThreeJs npm node js / Relative references must start with either “/”, “./” or