Three.js - 圆柱内部纹理

Question

我对Three.js完全不熟悉，现在只将它用于网站的侧面功能。

我正试图在外侧和内侧渲染一个纸杯（或提醒纸杯的东西）。

到目前为止，我已经设法做了类似的事情。向左旋转＆lt; - ＆gt;正确使用键盘箭头。

Simple Demo

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

谢谢

Answer 1

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

＆＃13;

＆＃13;

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);
}

＆＃13;

body {
  overflow: hidden;
  margin: 0;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

作为@ prisoner849的答案的替代方法，您可以使用自定义着色器材质并检查渲染的片段是否为背面并为其提供自己的颜色（纹理......）

vec3 frontMaterial = vec3(1.0, 0.0, 0.0); //red
vec3 backMaterial = vec3(0.0, 1.0, 0.0);  //green

//make every fragment green
gl_FragColor = vec4( frontMaterial, 1.0 );
//make fragments green when on the inner side of the object model
if (!gl_FrontFacing) gl_FragColor = vec4(backMaterial, 1.0);

Here's a live example