Question

我正在使用Three.js进行基本3D圆柱体渲染。我正在使用TextureLoader加载纹理异步（基于UI交互）。一切都很好，但我希望不要将这些纹理应用于圆柱体顶部/底部。

我该如何实现？

这是我到目前为止所做的：

function threeJsRenderer() {
  var width = 325;
  var height = 375;
  var scene = new THREE.Scene();
  var camera = new THREE.OrthographicCamera(width / - 2, width / 2, height / 2, height / - 2, -200, 1000);

  var renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
  renderer.setClearColor( 0x000000, 0 );
  renderer.setSize(width,height);
  document.getElementById('projection').appendChild(renderer.domElement);

  // CylinderGeometry(radiusTop : Float, radiusBottom : Float, height : Float, radialSegments : Integer, heightSegments : Integer, openEnded : Boolean, thetaStart : Float, thetaLength : Float)
  var geometry = new THREE.CylinderGeometry(135,128,110,64,1, false, 0, Math.PI-2);
  var loader = new THREE.TextureLoader();
  var material = new THREE.MeshPhongMaterial();

  var cone = new THREE.Mesh();

  var pointLight = new THREE.AmbientLight( 0xFFFFFF );
  pointLight.position.x = 10;
  pointLight.position.y = 50;
  pointLight.position.z = 130;
  scene.add(pointLight);

  camera.position.z = 40;
  camera.position.y = 0;
  cone.rotation.x = 0.01;
  cone.rotation.y = -10;

  jQuery(document).on('new3DConfigReady', function () {
    scene.remove(cone);
    var newGeometry = new THREE.CylinderGeometry(state.cylinderGeometry.radiusTop,state.cylinderGeometry.radiusBottom,state.cylinderGeometry.height,64,1, false, 0, Math.PI-2);;
    cone = new THREE.Mesh(newGeometry, material);
    cone.rotation.x = 0.01;
    cone.rotation.y = -0.55;  
    cone.position.y = state.cylinderGeometry.positionY;


    geometry.dispose();  
    if(state.textureUrl !== ''){
      scene.add(cone);
    }  

  });

  jQuery(document).on('newTextureReady', function () {
    loader.load( state.textureUrl, function (texture){
      material.map = texture;
      material.map.anisotropy = 256; 
      material.map.needsUpdate = true;
      material.needsUpdate = true;
      scene.add(cone);

    });
  });

  var render = function () {

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

  render();
}

Answer 1

使用材料阵列，圆柱体的侧面和末端可以具有不同的材料。

var geometry = new THREE.CylinderBufferGeometry( 5, 5, 10, 16, 1 );

var materials = [
    new THREE.MeshPhongMaterial( { map: texture } ),
    new THREE.MeshPhongMaterial( { color: 0x0000ff } ),
    new THREE.MeshPhongMaterial( { color: 0xff0000 } )
];

var mesh = new THREE.Mesh( geometry, materials );

three.js r.100

Three.js：删除CylinderGeometry顶部/底部的纹理

1 个答案: