Question

我有一个像这样的圆柱体：

var geometry = new THREE.CylinderGeometry( 50, 50, 2, 128 );

它是一个扁平的圆柱体，就像一枚硬币。当我发布displaMap＆amp; normalMap，我最终得到了圆柱体两侧的纹理，但我只希望地图位于一侧。

我该怎么做？

Answer 1

对于轴的THREE.CylinderGeometry分离材料，可以设置顶部平面和底部平面：

var material1 = new THREE.MeshBasicMaterial({color:'#ff0000'});
var material2 = new THREE.MeshBasicMaterial({color:'#00ff00'});
var material3 = new THREE.MeshBasicMaterial({color:'#0000ff'});
var materialList = [material1, material2, material3];

var geometry = new THREE.CylinderGeometry( 50, 50, 2, 128 );
var mesh = new THREE.Mesh(geometry, materialList);

请参阅代码段：

(function onLoad() {
  var container, loader, camera, scene, renderer, controls, mesh;
  
  init();
  animate();

  function init() {
    container = document.getElementById('container');
    
    renderer = new THREE.WebGLRenderer({
      antialias: true
    });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.shadowMap.enabled = true;
    container.appendChild(renderer.domElement);

    camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
    camera.position.set(0, -100, -100);

    scene = new THREE.Scene();
    scene.background = new THREE.Color(0xffffff);
    scene.add(camera);
    window.onresize = resize;
  
    scene.add(camera);
    window.onresize = resize;
		
    var material1 = new THREE.MeshBasicMaterial({color:'#ff0000'});
    var material2 = new THREE.MeshBasicMaterial({color:'#00ff00'});
    var material3 = new THREE.MeshBasicMaterial({color:'#0000ff'});
    var materialList = [material1, material2, material3];

    var geometry = new THREE.CylinderGeometry( 50, 50, 2, 128 );
    mesh = new THREE.Mesh(geometry, materialList);

    scene.add(mesh);
    
    controls = new THREE.OrbitControls(camera, renderer.domElement);
  }

  function resize() {
    
    var aspect = window.innerWidth / window.innerHeight;
    renderer.setSize(window.innerWidth, window.innerHeight);
    camera.aspect = aspect;
    camera.updateProjectionMatrix();
  }

  function animate() {
    mesh.rotation.x += 0.01;
    requestAnimationFrame(animate);
    render();
  }

  function render() {
    renderer.render(scene, camera);
  }
})();

<script src="https://threejs.org/build/three.min.js"></script>
<!--script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/89/three.min.js"></script-->
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

<div id="container"></div>

Answer 2

使用CylinderGeometry的thetaLength选项将其分为两部分。

// Create two half-cylinders.
var part1 = new THREE.CylinderGeometry( 50, 50, 2, 128, 1, false, 0, Math.PI );
var part2 = new THREE.CylinderGeometry( 50, 50, 2, 128, 1, false, Math.PI, Math.PI );

// Add the half-cylinders to a group, with different materials on each.
var group = new THREE.Group();
group.add( new THREE.Mesh( part1, material1 ) );
group.add( new THREE.Mesh( part2, material2 );

如果您需要比此更多的自定义控件，您可能希望使用像Blender这样的建模程序来设置UV并对圆柱进行纹理处理。

将位移/法线贴图指定给圆柱体的单侧

2 个答案: