Multiple textures on a CylinderGeometry

Questions
1

I’m trying to put together a slot machine to help with random decisions. I’m trying to use CylinderGeometry for the slot wheels, and I’d like to assign an image to each face around the edge of the cylinder. I can’t seem to find many examples of this kind of use case, and I’m starting to suspect I may need to assemble a custom geometry object to do this. I threw what I’ve got into a JSFiddle, http://jsfiddle.net/zg9se0cw/4/ if you’d like to take a look. I’m sure the problem is in my generateMesh() or generateCylinders() function.

I have seen some COR violationg trying to use simple .png files, even locally. So I’m not sure I’m using them right.

Any help would be appreciated. Thank You.

2

You should consider to create your geometry in a content creation tool like Blender. This approach makes it potentially easier to authoring your data (uvs, textures etc.), preview everything and then import it in your application. If you still want to work with CylinderGeometry, you should make yourself familiar with the underlying uv data. The following example might help here (it contains a CylinderGeometry).

https://threejs.org/examples/#webgl_geometries

3

I’m not sure if my addon
(see https://discourse.threejs.org/t/addon-produces-almost-infinite-many-time-varying-geometries-with-functions/
and
http://sandbox.threejs.hofk.de/ )
is a solution in this case. If I have understood the question correctly, the cylinder should have ten different textures.

20171115-1423-55678

There are only two images in the sandbox, otherwise there are colors. This can be changed at any time. See the examples and their simple code.

4

Maybe a single texture is enough?
A really simple example:wheel

Try it out at http://threejs.hofk.de/

Code:

<!DOCTYPE html>
<!--   *** wheel ***
/**
 * @author hofk
*/
-->
<html lang="de">
<head>
	<title> numberwheel  </title>
	<meta charset="utf-8" />
</head>
<body> 	

</body>
	<script src="three.min.88.js"></script>
	<script src="OrbitControls.js"></script>
	<script src="THREEx.WindowResize.js"></script>
<script>

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 20000 );
camera.position.set( 250, 100, 60 );
var renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor( 0xdddddd, 1 );	
var container = document.createElement( 'div' );
document.body.appendChild( container );
container.appendChild( renderer.domElement ); 
THREEx.WindowResize( renderer, camera );
var controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.enableZoom = true;
var clock  = new THREE.Clock( true );	
var time;

// material
var uvTex	= new THREE.TextureLoader().load( "uvgrid_w_0_9 .jpg" );
var material = new THREE.MeshBasicMaterial( { map: uvTex, side: THREE.DoubleSide } );
var geometry = new THREE.CylinderGeometry(80, 80, 80, 10, 1, true);

// mesh
var mesh1 = new THREE.Mesh( geometry, material );
scene.add( mesh1 );
mesh1.rotation.x = 1.57;

animate();

function animate() {

	requestAnimationFrame( animate );	
	time = clock.getElapsedTime();

	mesh1.rotation.y = 0.4 * time;

	renderer.render( scene, camera );
	controls.update();
	
}
</script>

</html>

Change the Map:

uvgrid_w_0_9

2 Likes