threejs 渲染模型在屏幕上非常小答案

【问题标题】：threejs rendered model very small on screenthreejs 渲染模型在屏幕上非常小
【发布时间】：2022-01-03 11:29:39
【问题描述】：

大家好，我是三个 js 的新手，我目前正在尝试在我的屏幕上渲染 3d 模型。但是，我渲染的模型在屏幕上太小了，我正在尝试让它更大。目前渲染的物体太亮了，有没有办法让它变得不那么亮。有什么办法吗？

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>3d model</title>
    <style>
      body {
        margin: 0;
      }
      canvas {
        display: block;
      }
    </style>
  </head>
  <body>
    <script src="three.js"></script>
    <script type="module" src="GLTFLoader.js"></script>
    <script type="module">
      import { GLTFLoader } from "./GLTFLoader.js";

      var scene = new THREE.Scene();

      var camera = new THREE.PerspectiveCamera(
        75,
        window.innerWidth / window.innerHeight,
        0.01,
        1000
      );
      var renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);

      var loader = new GLTFLoader();

      var obj;
      loader.load("scene.gltf", function (gltf) {
        obj = gltf.scene;
        scene.add(gltf.scene);
      });
      scene.background = new THREE.Color(0xffffff);
      var light = new THREE.HemisphereLight(0xffffff, 0x000000, 10);
      scene.add(light);
      camera.position.set(0, 10, 20);
      function animate() {
        requestAnimationFrame(animate);
        obj.rotation.y += 0.01;
        renderer.render(scene, camera);
      }
      animate();
    </script>
  </body>
</html>

提前致谢！

【问题讨论】：

将相机移远点，还是缩放对象？
我要改变什么来实现这一点？

标签： three.js webgl

【解决方案1】：

但是，我渲染的模型在屏幕上太小了，我正在尝试让它更大。

只需将相机移近物体即可。在你的情况下开始：

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

另一种可能性是像这样缩放对象：

gltf.scene.scale.multiplyScalar( 2 );

目前渲染的物体太亮了，有没有办法让它不那么亮。

你的半球光强度太高了。只需删除第三个参数，以便使用默认值 1。此外，您通常不想使用黑色作为底色。

var light = new THREE.HemisphereLight(0xffffff, 0x444444);

【讨论】：