teratail
回答率
85.33%
teratail header banner
teratail header banner
質問するログイン新規登録

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

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

新規登録して質問してみよう
ただいま回答率
85.33%
トップThree.jsに関する質問
Three.js

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

Q&A

解決済

1回答

920閲覧

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

cheche0830
cheche0830

総合スコア187

Three.js

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

0グッド

0クリップ

投稿2018/07/22 02:32

0

0

問題ないコード

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

以下略・・・

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

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1件

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);

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

投稿2018/07/22 06:30

編集2018/07/22 06:36
cheche0830
cheche0830

総合スコア187

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.33%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

トップThree.jsに関する質問

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