如何将纹理应用于立方体

Question

我想在 THREE.js 中将骰子纹理映射到立方体的面上，使用六面 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": "Script error.","filename": "","lineno": 0,"colno": 0}.

如何将纹理应用于立方体？

Answer 1

看来你找到了一个过时的例子，所以我已经根据最新版本更改了你的代码：

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

cube

texture-mapping

three.js