CODEWITHSUNDEEP
javascriptthree.js
Icarus
Icarus

Reputation: 96

3d .gltf model not showing on brower

I am trying to load a .gltf 3d animated model to website but its not showing on the page , and there is no error on console.

let container;
let camera;
let renderer;
let scene;
let house;
let clock = new THREE.Clock();

function init() {
    container = document.querySelector('.scene');

    scene = new THREE.Scene();


    const fov = 35;
    const aspect = container.clientWidth/container.clientHeight;
    const near = 0.1;
    const far = 500;
    

    camera = new THREE.PerspectiveCamera(fov,aspect,near,far);
    camera.position.set(-10,25,100);

    

    const ambient = new THREE.AmbientLight(0x404040,10);
    scene.add(ambient);

    const light = new THREE.DirectionalLight(0xffffff,5);
    light.position.set(-30,10,30);
    scene.add(light);

    renderer = new THREE.WebGLRenderer({antialias:true,alpha:true});
    renderer.setSize(container.clientWidth,container.clientHeight);
    renderer.setPixelRatio(window.devicePixelRatio);

    controls = new THREE.OrbitControls(camera,renderer.domElement);
    controls.addEventListener('change',renderer);

    container.appendChild(renderer.domElement);

    let loader = new THREE.GLTFLoader();
    loader.load('./3drobo/scene.gltf',function(gltf){
        mixer = new THREE.AnimationMixer( gltf.scene );
        var action = mixer.clipAction( gltf.animations[ 0 ] );
        action.play();
        scene.add( gltf.scene );
        animate();
    })
  }
  function animate() {

    requestAnimationFrame( animate );

    var delta = clock.getDelta();

    if ( mixer ) mixer.update( delta );

    renderer.render( scene, camera );

    //stats.update();

}

init();

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Instic | The Coding Bots</title>
    <link rel="stylesheet" href="css/index.css" />
  </head>
  <body>
    <nav class="navbar">
      <ul class="nav-list">
        <div class="logo">
          <img src="./css/static/mainlogo.png" alt="" />
        </div>
        <li><a href="">HOME</a></li>
        <li><a href="">SERVICES</a></li>
        <li><a href="">PROJECTS</a></li>
        <li><a href="">TEAM</a></li>
        <li><a href="">CONTACT</a></li>
      </ul>
    </nav>
    <section class="mainsection">
      <div class="content">
        <p>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nihil nemo
          quos esse, harum, officiis libero, quia dolores placeat architecto ut
          et explicabo recusandae doloribus quas nisi unde enim atque itaque.
        </p>
      </div>
      <div class="scene"></div>
    </section>

    <script src="js/three.min.js"></script>
    <script src="js/GLTFLoader.js"></script>
    <script src="js/OrbitControls.js"></script>
    <script src="js/stats.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/postprocessing.min.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>

it was showing before but after changing fov value its disappear from the page , i set the fov value back to same but its not showing on the page the width and height is automatic setting to 0px

; enter image description here

Upvotes: 1

Views: 102

Answers (1)

2pha
2pha

Reputation: 10165

Your scene has a 0 height and width because...
You are setting the .scene div as the container variable, and using renderer.setSize(container.clientWidth,container.clientHeight); to set the height and width of the renderer/canvas.
But at the time when the scene is initialized, the .scene div has 0 height and width as there is nothing yet inside of it and it is overriding the .scene canvas height and width css.
instead of..

.scene canvas {
  height: 100vh;
  width: 100%
}

try

.scene {
  height: 100vh;
  width: 100%
}

Upvotes: 2

Related Questions