Question

我已经在Blender中创建了一个多维数据集，并使用export > glTF 2.0将其导出以创建cube.glb文件。

我能够验证cube.glb是否已下载并且在内存中。

console.log显示：

THREE.WebGLRenderer 97
(index):85 model:  load cube
(index):91 100% loaded

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script src="./three.js"></script>
    <script src='OrbitControls.js'></script>
    <script src='GLTFLoader.js'></script>
    <script src="./TrackballControls.js"></script>



    <title>GLFT Loader</title>
  </head>
  <body>
    <main>
      <section>
        <article>
          <header>
            <h1>GLFT Loader</h1>
          </header>
        </article>
        <div id="cube-container"></div>
        <nav id="cube-model-nav">
          <ul>
            <li><a id="load-cube-button" href='/load-cube'>load cube</a></li>
          </ul>
        </nav>
      </section>
    </main>

  <script>
  const material = new THREE.MeshBasicMaterial( { color: 0xFFFFFF } );
  const canvasEl = document.getElementById('cube-container');
  const containerWidth = canvasEl.offsetWidth;
  const containerHeight = canvasEl.offsetHeight;


  // create renderer
  const renderer = new THREE.WebGLRenderer(
    {
      antialias: true,
      alpha: true,
      autoClear: true,
      physicallyCorrectLights: true
    }
  );

  renderer.setPixelRatio(2);
  renderer.gammaOutput = true;
  renderer.gamaFactor = 2.2;
  renderer.setSize( containerWidth, containerHeight );
  canvasEl.appendChild( renderer.domElement );

  // create scene
  const scene = new THREE.Scene();

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

  // controls
  const controls = new THREE.OrbitControls( camera, renderer.domElement );
  controls.minZoom = 1;
  controls.maxZoom = 1.5;

  controls.enablePan = false;

  // ambient light
  const ambientLight = new THREE.AmbientLight( 0x404040, 0.001 );
  const hemisphericLight = new THREE.HemisphereLight({
    skyColor: 0xffffbb,
    groundColor: 0x080820,
    intensity: 0.25,
    position: {
      x: 0,
      y: 430,
      z: -2500
    }
  });



  const glTFLoadBow = (model) => {
    console.log('model: ', model);
    const glTFLoader = new THREE.GLTFLoader();
    glTFLoader.load('https://path-to/cube.glb', (glTF) => {
      console.log('glTF: ', glTF);
      scene.add(glTF.scene);
  },
  (xhr) => {
    console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
  },
  (error) => {
    console.log('an error occurred: ', error);
  });
};

  // draw Scene
  const renderThree = () => {
    camera.updateMatrixWorld();
    renderer.render( scene, camera );
  };

  // run loop (update, render, repeat)
  const animate = () => {
    requestAnimationFrame( animate );
    renderThree();
  };

  animate();

    const glTFLoadModel = (event) => {
      event.preventDefault();

      const model = event.target.text.toLowerCase();
      glTFLoadBow(model);
    }


    const loadCubeElement = document.querySelector('#load-cube-button');

    loadCubeElement.addEventListener('click', glTFLoadModel, false);

  </script>

  </body>
</html>

我已将cube.glb文件上传到https://gltf-viewer.donmccurdy.com/中，并且呈现效果完美。

我无法在计算机上查看/渲染它，也不知道为什么。

Answer 1

设置相机的位置可以解决此问题：

camera.position.set(0, 0, 5);

如何使用ThreeJS中的GLTFLoader渲染在Blender中创建的模型？

1 个答案: