PointsMaterial smaller than glb

Hi, I am trying to get points as material of a glb. When loading the glb everything is great:

but when adding PointsMaterial I get a very tiny 3D:

Here is my code:

import './style.css'
import * as THREE from 'three';
import { WebGLRenderer } from 'three';

import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

let camera, scene, renderer;

let controls;


function init() {
  // camara
  camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.set(1, 1, 1);
  scene = new THREE.Scene();
  const loader = new GLTFLoader();
    'meshes/cara_01.glb', function (gltf) {
      const object = gltf.scene;

      object.position.set(0, 0, 0);

      let material = new THREE.PointsMaterial(
          color: 0xFFFFFF,
          size: 0.00125,
          opacity: 0.5,
      let mesh = new THREE.Points(object.children[0].geometry, material);


  const light = new THREE.AmbientLight(0x404040); // soft white light
  light.position.set(0, 0, 0);

  const pointLight = new THREE.PointLight(0xff0000, 1, 100);
  pointLight.position.set(1, 1, 1);

  renderer = new WebGLRenderer({ antialias: true });
  renderer.setSize(window.innerWidth, window.innerHeight);
  window.addEventListener('resize', onWindowResize);

  controls = new OrbitControls(camera, renderer.domElement);

//responsive canvas
function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  renderer.setSize(window.innerWidth, window.innerHeight);

function animate() {
  renderer.render(scene, camera);

The mesh won’t change its size if I change the object scale nor if I change the mesh scale… any ideas on how to handle this?
Thanks in advance <3

Um, that is strange. Any chances to share link to your application for testing? Maybe as some sort of editable live example (three.js dev template - module - JSFiddle - Code Playground)?

Otherwise it could already help to share the glTF asset so it’s possible to reproduce the issue locally.

Thanks so much for your reply @Mugen87 (I feel like talking to a rockstar :star_struck:). You can find a live version here, feel free to change object.visible to true if you want to see the glb… Thanks for looking into this :pray:

1 Like

It seems setting the scale on mesh level solves the issue. Try it with:

mesh.scale.setScalar( 10 );

I’ve increased the point size a bit so it’s easier to see the shape.

Live demo: three.js dev template - module - JSFiddle - Code Playground