我想将骰子纹理映射到THREE.js中的多维数据集的表面上。我正在使用六面uv展开。我想将此uv解包映射到多维数据集以创建骰子模型。我尝试使用此代码在多维数据集的不同面上添加不同的材料：
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>但是我得到了这个错误：{“ message”：“脚本错误。”，“ filename”：“”，“ lineno”：0，“ colno”：0}。如何将纹理应用于立方体？
似乎您发现了一个过时的示例，所以我已根据最新版本更改了您的代码：
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>