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

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

ただいまの
回答率

90.35%

  • Three.js

    129questions

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

threejs テクスチャがはれない・・

解決済

回答 1

投稿

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

cheche0830

score 95

問題ないコード

<!DOCTYPE html>

<html>

<head>
    <title>Example 01.05 - Control gui</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/94/three.min.js"></script>
    <script type="text/javascript" src="js/OrbitControls.js"></script>
    <style>
        body {
            /* set margin to 0 and overflow to hidden, to go fullscreen */
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>



<!-- Javascript code that runs our Three.js examples -->
<script type="text/javascript">
  // forked from FumioNonaka's "three.js r85: Rotating a icosahedron" http://jsdo.it/FumioNonaka/gpdN
  var width = window.innerWidth;
  var height = window.innerHeight;
  var side = Math.min(width, height) / 30;
  var scene;
  var camera;
  var renderer;
  var mesh;
  var controls;
  function init() {
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(30, width / height, 1, 1000);
    renderer = createRenderer(width, height);
    mesh = createMesh(side);
    camera.position.z = 100;
    scene.add(mesh);
    controls = new THREE.OrbitControls(camera);
    controls.autoRotate = true;
    update();
  }
  function createRenderer(width, height) {
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height);
    document.body.appendChild(renderer.domElement);
    return renderer;
  }
  function createMesh(radius) {
    var cubeGeometry = new THREE.CubeGeometry(14, 4, 10);
    var material = new THREE.MeshNormalMaterial();
    var mesh = new THREE.Mesh(cubeGeometry, material);
    return mesh;
  }
  function update() {
    controls.update();
    requestAnimationFrame(update);
    renderer.render(scene, camera);
  }
  window.addEventListener('DOMContentLoaded', init);
</script>
</body>
</html>

テクスチャをはると何も表示されない

<!DOCTYPE html>

<html>

<head>
    <title>Example 01.05 - Control gui</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/94/three.min.js"></script>
    <script type="text/javascript" src="js/OrbitControls.js"></script>
    <style>
        body {
            /* set margin to 0 and overflow to hidden, to go fullscreen */
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>



<!-- Javascript code that runs our Three.js examples -->
<script type="text/javascript">
  // forked from FumioNonaka's "three.js r85: Rotating a icosahedron" http://jsdo.it/FumioNonaka/gpdN
  var width = window.innerWidth;
  var height = window.innerHeight;
  var side = Math.min(width, height) / 30;
  var scene;
  var camera;
  var renderer;
  var mesh;
  var controls;
  function init() {
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(30, width / height, 1, 1000);
    renderer = createRenderer(width, height);
    mesh = createMesh(side);
    camera.position.z = 100;
    scene.add(mesh);
    controls = new THREE.OrbitControls(camera);
    controls.autoRotate = true;
    update();
  }
  function createRenderer(width, height) {
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height);
    document.body.appendChild(renderer.domElement);
    return renderer;
  }
  function createMesh(radius) {
    var cubeGeometry = new THREE.CubeGeometry(14, 4, 10);
    var texture1 = new THREE.MeshPhongMaterial({ map: new THREE.TextureLoader().load("img/texture0.png")});
    var texture2 = new THREE.MeshPhongMaterial({ map: new THREE.TextureLoader().load("img/texture1.png")});
    var texture3 = new THREE.MeshPhongMaterial({ map: new THREE.TextureLoader().load("img/texture2.png")});
    var texture4 = new THREE.MeshPhongMaterial({ map: new THREE.TextureLoader().load("img/texture3.png")});
    var texture5 = new THREE.MeshPhongMaterial({ map: new THREE.TextureLoader().load("img/texture4.png")});
    var texture6 = new THREE.MeshPhongMaterial({ map: new THREE.TextureLoader().load("img/texture4.png")});
    var material = new THREE.MultiMaterial([texture1, texture2, texture3, texture4, texture5, texture6]);
    var mesh = new THREE.Mesh(cubeGeometry, material);
    return mesh;
  }
  function update() {
    controls.update();
    requestAnimationFrame(update);
    renderer.render(scene, camera);
  }
  window.addEventListener('DOMContentLoaded', init);
</script>
</body>
</html>

エラーは

three.min.js:935 THREE.MultiMaterial has been removed. Use an Array instead.
k.MultiMaterial @ three.min.js:935
createMesh @ (index):57
init @ (index):36
three.min.js:123 THREE.WebGLRenderer: image is not power of two (1030x438). Resized to 1024x256 <img crossorigin=​"anonymous" src=​"img/​texture0.png">​
k @ three.min.js:123
(anonymous) @ three.min.js:197
dg @ three.min.js:46
eb.upload @ three.min.js:614
n @ three.min.js:173
renderBufferDirect @ three.min.js:189
m @ three.min.js:162
l @ three.min.js:161
render @ three.min.js:196
update @ (index):69
requestAnimationFrame (async)
update @ (index):68
requestAnimationFrame (async)
update @ (index):68
requestAnimationFrame (async)
update @ (index):68
requestAnimationFrame (async)
update @ (index):68
init @ (index):41
three.min.js:123 THREE.WebGLRenderer: image is not power of two (1030x750). Resized to 1024x512 <img crossorigin=​"anonymous" src=​"img/​texture1.png">​
k @ three.min.js:123
(anonymous) @ three.min.js:197
dg @ three.min.js:46
eb.upload @ three.min.js:614
n @ three.min.js:173
renderBufferDirect @ three.min.js:189
m @ three.min.js:162
l @ three.min.js:161
render @ three.min.js:196
update @ (index):69
requestAnimationFrame (async)
update @ (index):68
requestAnimationFrame (async)
update @ (index):68
requestAnimationFrame (async)
update @ (index):68
requestAnimationFrame (async)
update @ (index):68
init @ (index):41
three.min.js:123 THREE.WebGLRenderer: image is not power of two (1030x438). Resized to 1024x256 <img crossorigin=​"anonymous" src=​"img/​texture2.png">​
k @ three.min.js:123
(anonymous) @ three.min.js:197
dg @ three.min.js:46
eb.upload @ three.min.js:614
n @ three.min.js:173
renderBufferDirect @ three.min.js:189
m @ three.min.js:162
l @ three.min.js:161
render @ three.min.js:196
update @ (index):69
requestAnimationFrame (async)
update @ (index):68
requestAnimationFrame (async)
update @ (index):68
requestAnimationFrame (async)
update @ (index):68
requestAnimationFrame (async)
update @ (index):68
init @ (index):41
three.min.js:123 THREE.WebGLRenderer: image is not power of two (1030x750). Resized to 1024x512 <img crossorigin=​"anonymous" src=​"img/​texture3.png">​
k @ three.min.js:123
(anonymous) @ three.min.js:197
dg @ three.min.js:46

以下略・・・

サイズをリサイズしているということですかね。
サイズは表示されてから調整すればいいと思っていたのですが、
サイズをしっかり合わせないと表示されないとかじゃないですよね?

ご教授お願いいたします。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

check解決した方法

0

  var width = window.innerWidth;
  var height = window.innerHeight;
  var side = Math.min(width, height) / 30;
  var scene;
  var camera;
  var renderer;
  var mesh;
  var controls;
  function init() {
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(30, width / height, 1, 1000);
    renderer = createRenderer(width, height);
    mesh = createMesh(side);
    camera.position.z = 70;
    camera.position.x = 70;
    camera.position.y = 70;
    scene.add(mesh);
    controls = new THREE.OrbitControls(camera);
    controls.autoRotate = true;
    update();
  }
  function createRenderer(width, height) {
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height);
    //document.body.appendChild(renderer.domElement);
    document.getElementById("test").appendChild(renderer.domElement);
    return renderer;
  }
  function createMesh(radius) {

    var path = "img/";
    var l1 = new THREE.TextureLoader().load(path+"texture4.png");
    var l2 = new THREE.TextureLoader().load(path+"texture4.png");
    var l3 = new THREE.TextureLoader().load(path+"texture3.png");
    var l4 = new THREE.TextureLoader().load(path+"texture1.png");
    var l5 = new THREE.TextureLoader().load(path+"texture0.png");
    var l6 = new THREE.TextureLoader().load(path+"texture2.png");


    var cubeGeometry = new THREE.CubeGeometry(49, 18, 38,5,5,5);
    var texture1 = new THREE.MeshBasicMaterial({ map: l1});//右横
    var texture2 = new THREE.MeshBasicMaterial({ map: l2});//左横
    var texture3 = new THREE.MeshBasicMaterial({ map: l3});//上
    var texture4 = new THREE.MeshBasicMaterial({ map: l4});//下
    var texture5 = new THREE.MeshBasicMaterial({ map: l5});//手前
    var texture6 = new THREE.MeshBasicMaterial({ map: l6});//奥
    var material = new THREE.MultiMaterial([texture1, texture2, texture3, texture4, texture5, texture6]);
    var mesh = new THREE.Mesh(cubeGeometry, material);

    return mesh;
  }
  function update() {
    controls.update();
    requestAnimationFrame(update);
    renderer.render(scene, camera);
  }
  window.addEventListener('DOMContentLoaded', init);

こちらで行けました。
クロスドメインだとエラーが出るので、
また別途スレッド建てます。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

  • Three.js

    129questions

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