3.jsのシリンダーのテクスチャ
-
25-10-2019 - |
質問
私はこれを長い間見ています。どこでも解決策が見つかりません。シリンダー(2つのキャップとサイド)に3つの異なるテクスチャを適用しようとしていますが、これを達成する方法についてはまったくわかりません。あなたは私を向けられますか?これが私が今していることです:
var coin1_geo = new THREE.CylinderGeometry( 100, 100, 10, 100, 100, false );
var coin1_texture = THREE.ImageUtils.loadTexture("./assets/avers.png");
var coin1_mat = new THREE.MeshLambertMaterial({map:coin1_texture});
var coin1 = new THREE.Mesh( coin1_geo, coin1_mat );
coin1.rotation.x = 20;
coin1.position.set(0,0,0);
coin1.castShadow = true;
coin1.receiveShadow = false;
scene.add( coin1 );
ここで見ることができるように、私はすべての顔に1つのテクスチャのみを適用します。しかし、キャップでさえ、それは実際には表示されていません、私は完全な円の一部しか持っていません。助けてくれません、あなたが理解していないなら、私はコインを達成しています。あなたが私にチュートリアルへのリンクを与えても、私は本当に感謝しているでしょう。何も見つかりません。3D/OpenGLプログラミングの知識は非常に限られています。どうもありがとう。
解決
編集]キャップUVが偽物であるため、3つのシリンダーが機能しませんでした。独自のキャップジオメトリを転がす必要があります。多くの仕事はなく、ただ迷惑です。カスタムキャップを使用してキャップのないシリンダーを実行する方法は次のとおりです。
var coin_sides_geo =
new THREE.CylinderGeometry( 10.0, 10.0, 1.0, 100.0, 10.0, true );
var coin_cap_geo = new THREE.Geometry();
var r = 10.0;
for (var i=0; i<100; i++) {
var a = i * 1/100 * Math.PI * 2;
var z = Math.sin(a);
var x = Math.cos(a);
var a1 = (i+1) * 1/100 * Math.PI * 2;
var z1 = Math.sin(a1);
var x1 = Math.cos(a1);
coin_cap_geo.vertices.push(
new THREE.Vertex(new THREE.Vector3(0, 0, 0)),
new THREE.Vertex(new THREE.Vector3(x*r, 0, z*r)),
new THREE.Vertex(new THREE.Vector3(x1*r, 0, z1*r))
);
coin_cap_geo.faceVertexUvs[0].push([
new THREE.UV(0.5, 0.5),
new THREE.UV(x/2+0.5, z/2+0.5),
new THREE.UV(x1/2+0.5, z1/2+0.5)
]);
coin_cap_geo.faces.push(new THREE.Face3(i*3, i*3+1, i*3+2));
}
coin_cap_geo.computeCentroids();
coin_cap_geo.computeFaceNormals();
var coin_sides_texture =
THREE.ImageUtils.loadTexture("./coin_sides.png");
var coin_cap_texture =
THREE.ImageUtils.loadTexture("./coin_face.png");
var coin_sides_mat =
new THREE.MeshLambertMaterial({map:coin_sides_texture});
var coin_sides =
new THREE.Mesh( coin_sides_geo, coin_sides_mat );
var coin_cap_mat = new THREE.MeshLambertMaterial({map:coin_cap_texture});
var coin_cap_top = new THREE.Mesh( coin_cap_geo, coin_cap_mat );
var coin_cap_bottom = new THREE.Mesh( coin_cap_geo, coin_cap_mat );
coin_cap_top.position.y = 0.5;
coin_cap_bottom.position.y = -0.5;
coin_cap_top.rotation.x = Math.PI;
var coin = new THREE.Object3D();
coin.add(coin_sides);
coin.add(coin_cap_top);
coin.add(coin_cap_bottom);
他のヒント
Side、TopCap、およびBottomCapの3つのメッシュでObject3Dを作成するTypeScript関数バリアント。
libバージョンで動作します:
「3」:「0.102.1」
import capTop from './textures/capTopTexture.png';
import capBottom from './textures/capBottomTexture.png';
import capSide from './textures/sideTexture.png';
function createCylinder (
radiusTop: number,
radiusBottom: number,
height: number,
radialSegments: number,
heightSegments: number,
): Object3D {
const cylinder = new THREE.Object3D();
const sidesGeo = new THREE.CylinderGeometry(
radiusTop,
radiusBottom,
height,
radialSegments,
heightSegments,
true,
);
const sideTexture = new THREE.TextureLoader().load(capSide, this.reRender);
const sidesMat =
new THREE.MeshLambertMaterial({map: sideTexture});
const sidesMesh =
new THREE.Mesh( sidesGeo, sidesMat );
cylinder.add(sidesMesh);
const capTopGeo = new THREE.CircleGeometry(radiusTop, radialSegments);
const capTopTexture = new THREE.TextureLoader().load(capTop, this.reRender);
const capTopMat =
new THREE.MeshLambertMaterial({map: capTopTexture});
const capTopMesh =
new THREE.Mesh( capTopGeo, capTopMat );
capTopMesh.position.y = height / 2;
capTopMesh.rotation.x = - Math.PI / 2;
cylinder.add(capTopMesh);
const capBottomGeo = new THREE.CircleGeometry(radiusBottom, radialSegments);
const capBottomTexture = new THREE.TextureLoader().load(capBottom, this.reRender);
const capBottomMat =
new THREE.MeshLambertMaterial({map: capBottomTexture});
const capBottomMesh =
new THREE.Mesh( capBottomGeo, capBottomMat );
capBottomMesh.position.y = -height / 2;
capBottomMesh.rotation.x = Math.PI / 2;
cylinder.add(capBottomMesh);
return cylinder;
};
所属していません StackOverflow