How to add png texture in 3d model

Questions
1

i have a 3d model and a texture png . how can i add textures to the model

2

Define “add”.

Models can’t have textures - models have materials. Materials have various textures.

The best of texturing a model would be by using 3D modelling software - while it’s possible to add textures and materials via code, it’s a bit risky in a long run - separating assets from code is generally a good practice.

1 Like
3 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Textured Cube</title>
	<style>
		body {
			margin: 0;
		}

		canvas {
			display: block;
		}
	</style>
</head>
<body>
	<script src="https://cdn.jsdelivr.net/npm/three@latest/build/three.min.js"></script>
	<script>
		// Create the scene
		var scene = new THREE.Scene();
		scene.background = new THREE.Color(0x0000ff); //

		// Create the camera
		var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
		camera.position.z = 2;

		// Create the renderer
		var renderer = new THREE.WebGLRenderer();
		renderer.setSize(window.innerWidth, window.innerHeight);
		document.body.appendChild(renderer.domElement);

		// Define the textures
		var textureUrls = [
			'vecteezy_fire-explode-png-design_9374808_54.png', // Replace with your texture image URLs
			'vecteezy_fire-explode-png-design_9374808_54.png',
			'vecteezy_fire-explode-png-design_9374808_54.png',
			'vecteezy_fire-explode-png-design_9374808_54.png',
			'vecteezy_fire-explode-png-design_9374808_54.png',
			'vecteezy_fire-explode-png-design_9374808_54.png'
		];

		// Load the textures
		var textures = [];
		var textureLoader = new THREE.TextureLoader();
		for (var i = 0; i < 6; i++) {
			textures.push(textureLoader.load(textureUrls[i]));
		}

		// Create the cube geometry
		var cubeGeometry = new THREE.BoxGeometry(1, 1, 1);

		// Create the materials with textures
		var materials = [];
		for (var i = 0; i < 6; i++) {
			materials.push(new THREE.MeshBasicMaterial({ map: textures[i], transparent: true }));
		}

		// Create the cube mesh with the materials
		var cube = new THREE.Mesh(cubeGeometry, materials);

		// Add the cube to the scene
		scene.add(cube);

		// Render loop
		function animate() {
			requestAnimationFrame(animate);
			cube.rotation.x += 0.01;
			cube.rotation.y += 0.01;
			renderer.render(scene, camera);
		}

		// Start the animation
		animate();
	</script>
</body>
</html>

vecteezy_fire-explode-png-design_9374808_54
vecteezy_fire-explode-png-design_9374808_543840Ă—2160 960 KB

1 Like