threejs 円柱の側面と上面、下面のテクスチャを変える

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/89/three.min.js"></script>
  <script>
    // ページの読み込みを待つ
    window.addEventListener('load', init);

    function init() {

      // サイズを指定
      const width = 960;
      const height = 420;

      // レンダラーを作成
      const renderer = new THREE.WebGLRenderer({
        canvas: document.querySelector('#myCanvas'),
				alpha: true
      });
      renderer.setPixelRatio(window.devicePixelRatio);
      renderer.setSize(width, height);

      // シーンを作成
      const scene = new THREE.Scene();

      // カメラを作成
      const camera = new THREE.PerspectiveCamera(45, width / height);
      camera.position.set(0, 0, +50);

      // 箱を作成
      const geometry = new THREE.CylinderGeometry(5,5,1,40);
			
			// 画像を読み込む
			const loader = new THREE.TextureLoader();
			const texture = loader.load('main.jpg');
			console.log(texture);
			// マテリアルにテクスチャーを設定
			const material = new THREE.MeshStandardMaterial({
				map: texture
			});
			
  		//const material = new THREE.MeshStandardMaterial({color: 0xFF0000});
      const mesh = new THREE.Mesh(geometry, material);
      scene.add(mesh);
			
			// 平行光源
			const directionalLight = new THREE.DirectionalLight(0xFFFFFF);
			directionalLight.position.set(1, 1, 1);
      scene.add(directionalLight);

      tick();

      // 毎フレーム時に実行されるループイベントです
      function tick() {
        mesh.rotation.x = 1.5;
        mesh.rotation.z += 0.02;
        renderer.render(scene, camera);

        requestAnimationFrame(tick);
      }
    }
  </script>
</head>
<body>
  <canvas id="myCanvas"></canvas>
</body>
</html>

コインのような形状に対して、
側面はぎざぎざのテクスチャ、
上面と下面にはそれぞれ別の画像をいれたいのですが、
そのようなことは可能でしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

こちらのサンプルを参考にしてみて下さい。

■ Three.js + Oimo.js でコインを落下させてみるテスト（その４）
http://jsdo.it/cx20/oobX

js
1function createMesh() {
2    var coin_sides_geo =
3        new THREE.CylinderGeometry(1.0, 1.0, 1.0, 16.0, 10.0, true);
4    var coin_cap_geo = new THREE.Geometry();
5    var r = 1.0;
6    for (var i = 0; i < 16; i++) {
7        var a = i * 1 / 16 * Math.PI * 2;
8        var z = Math.sin(a);
9        var x = Math.cos(a);
10        var a1 = (i + 1) * 1 / 16 * Math.PI * 2;
11        var z1 = Math.sin(a1);
12        var x1 = Math.cos(a1);
13        coin_cap_geo.vertices.push(
14            new THREE.Vector3(0, 0, 0),
15            new THREE.Vector3(x * r, 0, z * r),
16            new THREE.Vector3(x1 * r, 0, z1 * r)
17        );
18        coin_cap_geo.faceVertexUvs[0].push([
19            new THREE.Vector2(0.5, 0.5),
20            new THREE.Vector2(x / 2 + 0.5, z / 2 + 0.5),
21            new THREE.Vector2(x1 / 2 + 0.5, z1 / 2 + 0.5)
22        ]);
23        coin_cap_geo.faces.push(new THREE.Face3(i * 3, i * 3 + 1, i * 3 + 2));
24    }
25
26    coin_cap_geo.computeFaceNormals();
27    coin_cap_geo.computeVertexNormals();
28
29    var coin_sides_texture = THREE.ImageUtils.loadTexture("/assets/2/1/X/X/21XXW.jpg"); // side.jpg
30    var coin_cap_texture_top = THREE.ImageUtils.loadTexture("/assets/g/B/2/7/gB27W.png");　// top.png
31    var coin_cap_texture_bottom = THREE.ImageUtils.loadTexture("/assets/l/A/1/R/lA1Rg.png"); // bottom.png
32
33    var coin_sides_mat = new THREE.MeshLambertMaterial({
34        map: coin_sides_texture
35    });
36    var coin_sides = new THREE.Mesh(coin_sides_geo, coin_sides_mat);
37
38    var coin_cap_mat_top = new THREE.MeshLambertMaterial({
39        map: coin_cap_texture_top
40    });
41    var coin_cap_mat_bottom = new THREE.MeshLambertMaterial({
42        map: coin_cap_texture_bottom
43    });
44    var coin_cap_top = new THREE.Mesh(coin_cap_geo, coin_cap_mat_top);
45    var coin_cap_bottom = new THREE.Mesh(coin_cap_geo, coin_cap_mat_bottom);
46    coin_cap_top.position.y = 0.5;
47    coin_cap_top.rotation.x = Math.PI;
48    coin_cap_bottom.position.y = -0.5;
49    coin_cap_bottom.rotation.y = Math.PI;
50
51    var coin = new THREE.Object3D();
52    coin.add(coin_sides);
53    coin.add(coin_cap_top);
54    coin.add(coin_cap_bottom);
55
56    coin.rotation.x = Math.PI * 0.5;
57
58    return coin;
59}
60

投稿2018/07/19 13:46

cx20

総合スコア4633

cheche0830

2018/07/19 15:10

ありがとうございます！こんだけのコード量でこんなすごいことができるんですね！解析してみます！

cx20

2018/07/19 15:27

コインだけのサンプルもあったので追加しておきます。サンプルのThree.jsのバージョンが古い為、多少使い方が変わっているかもしれませんが基本的には同じような使い方だと思います。 ■ Three.js でコインを回転するテスト http://jsdo.it/cx20/fOLi また、物理演算関連のサンプルについては、こちらを参照ください。最小サンプルだと100行程度で物理演算がテスト可能です。 ■ WebGLと3D物理演算ライブラリの組み合わせを試してみる https://qiita.com/cx20/items/3ebed669fb9c9e797935

cheche0830

2018/07/19 19:40

ありがとうございます。このコインは一つのジオメトリではなくて、複数のジオメトリを組み合わせて一つのコインに見せてるという認識であってますかね？

cx20

2018/07/19 19:55

はい。その認識であっています。

cheche0830

2018/07/20 03:43

助かりましたありがとうございます！！！！いろいろ試してみます！

行動規範の内容に同意します