模型显示效果问题

家园 论坛 一般的问题 模型显示效果问题

  • 该话题包含 0个回复,1 人参与,最后由harold 更新于 4月前
正在查看 1 个帖子:1-1 (共 1 个帖子)
  • 作者
    帖子
  • #797
    harold
    参与者

    你好
    我们在使用VERGE3D显示模型时,发现显示的效果不一样。
    第一种方式:使用v3d.app如下代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
      <script src="v3d.js"></script>
      <link rel="stylesheet" type="text/css" href="building-001.css">
    </head>
    <body>
    <div id="v3d-container">
    </div>
    <script>
        const url = 'building-001.gltf';
        const app = new v3d.App('v3d-container', {}, new v3d.SimplePreloader({ container: 'v3d-container' }));
        app.loadScene(url, function() {
            app.enableControls();
            app.run();
          
        });
    </script>
    </body>
    </html>

    效果图见附件【第1种】
    第二种方式,是使用v3d的库,代码如下

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <link rel="stylesheet" type="text/css" href="building-001.css">
      <title>My first Verge3D app</title>
      <style>
        body { margin: 0; }
        canvas { width: 100%; height: 100% }
      </style>
    </head>
    <body>
    <script src="v3d.js"></script>
    <script>
      const scene = new v3d.Scene();
      const camera = new v3d.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 2000);
      const renderer = new v3d.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);
    
      const loader = new v3d.GLTFLoader();
      loader.load(
              'building-001.gltf',
              function(gltf) {
                scene.add(gltf.scene);
              },
              function(xhr) {
                console.log((xhr.loaded / xhr.total * 100) + '% loaded');
              },
              function(error) {
                console.log('An error happened');
              }
      );
    
      camera.position.z = 5;
      var ambient = new v3d.AmbientLight(0xffffff, 1);
      scene.add(ambient)
    
      var controls = new v3d.OrbitControls(camera,renderer.domElement);
      controls.enablePan = true;
      controls.maxPolarAngle = Math.PI / 2;
      controls.minPolarAngle = Math.PI / 5;
      controls.enableZoom = true;
      controls.maxDistance = 1500;
      controls.minDistance = 0;
      controls.enableRotate = true;
      controls.update();
      
      function animate() {
        requestAnimationFrame(animate);
        controls.update();
        renderer.render(scene, camera);
      }
    
      animate();
      
    </script>
    </body>
    </html>
    

    效果图见附件【第2种】
    都是使用v3d的库,为什么会出现显示效果不一样呢?差在哪里?我们想要的是第1种效果,但是想使用第2种方式,如何修改第2种方式产生第1种效果呢?
    另外我们发现第1种方式操作模型很卡,显卡GPU利用率很高,而第2种方法操作不卡,很流畅,这个差异是因为使用了v3d.app类造成的吧?这个类占用资源太多吗?

    • 该话题由harold 于 4月前 修正。
    附件:
    您需要登录才能查看附件。
正在查看 1 个帖子:1-1 (共 1 个帖子)
  • 哎呀,回复话题必需登录。