模型显示效果问题 - Soft8Soft

标签：模型显示效果问题

该话题包含 0个回复，1 人参与，最后由harold 更新于 1年、 1月前。

正在查看 1 个帖子：1-1 (共 1 个帖子)

作者

帖子

8月 3, 2022 10:47 上午 #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类造成的吧？这个类占用资源太多吗？