Apply texture to a .ctm file

Questions
, ,
1

I’m working on a project and it needs a texture to be applied on an object, which is a .ctm file. I tried loading the texture, but the intended result isn’t appearing.
In my project, I loaded a .ctm 3d file from my desktop and I want to apply a texture on it.
To apply the texture, I imported a “net” like image similar to the cloth here: https://threejs.org/examples/#webgl_animation_cloth.

But the texture remains solid in my project, instead of showing a net like structure. Can anyone help me with this?

My code for loading the texture and .ctm file is:

var myTexture = new THREE.TextureLoader().load( "**resources/textures/circuit_pattern.png**" );
					
loader.load('**resources/sample3d.ctm**', function(geometry) {
   tempObject = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial( { 
          map: myTexture , 
          side: THREE.DoubleSide,
          alphaTest: 0.5** 
    } ) ); 
   tempObject.name = 'myObject';
   scene.add( tempObject );
   objectOpacitySlider(name, 'enable');
   objects.push( tempObject );
   myObject = tempObject; 
   myObject.position.set(-0.000000001, 0, 0);
});
2

Can you also share your scene config / lights setup too, please?

3

I’m not really familiar with the CTM format, but note that your model will need to have UVs (geometry.attributes.uv) for it to work with a texture.

4

Hi Chris,

Here’s my code for

Lights:

 scene.add( new THREE.AmbientLight( 0x777777 ) );
 spotlight = new THREE.DirectionalLight( 0xF0F5FA, 0.12 );
 scene.add( spotlight );
 addShadowedLight( -1, 1, 1, 0xF0F5FA, 0.3 );
 addShadowedLight( 0.5, 1, -1, 0xF0F5FA, 0.3 );

Camera:

 camera = new THREE.PerspectiveCamera( 35, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
 camera.position.set( 0, 0, -350);
 cameraTarget = new THREE.Vector3( -250, 0, 0 );
 cameraTarget = new THREE.Vector3( 0, 0, 0 );

Scene:

var SCREEN_WIDTH = document.getElementById('container').clientWidth, SCREEN_HEIGHT = document.getElementById('container').clientHeight;

scene = new THREE.Scene();
var textureCube = new THREE.TextureLoader().load('textures/cube/blue/b2.jpg');
scene.background = textureCube;