PointsMaterial smaller than glb

Questions
,
1

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

image
image1919×1016 40.5 KB

but when adding PointsMaterial I get a very tiny 3D:
image
image1920×1016 15 KB

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;

init();

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

      object.position.set(0, 0, 0);
      //scene.add(object);

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

      scene.add(mesh);
    });


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

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

  //renderer
  renderer = new WebGLRenderer({ antialias: true });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setAnimationLoop(animate)
  document.body.appendChild(renderer.domElement);
  window.addEventListener('resize', onWindowResize);

  //controles
  controls = new OrbitControls(camera, renderer.domElement);
  controls.update();
}

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

function animate() {
  controls.update();
  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

2

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.

3

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
4

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

3 Likes