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

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

ただいまの
回答率

87.37%

Three.jsで.objオブジェクトを自動回転させたい

受付中

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 2,705

score 67

解決させたいことは、.objを自動でrotationをさせたいのですが、エラーが出てしまいます。
マウスのドラッグでカメラの位置などは変更できますが、、
他のジオメトリは、自動で再生することが出来ているのですが、ご教授いただけますでしょうか。

'use strict';

// ページの読み込みを待つ
window.addEventListener('load', init);

function init() {
  // サイズを指定
  var width = window.innerWidth;
  var height = window.innerHeight;
  var rot = 180; // 角度
  var mouseX = 0; // マウス座標
  var mouseZ = 0; // マウス座標

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

  // シーンを作成
  var scene = new THREE.Scene();
  // カメラを作成
  var camera = new THREE.PerspectiveCamera(4000, width / height);
  // カメラの初期座標を設定
  camera.position.set(0, 0, 0);

  /*
  var axis = new THREE.AxisHelper(1000)
  axis.position.set(0, 0, 0)
  scene.add(axis)
  */

  // 平行光源を作成
  var directionalLight = new THREE.DirectionalLight(0xFFFFFF, 0.8);
  directionalLight.position.set(90, 90, 90);
  scene.add(directionalLight);

  var ambient = new THREE.AmbientLight(0xcccccc, 0.2);
  scene.add(ambient);

  // マテリアルを作成
  var material = new THREE.MeshPhongMaterial({
    map: new THREE.TextureLoader().load('assets/images/mask.jpg'),
    side: THREE.DoubleSide,
    transparent: true,
    opacity: 0.5
  });
  // 球体の形状を作成します
  var geometry = new THREE.BoxGeometry(200, 200, 200);

  // 形状とマテリアルからメッシュを作成します
  var earthMesh = new THREE.Mesh(geometry, material);

  // シーンにメッシュを追加します
  scene.add(earthMesh);

  // 星屑を作成します (カメラの動きをわかりやすくするため)
  createStarField();

  function createStarField() {
    // 形状データを作成
    var geometry3 = new THREE.Geometry();
    for (var i = 0; i < 10000; i++) {
      geometry3.vertices.push(new THREE.Vector3(3000 * (Math.random() - 0.5), 3000 * (Math.random() - 0.5), 3000 * (Math.random() - 0.5)));
    }
    // マテリアルを作成
    var material3 = new THREE.PointsMaterial({
      size: 1,
      color: 0xFFFFFF,
      transparent: true,
      opacity: 1,
      side: THREE.DoubleSide
    });
    // 物体を作成
    var mesh = new THREE.Points(geometry3, material3);
    scene.add(mesh);
  }

  var geometry2 = new THREE.BoxGeometry(150, 150, 150);
  var material2 = new THREE.MeshStandardMaterial({ color: 0xffffff, transparent: true, opacity: 0.5, side: THREE.DoubleSide });
  var box = new THREE.Mesh(geometry2, material2);
  scene.add(box);

  // texture
  var manager = new THREE.LoadingManager();
  manager.onProgress = function (item, loaded, total) {
    console.log(item, loaded, total);
  };

  var textureLoader2 = new THREE.TextureLoader(manager);
  var texture2 = textureLoader2.load('assets/images/mask.jpg');
  texture2.side = THREE.DoubleSide;

  // model
  var onProgress = function onProgress(xhr) {
    if (xhr.lengthComputable) {
      var percentComplete = xhr.loaded / xhr.total * 1000;
      console.log(Math.round(percentComplete, 2) + '% downloaded');
    }
  };

  var onError = function onError(xhr) {};

  var loader2 = new THREE.OBJLoader(manager);
  loader2.load('assets/images/logo.obj', function (object) {
    object.traverse(function (child) {
      if (child instanceof THREE.Mesh) {
        child.material.map = texture2;
        child.material.side = THREE.DoubleSide;
      }
    });

    object.position.y = 50;

    scene.add(object);
    object.rotation.set(Math.PI / 50, 50, 0);
  }, onProgress, onError);

  // マウス座標はマウスが動いた時のみ取得できる
  document.addEventListener('mousemove', function (event) {
    mouseX = event.pageX;
  });

  var controls = new THREE.OrbitControls(camera, renderer.domElement);
  controls.enableDamping = true;
  controls.dampingFactor = 0.25;
  controls.enablePan = true;
  controls.enableZoom = true;
  controls.minDistance = 0.0;
  controls.maxDistance = 800.0;
  controls.target.set(0, 0, 0);
  controls.maxPolarAngle = Math.PI * 0.5; // 0.5なら下からのぞき込めなくなる

  tick();
  // 毎フレーム時に実行されるループイベントです
  function tick() {
    // マウスの位置に応じて角度を設定
    // マウスのX座標がステージの幅の何%の位置にあるか調べてそれを360度で乗算する
    var targetRot = mouseX / window.innerWidth * 360;
    // イージングの公式を用いて滑らかにする
    // 値 += (目標値 - 現在の値) * 減速値
    rot += (targetRot - rot) * 0.01;
    // ラジアンに変換する
    var radian = rot * Math.PI / 180;

    // 角度に応じてカメラの位置を設定
    camera.position.x = 1000 * Math.sin(radian);
    camera.position.y = 1000 * Math.cos(radian);
    camera.position.z = 1000 * Math.cos(radian);

    // 原点方向を見つめる
    camera.lookAt(new THREE.Vector3(10, 10, 10));
    // 地球は常に回転させておく
    earthMesh.rotation.x += 0.01;
    box.rotation.y += 0.01;

    var radian2 = rot * Math.PI / 180;
    // 角度に応じてカメラの位置を設定
    camera.position.x = 1000 * Math.sin(radian2);
    camera.position.y = 1000 * Math.sin(radian2);
    camera.position.z = 1000 * Math.cos(radian2);

    controls.update();

    // レンダリング
    renderer.render(scene, camera);
    requestAnimationFrame(tick);
  }
}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • turbgraphics200

    2018/02/26 23:04

    どんなエラーが発生するのかを記述してください

    キャンセル

  • mathmaco

    2018/02/27 13:24

    コンソールをみたところ、エラーはでておりませんでしあが、function init() {}内にobject.rotation.y += 0.01を記述した場合、無視されております。

    キャンセル

回答 2

+1

earthMesh.rotation.x += 0.01;を
earthMesh.rotation.y += 0.01;か
earthMesh.rotation.z += 0.01;
にすれば動くと思います

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

0

とりあえずコードを v\VisualStudioCode に ペーストしたのですがその時点でよくわからないのですが
2点エラーになりました
一つ目が 97行目です
// model
var onProgress = function onProgress(xhr) {

2つ目が 105行目で
var onError = function onError(xhr) {};
にエラーが出ました。

エラー内容は
Identifier expected.
だそうです。
間違ってたらごめんなさい🙇

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

関連した質問

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