1

hey guys i am new to three js and i am currently trying to render a 3d model on my sccreen. however, the model i rendered is too small on the screen, i am trying to make it bigger. Currently the rendered object is too bright, is there anyway to make it less brighter. is there anyway to do that?

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>

thanks in advance!

2
  • Move the camera further away, or scale the object? Nov 25 '21 at 7:08
  • what do i change to achieve that?
    – user17354812
    Nov 25 '21 at 8:46
1

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

Just move the camera closer to the object. In your case start with:

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

Another possibility is to scale the object like so:

gltf.scene.scale.multiplyScalar( 2 );

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

The intensity of your hemisphere light is way too high. Just remove the third argument so you use the default value 1. Also you normally don't want to use black as the ground color.

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy