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

Question

大家好，我是三个 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>

提前致谢！

Answer 1

however, the model i rendered is too small on the screen, i am trying to make it bigger.

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

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

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

gltf.scene.scale.multiplyScalar( 2 );

Currently the rendered object is too bright, is there anyway to make it less brighter.

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

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

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

threejs rendered model very small on screen

three.js

webgl