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

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

新規登録して質問してみよう
ただいま回答率
87.20%
Three.js

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

受付中

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

mathmaco
mathmaco

総合スコア71

Three.js

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

2回答

0評価

0クリップ

3405閲覧

投稿2018/02/26 11:13

解決させたいことは、.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ページの「注目」タブのフィードに表示されやすくなります。

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

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

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

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

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

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

turbgraphics200

2018/02/26 14:04

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

2018/02/27 04:24

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

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

Three.js

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。