javascript - Three.js - 圆柱体内部纹理

Question

我对 Three.js 完全陌生，目前仅将其用于网站上的辅助功能。

我正在尝试渲染一个纸杯(或让人想起纸杯的东西)，其外侧和内侧具有不同的纹理。

到目前为止，我已经成功做到了类似的事情。使用键盘箭头向左<-->向右旋转。

Simple Demo

如何为杯子的内侧(红色箭头所指的位置)添加不同的纹理。 没有纹理，旋转看起来有点奇怪。 我很乐意听到任何关于如何在视觉方面做得更好的建议

谢谢

Answer 1

只是一个如何做到这一点的概念:

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 3, 5);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setClearColor(0xffffff);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

var geometry = new THREE.CylinderGeometry(2, 1.5, 4, 32, 1, true);
var materialOuter = new THREE.MeshBasicMaterial({
  map: new THREE.TextureLoader().load("https://threejs.org/examples/textures/758px-Canestra_di_frutta_(Caravaggio).jpg")
});
var materialInner = new THREE.MeshBasicMaterial({
  map: new THREE.TextureLoader().load("https://threejs.org/examples/textures/UV_Grid_Sm.jpg"),
  side: THREE.BackSide
});

var meshOuter = new THREE.Mesh(geometry, materialOuter);
var meshInner = new THREE.Mesh(geometry, materialInner);
meshOuter.add(meshInner);
scene.add(meshOuter);

render();

function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/93/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>