How to apply a texture to a cube

Question

I want to map a dice texture onto the faces of a cube in THREE.js, using a six-side uv unwrap to map it onto the cube to make a dice model.

I tried to add different materials on different sides of the cube, using this code:

 document.addEventListener("DOMContentLoaded", function(){ var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight, 1,10000); var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); camera.position.z = 1000; var loader = new THREE.TextureLoader(); var leftSide = new loader.load("https://th.bing.com/th/id/OIP.OB8xNviXvEcA3WNU-7RIRQHaHa?w=228&h=219&c=7&o=5&pid=1.7"); var rightSide = new loader.load("https://th.bing.com/th/id/OIP.osXPM7NHeNro5XF3MDVZWgHaHa?w=213&h=213&c=7&o=5&pid=1.7"); var topSide = new loader.load("https://th.bing.com/th/id/OIP.eolV3-TnCn6QrLAuuAa5zAHaHa?w=206&h=203&c=7&o=5&pid=1.7"); var bottomSide = new loader.load("https://th.bing.com/th/id/OIP.eM85mOKZcT8ufGMqUVxKmAHaHa?w=230&h=220&c=7&o=5&pid=1.7"); var frontSide = new loader.load("https://th.bing.com/th/id/OIP.sMkR0TyI2E7vER-CZFe-awHaHa?w=224&h=219&c=7&o=5&pid=1.7"); var backSide = new loader.load("https://th.bing.com/th/id/OIP.Pn_7h3NqUQTVrQF4wn1YkQHaHa?w=218&h=208&c=7&o=5&pid=1.7"); var materials = [leftSide, rightSide, topSide, bottomSide, frontSide, backSide]; var geometry = new THREE.BoxBufferGeometry(100, 100, 100, materials); var material = new THREE.MeshFaceMaterial(); var Mesh = new THREE.Mesh(geometry, material); scene.add(Mesh); function loop(){ Mesh.rotation.x ++; Mesh.rotation.y ++; Mesh.rotation.z ++; renderer.render(scene, camera); requestAnimationFrame(loop); }; requestAnimationFrame(loop); });

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Dice Roller</title> </head> <body> <script src = "https://cdnjs.cloudflare.com/ajax/libs/three.js/r82/three.min.js"></script> </body> </html>

But I got this error:

{"message": "Script error.","filename": "","lineno": 0,"colno": 0}.

How do I apply a texture to a cube?

Answer 1

Seems you found an outdated example, so I've changed your code in accordance to the latest release:

 var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000); var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); camera.position.z = 200; var loader = new THREE.TextureLoader(); var paths = [ "https://th.bing.com/th/id/OIP.OB8xNviXvEcA3WNU-7RIRQHaHa?w=228&h=219&c=7&o=5&pid=1.7", "https://th.bing.com/th/id/OIP.osXPM7NHeNro5XF3MDVZWgHaHa?w=213&h=213&c=7&o=5&pid=1.7", "https://th.bing.com/th/id/OIP.eolV3-TnCn6QrLAuuAa5zAHaHa?w=206&h=203&c=7&o=5&pid=1.7", "https://th.bing.com/th/id/OIP.eM85mOKZcT8ufGMqUVxKmAHaHa?w=230&h=220&c=7&o=5&pid=1.7", "https://th.bing.com/th/id/OIP.sMkR0TyI2E7vER-CZFe-awHaHa?w=224&h=219&c=7&o=5&pid=1.7", "https://th.bing.com/th/id/OIP.Pn_7h3NqUQTVrQF4wn1YkQHaHa?w=218&h=208&c=7&o=5&pid=1.7" ] materials = []; // an array of materials you'll pass into the constructor of THREE.Mesh paths.forEach(path => { materials.push( new THREE.MeshBasicMaterial({ map: loader.load(path) })); }); var geometry = new THREE.BoxBufferGeometry(100, 100, 100); var Mesh = new THREE.Mesh(geometry, materials); scene.add(Mesh); function loop() { Mesh.rotation.x += 0.01; Mesh.rotation.y += 0.02; Mesh.rotation.z += 0.03; renderer.render(scene, camera); requestAnimationFrame(loop); }; requestAnimationFrame(loop);

 body { overflow: hidden; margin: 0; }

 <script src="https://threejs.org/build/three.min.js"></script>

How to apply a texture to a cube

Question

1 answers

solution1
1 ACCPTED 2020-03-21 21:17:04

How to apply a texture to a cube

Question

1 answers

solution1 1 ACCPTED 2020-03-21 21:17:04

solution1
1 ACCPTED 2020-03-21 21:17:04