ShaneBrumback/threejs-examples-adding-transparent-png-images-to-3d-objects.html

## threejs-examples-adding-transparent-png-images-to-3d-objects.html
<!--////////////////////////////////////////////////////////////////////////////////////////
///                                                                                      ///
///  Example Using Three.js Library, HTML, CSS & JavaScript                              ///
//   3D Interactive Web Apps & Games   2021-2024                                         ///
///  Contact Shane Brumback https://www.shanebrumback.com                                ///
///  Send a message if you have questions about this code                                ///
///  I am a freelance developer. I develop any and all web.                              ///
///  Apps Websites 3D 2D CMS Systems etc. Contact me anytime :)                          ///
///                                                                                      ///
////////////////////////////////////////////////////////////////////////////////////////////-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three.js Examples - Adding Transparent PNG Images To 3D Cube</title>
    <style>
        body {
            color: white;
            text-align: center;
            margin: 0;
            background-color: black
        }

        a {
            text-decoration: none;
            color: white;
        }

        h1 {
            padding: 10px;
        }
    </style>

</head>
<body>
    <a href="http://www.shanebrumback.com/threejs-examples/adding-transparent-png-textures-to-3d-objects.html">
        <h1>Three.js Examples - Adding Transparent PNG Images to a 3D Cube</h1>
    </a>

    <!--Load the latest version of Three.js from CDN-->
    <script src="https://cdn.jsdelivr.net/npm/three@latest/build/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@latest/examples/js/controls/OrbitControls.js"></script>

    <script type="module">

        // 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, .1, 1000);
        camera.position.z = 2;

        // Create the renderer
        var renderer = new THREE.WebGLRenderer({ alpha: true, depth: true });
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.toneMapping = THREE.ReinhardToneMapping;
        renderer.setClearColor(0x000000); // Set background color to black
        renderer.domElement.style.position = 'fixed';
        renderer.domElement.style.zIndex = '-1';
        renderer.domElement.style.left = '0';
        renderer.domElement.style.top = '0';
        document.body.appendChild(renderer.domElement);

        window.addEventListener('resize', onWindowResize);

        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        }

        // Define the textures
        var textureUrls = [
            '/images/smiley.png', // Replace with your texture image URLs
            '/images/smiley.png',
            '/images/smiley.png',
            '/images/smiley.png',
            '/images/smiley.png',
            '/images/smiley.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({
                color: 'yellow',
                map: textures[i],
                transparent: true,
                depthTest: true,
                depthWrite: false // Enable depth writing
            }));
        }

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

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

        // Add orbit controls
        var controls = new THREE.OrbitControls(camera, renderer.domElement);
        controls.enableDamping = true;
        controls.dampingFactor = 0.05;

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

        // Start the animation
        animate();


    </script>


</body>
</html>
	<!--////////////////////////////////////////////////////////////////////////////////////////
	/// ///
	/// Example Using Three.js Library, HTML, CSS & JavaScript ///
	// 3D Interactive Web Apps & Games 2021-2024 ///
	/// Contact Shane Brumback https://www.shanebrumback.com ///
	/// Send a message if you have questions about this code ///
	/// I am a freelance developer. I develop any and all web. ///
	/// Apps Websites 3D 2D CMS Systems etc. Contact me anytime :) ///
	/// ///
	////////////////////////////////////////////////////////////////////////////////////////////-->

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Three.js Examples - Adding Transparent PNG Images To 3D Cube</title>
	<style>
	body {
	color: white;
	text-align: center;
	margin: 0;
	background-color: black
	}

	a {
	text-decoration: none;
	color: white;
	}

	h1 {
	padding: 10px;
	}
	</style>

	</head>
	<body>
	<a href="http://www.shanebrumback.com/threejs-examples/adding-transparent-png-textures-to-3d-objects.html">
	<h1>Three.js Examples - Adding Transparent PNG Images to a 3D Cube</h1>
	</a>

	<!--Load the latest version of Three.js from CDN-->
	<script src="https://cdn.jsdelivr.net/npm/three@latest/build/three.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/three@latest/examples/js/controls/OrbitControls.js"></script>

	<script type="module">

	// 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, .1, 1000);
	camera.position.z = 2;

	// Create the renderer
	var renderer = new THREE.WebGLRenderer({ alpha: true, depth: true });
	renderer.setPixelRatio(window.devicePixelRatio);
	renderer.setSize(window.innerWidth, window.innerHeight);
	renderer.toneMapping = THREE.ReinhardToneMapping;
	renderer.setClearColor(0x000000); // Set background color to black
	renderer.domElement.style.position = 'fixed';
	renderer.domElement.style.zIndex = '-1';
	renderer.domElement.style.left = '0';
	renderer.domElement.style.top = '0';
	document.body.appendChild(renderer.domElement);

	window.addEventListener('resize', onWindowResize);

	function onWindowResize() {
	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();
	renderer.setSize(window.innerWidth, window.innerHeight);
	}

	// Define the textures
	var textureUrls = [
	'/images/smiley.png', // Replace with your texture image URLs
	'/images/smiley.png',
	'/images/smiley.png',
	'/images/smiley.png',
	'/images/smiley.png',
	'/images/smiley.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({
	color: 'yellow',
	map: textures[i],
	transparent: true,
	depthTest: true,
	depthWrite: false // Enable depth writing
	}));
	}

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

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

	// Add orbit controls
	var controls = new THREE.OrbitControls(camera, renderer.domElement);
	controls.enableDamping = true;
	controls.dampingFactor = 0.05;

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

	// Start the animation
	animate();


	</script>


	</body>
	</html>