Gltf photogrammetry

Questions
,
1

Hello,
Trying to load a glb file with unLit texture, since I don’t need lighting on this model. Just flat colors…
how can I define this?
please help

Capture
Capture993×862 75.8 KB

Here’s the JS:

Blockquote

import * as THREE from ‘three’
import { OrbitControls } from ‘three/examples/jsm/controls/OrbitControls.js’
import * as dat from ‘dat.gui’
import { BufferGeometry, Loader, WireframeGeometry } from ‘three’
import { GLTFLoader } from ‘three/examples/jsm/loaders/GLTFLoader.js’;

// Debug
const gui = new dat.GUI()

// Canvas
const canvas = document.querySelector(‘canvas.webgl’)

// Scene
const scene = new THREE.Scene()

// Objects
const geometry = new THREE.TorusGeometry( .7, .2, 16, 100 )
//GLTF
const loader = new GLTFLoader()
loader.load(
// resource URL
‘assets/model.glb’,
// called when the resource is loaded
function ( gltf ) {
gltf.scene.scale.set(0.1,0.1,0.1);
gltf.scene.position.set(0,-2,0);
const load = gltf.scene;
scene.add(load);
// gltf.animations; // Array<THREE.AnimationClip>
// gltf.scene; // THREE.Group
// gltf.scenes; // Array<THREE.Group>
// gltf.cameras; // Array<THREE.Camera>
// gltf.asset; // Object

},
// called while loading is progressing
function ( xhr ) {

	console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );

},
// called when loading has errors
function ( error ) {

	console.log( 'An error happened' );

}

);

const material = new THREE.MeshNormalMaterial;
material.color = new THREE.Color(0xff0000)

// Mesh
const ring = new THREE.Mesh(geometry,material)
ring.position.set (0,3,0);
scene.add(ring)

// Lights
const dirlight = new THREE.DirectionalLight(0xffffff, 0.9);

const pointLight = new THREE.PointLight(0xffffff, 0.5)
pointLight.position.x = 2
pointLight.position.y = 3
pointLight.position.z = 4
scene.add(pointLight)
scene.add(dirlight)
/**

  • Sizes
    */
    const sizes = {
    width: window.innerWidth,
    height: window.innerHeight
    }

window.addEventListener(‘resize’, () =>
{
// Update sizes
sizes.width = window.innerWidth
sizes.height = window.innerHeight

// Update camera
camera.aspect = sizes.width / sizes.height
camera.updateProjectionMatrix()

// Update renderer
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))

})

const axes = new THREE.AxesHelper(5);
scene.add(axes)
/**

  • Camera
    */
    // Base camera
    const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100)
    camera.position.x = 3
    camera.position.y = 20
    camera.position.z = 2
    //camera.rotation.z = Math.PI / 5
    scene.add(camera)

// Controls
const controls = new OrbitControls(camera, canvas)
controls.enableDamping = true

/**

  • Renderer
    */
    const renderer = new THREE.WebGLRenderer({
    canvas: canvas
    })
    renderer.outputEncoding = THREE.sRGBEncoding;

renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
renderer.shadowMap.enabled = true

const clock = new THREE.Clock()

const tick = () =>
{

const elapsedTime = clock.getElapsedTime()

// Update objects
ring.rotation.y = .5 * elapsedTime

// Update Orbital Controls
// controls.update()

// Render
renderer.render(scene, camera)

// Call tick again on the next frame
window.requestAnimationFrame(tick)

}

tick()

2

We can’t run your code or see a demo, so please share details about what is happening vs. what you expect to happen. Is there any error? Is the model lit when it should not be? What is not working?

3

It looks like a shadowmap is active in your scene to me. Shadows off of the cars, buildings, back of the mesh textures are darker, etc. You are also using a directional and point light. If you don’t need shadows then turn off the directional and point lighting and switch to a MeshBasicMaterial. Apply your textures as material env maps or whatever. Then you can ditch the lights. Others may chime in with more useful info.

4

If the glTF model does not already use MeshBasicMaterial (I can’t tell here) then you could also convert its materials:

npm install --global @gltf-transform/cli

gltf-transform unlit input.glb output.glb

Lights and environment maps should not affect THREE.MeshBasicMaterial.

1 Like
5

Thank Don! this works nicely:)
What does this do exactly, just for the learning

6

The glTF format has an extension, KHR_materials_unlit, that specifies when a material should be “unlit” or “shadeless”. The command above adds the extension to all materials in your model, and three.js then interprets the materials as THREE.MeshBasicMaterial instead of THREE.MeshStandardMaterial.