showing black screen when rendering 3d model .obj file on webpage

Question

I am trying to render 3d model .obj file on webpage using Three.js. I am not getting any error on console. But 3d model is not shown. I have tried previous related solutions but not worked for me.Like: Model not rendering on screen On rendering getting black screen in three.js interactable 3D Model loaded from a .obj file? How to load .obj 3D model in Three.js? Why can't I get this 3D model (.obj) to display on screen? .obj/.gltf 3D model won't show in ARCore How to load animated 3D model on webpage using THREE.js Blank screen when rendering a 3d .g3db model [libgdx] Three JS not rendering anything at all. It’s all a black screen Rendering blank screen when trying to play animation in threejs Here is the code:

<!DOCTYPE html>
<html>
<head>
  <title>3D Model Viewer</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://cdn.jsdelivr.net/npm/three@0.131.2/build/three.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/three@0.131.2/examples/js/controls/OrbitControls.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/loaders/MTLLoader.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/loaders/OBJLoader.js"></script>
    

</head>
<body>
  <div id="model-container"></div>
  <script>
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    var renderer = new THREE.WebGLRenderer({ alpha: true });
    renderer.setSize(window.innerWidth*.9, window.innerHeight*.9);
    renderer.setPixelRatio( window.devicePixelRatio );
    document.getElementById('model-container').appendChild(renderer.domElement);
    

    var mtlLoader = new THREE.MTLLoader();
    mtlLoader.load('models/1a2a5a06ce083786581bb5a25b17bed6.mtl', function(materials) {
      materials.preload();

      var objLoader = new THREE.OBJLoader();
      objLoader.setMaterials(materials);
      objLoader.load('models/1a2a5a06ce083786581bb5a25b17bed6.obj', function(object) {
        scene.add(object);
      });
    });

    var light = new THREE.AmbientLight(0x404040); // soft white light
    scene.add(light);

    var controls = new THREE.OrbitControls(camera, renderer.domElement);
    var ambientLight = new THREE.AmbientLight(0x404040); // soft white light
    scene.add(ambientLight);

    var pointLight = new THREE.PointLight(0xffffff, 1, 100);
    pointLight.position.set(0, 10, 0);
    scene.add(pointLight);
    var dirLight = new THREE.DirectionalLight(0xffffff, 1);
    dirLight.position.set(1, 1, 1).normalize();
    scene.add(dirLight);


    function animate() {
      window.requestAnimationFrame(animate);
      renderer.render(scene, camera);
      camera.position.z = 5;

    }
    animate();
  </script>
</body>
</html>

I am trying to render 3d model on webpage and want to rotate it around 360 degrees and also able to zoom in or out and also want to open camera to see 3d in real world

showing black screen when rendering 3d model .obj file on webpage

0 Answers0