hey guys i am new to three.js and i am trying to change my texture using Meshmatcap material. however, i am facing an issue where i change the texture, my model texture and color would disappear after adding skinning: true , which is necessary for my model to retain size . is there any way to solve this issue? thanks in advance. currently using the model from https://sketchfab.com/3d-models/tyrannosaurus-rex-9d3a3e42c0054c35aa39c3ee07388d16
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>
</head>
<body>
<script type="module">
import * as THREE from 'https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js';
import { OrbitControls } from 'https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/controls/OrbitControls.js';
import { GLTFLoader } from 'https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/loaders/GLTFLoader.js';
import { RGBELoader } from 'https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/loaders/RGBELoader.js';
var container, controls;
var camera, scene, renderer, mixer, clock;
var obj , material , texture , mesh
init();
animate();
function init() {
container = document.getElementById( 'test' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.01, 1000 );
camera.position.x = 0
camera.position.y = 2
camera.position.z = 10
scene = new THREE.Scene();
// scene.background = new THREE.Color(0xffffff);
var light = new THREE.HemisphereLight(0xffffff,0x000000,10);
scene.add(light);
clock = new THREE.Clock();
var loader = new GLTFLoader();
// Load a glTF resource
loader.load('scene.gltf', function ( gltf ) {
var textureLoader = new THREE.TextureLoader();
mesh = gltf.scene.children[0]
console.log(mesh)
var texture = textureLoader.load('blue1.jpg');
// texture.minFilter = THREE.LinearFilter;
var matcapMaterial = new THREE.MeshMatcapMaterial({ skinning: true ,normalMap: texture })
obj = scene.add( mesh );
obj.traverse((o) => {
if (o.isMesh) o.material = matcapMaterial
;
})
;
mixer = new THREE.AnimationMixer( mesh );
gltf.animations.forEach( ( clip ) => {
mixer.clipAction( clip ).play();
} );
} );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 0.8;
renderer.outputEncoding = THREE.sRGBEncoding;
container.appendChild( renderer.domElement );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
//
function animate() {
requestAnimationFrame( animate );
var delta = clock.getDelta();
if ( mixer ) mixer.update( delta );
renderer.render( scene, camera );
}
</script>
<div id="test">
</div>
</body>
</html>
When replacing textures of glTF asset with manually loaded textures, you have to set the Texture.flipY property to false in order to accommodate the uv convention of glTF.
This circumstance is also mentioned in the documentation page of THREE.GLTFLoader.