質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.53%

  • Three.js

    118questions

    Three.jsはWebGLをサポートしているJavaScriptの3D描画用ライブラリです。

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 110

cheche0830

score 82

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

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

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

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

function createMesh() {
    var coin_sides_geo =
        new THREE.CylinderGeometry(1.0, 1.0, 1.0, 16.0, 10.0, true);
    var coin_cap_geo = new THREE.Geometry();
    var r = 1.0;
    for (var i = 0; i < 16; i++) {
        var a = i * 1 / 16 * Math.PI * 2;
        var z = Math.sin(a);
        var x = Math.cos(a);
        var a1 = (i + 1) * 1 / 16 * Math.PI * 2;
        var z1 = Math.sin(a1);
        var x1 = Math.cos(a1);
        coin_cap_geo.vertices.push(
            new THREE.Vector3(0, 0, 0),
            new THREE.Vector3(x * r, 0, z * r),
            new THREE.Vector3(x1 * r, 0, z1 * r)
        );
        coin_cap_geo.faceVertexUvs[0].push([
            new THREE.Vector2(0.5, 0.5),
            new THREE.Vector2(x / 2 + 0.5, z / 2 + 0.5),
            new THREE.Vector2(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.computeFaceNormals();
    coin_cap_geo.computeVertexNormals();

    var coin_sides_texture = THREE.ImageUtils.loadTexture("/assets/2/1/X/X/21XXW.jpg"); // side.jpg
    var coin_cap_texture_top = THREE.ImageUtils.loadTexture("/assets/g/B/2/7/gB27W.png"); // top.png
    var coin_cap_texture_bottom = THREE.ImageUtils.loadTexture("/assets/l/A/1/R/lA1Rg.png"); // bottom.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_top = new THREE.MeshLambertMaterial({
        map: coin_cap_texture_top
    });
    var coin_cap_mat_bottom = new THREE.MeshLambertMaterial({
        map: coin_cap_texture_bottom
    });
    var coin_cap_top = new THREE.Mesh(coin_cap_geo, coin_cap_mat_top);
    var coin_cap_bottom = new THREE.Mesh(coin_cap_geo, coin_cap_mat_bottom);
    coin_cap_top.position.y = 0.5;
    coin_cap_top.rotation.x = Math.PI;
    coin_cap_bottom.position.y = -0.5;
    coin_cap_bottom.rotation.y = Math.PI;

    var coin = new THREE.Object3D();
    coin.add(coin_sides);
    coin.add(coin_cap_top);
    coin.add(coin_cap_bottom);

    coin.rotation.x = Math.PI * 0.5;

    return coin;
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/20 00:10

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

    キャンセル

  • 2018/07/20 00:27

    コインだけのサンプルもあったので追加しておきます。サンプルのThree.jsのバージョンが古い為、多少使い方が変わっているかもしれませんが基本的には同じような使い方だと思います。

    ■ Three.js でコインを回転するテスト
    http://jsdo.it/cx20/fOLi

    また、物理演算関連のサンプルについては、こちらを参照ください。最小サンプルだと100行程度で物理演算がテスト可能です。

    ■ WebGLと3D物理演算ライブラリの組み合わせを試してみる
    https://qiita.com/cx20/items/3ebed669fb9c9e797935

    キャンセル

  • 2018/07/20 04:40

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

    キャンセル

  • 2018/07/20 04:55

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

    キャンセル

  • 2018/07/20 12:43

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.53%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • Three.js

    118questions

    Three.jsはWebGLをサポートしているJavaScriptの3D描画用ライブラリです。