Three.js

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

RSS
  • 解決済

    回答
    1

    スクロールで発生するアニメーションが終わる前に次のアニメーションに移る場合の挙動について

    three.js, tween.jsを使用して、ランダムに動くパーティクルがページの中央までスクロールすると集合し図形を型取り、ページ下部までスクロールするとまたランダムな動きに戻るという実装をしました。 ゆっくりスクロールすると想定通りの動きをするのですが、スクロールが早いと集合した図形のままとまってしまい、ランダムに戻らなくなってしまいます。 以下、

    • 0評価
    • 76PV
    ReikaHirahara ReikaHirahara 3週間前に コメント
  • 受付中

    回答
    0

    three.jsで表現したパーティクルの集合図形を整列させたい。

    以下のURLにあるように、スクロールしたらパーティクルが集合し、図形を表現する動きを実装しています。 リンク コード内にもありますが、集合する図形の座標情報はstlの3dデータをblenderという3d編集ソフトを使用してjsonデータに変換したものを読み込んでいます。 しかし、こちらの座標情報だと頂点座標しか格納されていないために、パーティクルで表

    • 0評価
    • 322PV
    teratailが1ヶ月前に アップデート
  • 解決済

    回答
    1

    Three.js MeshLambertMaterial の color指定が効かない

    追記: バージョンは91です。 https://jsfiddle.net/7mmk9zfj/ ↑デモです。 MeshBasicMaterial では問題ありません。 MeshLambertMaterial ではなにか他にオプションを渡す必要があるのでしょうか。 var width = window.innerWidth; var heig

    • 0評価
    • 81PV
    machine_machine machine_machine 3ヶ月前に ベストアンサー
  • 解決済

    回答
    2

    Three.jsで球体にcanvasを貼り付けたい

    前提・実現したいこと Three.jsで作った球体SphereGeometryに 1024x512 のキャンバスをマッピングしたいと思っています。 現状 以下のように実装してみましたが、うまく反映されません。 container = document.getElementById("body"); renderer = new THREE

    • 0評価
    • 242PV
    artistan artistan 4ヶ月前に 回答
  • 受付中

    回答
    2

    Three.jsで上下分割されている画像の全天球表示方法

    Three.jsで全天球表示を行いました。(以下のサイト内にあるDEMOの状態です) https://qiita.com/kingpanda/items/1c3a47765b40d6d62f46 こちらのサイトですと、正距方位図法の画像を使用しています。 これを上下分割されている360度画像を使用して同様に表示することは可能でしょうか。 以下のような

    • 0評価
    • 114PV
    turbgraphics200 turbgraphics200 4ヶ月前に 回答を編集
  • 解決済

    回答
    1

    Three.js 風のデータを視覚化したい

    前提・実現したいこと Three.jsで作った球体の表面に、風のデータをパーティクルで表現したいと思っています。 http://www.techscore.com/blog/2015/12/13/wind_visualization/ こちらを参考に、世界規模の風速データwind.ieeeを取得しました。 発生している問題 肝心のデータを描画するとこ

    • 0評価
    • 111PV
    artistan artistan 4ヶ月前に 回答
  • 受付中

    回答
    0

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

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

    • 0評価
    • 166PV
    teratailが4ヶ月前に アップデート
  • 解決済

    回答
    3

    blenderのエクスポート .jsonデータに問題があるのでしょうか?

    物理の授業用教材を作成している高校教員です。 javascript (three.js)の初心者です。3Dのモデルデータ(spring05.json:ばねモデル)をblenderから .json の形式でエクスポートしthree.jsで読み込ませ動かしています。動くことは動くのですが、chromeでエラーを見ると、 Uncaught TypeError:

    • 0評価
    • 203PV
    kei344 kei344 4ヶ月前に コメント
  • 受付中

    回答
    0

    FRPを用いたアニメーションについて

    現在関数型プログラミング(Functional reactive programming)について勉強をしています。 調べていると、Franというものがあり、アニメーションを足し合わせて?新しいアニメーションにしてる等、面白く、興味を持ち、試してみたいと思っています。 英語の理解ができていないかもしれないのですが、franというライブラリ?がそもそも古く

    • 0評価
    • 185PV
    teratailが5ヶ月前に アップデート
  • 解決済

    回答
    2

    pdbファイルが表示できない

    javascript,THREE.js,PDBLorder.jsを使い,pdbファイルを表示するプログラムを作っています。 pdbファイルを読み込み,表示しようにもなぜか表示ができません。どうしてでしょうか。 発生している問題・エラーメッセージ Uncaught TypeError: Cannot read property 'length' of un

    • 0評価
    • 165PV
    tekiki tekiki 5ヶ月前に 回答
  • 解決済

    回答
    2

    threeJS、Planeの上にSphere(球体)をぴったり乗せる方法

    COBOLer & PHPerですが、必要上、Javascriptもゴリゴリ書く方です。 現在、ThreeJSに触れてます。PlaneやSphere(球体)の描画自体は問題無く動作しています。OrbitControlsでグリグリ回すのも大丈夫です。 一つ分からないのが、適当な座標にPlaneと球体を配置するのではなく、Planeの座標上ぴったりに球体

    • 0評価
    • 206PV
    SaintKnowledge SaintKnowledge 6ヶ月前に ベストアンサー
  • 受付中

    回答
    0

    three.js geometryについて

    js初心者です。 ここの部分のコードを使いたいのですが、理解できません。 constructor(mesh, positions, normalizePositions = true) { this.mesh = mesh; this.positions = {}; for (let i = 0; i <

    • 0評価
    • 146PV
    teratailが7ヶ月前に アップデート
  • 受付中

    回答
    2

    hoverやscrollで画像をグニャグニャ動かすアニメーション実装の方法(例あり)

    前提 フロントエンド(CSS、JS)周りでのインタラクティブなWEBサイト作成に強い方にお聞きしたいのですが 以下の実装方法が想定できそうな方にご教授いただきたいです。 やりたいこと 下のサイトのように hoverやscrollで画像をグニャグニャ動かしたい のですがどう実装するのが良いのでしょうか? 以下参考HP TAOTAJIMA http://

    • -1評価
    • 283PV
    edo_m18 edo_m18 7ヶ月前に 回答
  • 受付中

    回答
    0

    Three.jsで複数ウィンドウへの表示

    前提・実現したいこと Three.jsを用いて3DCGを表示させる際に, 複数のカメラを設定して,それぞれのカメラからのview(?)を別々のウィンドウで表示したいorそのように見えるようにしたいと考えています. 調べてみて同じウィンドウを複数に分割して表示する方法はわかるのですが,どのようにすれば別ウィンドウで同じものを別の角度から見ているようなプログ

    • 0評価
    • 228PV
    teratailが7ヶ月前に アップデート
  • 解決済

    回答
    1

    three.js 正方形の斜線を消す方法を教えてください

    前提・実現したいこと three.jsを使って、正方形の描画を試みていますが、 正方形の外枠を消す方法がわかりません、、、 どなたかご教授願いいただけませんか? 該当のソースコード function init() { renderer = new THREE.WebGLRenderer({ antialias: tr

    • 0評価
    • 293PV
    kurisu kurisu 7ヶ月前に ベストアンサー
  • 解決済

    回答
    1

    three.js を使って表示したメッシュの移動について

    javascript初心者です。 実現したいこと ロードしたbunny.objをanimate()関数の中に処理を追加して移動させたり回転させたいです。 試したこと animate()関数の中でmeshのx座標にアクセスするのにg_mesh.mesh.position.xと試してみたのですがエラーが起こってしまいます。 どのようにすれば良いのか教

    • 0評価
    • 259PV
    sakuramoti sakuramoti 8ヶ月前に コメント
  • 解決済

    回答
    1

    Three.jsの三角形によるオブジェクトの描画方法

    Three.js(WebGL)の三角形の描画と形状の作成についてです。 三角形をもちいてオリジナルな形状を作ろうと思うのですが、上手くいきません。 三角形で球を作る場合を考えてみました。 geometry = new THREE.Geometry(); //球の頂点座標を取得 sphere = new THREE.SphereGe

    • 0評価
    • 471PV
    neko_ramen neko_ramen 9ヶ月前に ベストアンサー
  • 解決済

    回答
    4

    Javascript、Ajaxの動的更新に関する質問

    Javascriptに関する質問です。 Javascriptを動的に更新する方法を探しています。具体的には、ボタンをクリックするとリロードされバックグラウンドからキャッシュ?が消えるような仕組みです。 webブラウザのリロードボタンのように、ページ全体を更新するのではなく、scriptタグ内のjsのみを更新(初期化)することは可能なのでしょうか。 一応試

    • 0評価
    • 649PV
    mathc2b mathc2b 9ヶ月前に ベストアンサー
  • 解決済

    回答
    1

    【Three.js】THREE.ShaderMaterialでPhongMaterialとLambe...

    現在初めてJavaScript、Three.jsを使用しているのですが、THREE.ShaderMaterialの使い方がいまいち分かりません。 //Cubeの作成 var geometry = new THREE.CubeGeometry( 30, 30, 30 ); var materialShader = new THREE.S

    • 0評価
    • 471PV
    adrs2002 adrs2002 10ヶ月前に ベストアンサー
  • 受付中

    回答
    2

    [Three.js] raycasterがうまく動作しません。

    前提・実現したいこと Three.jsで製作しています。 外部からLosderで3Dモデルを読み込んで、Raycasterを使って対象の任意の部位にクリックすることでマーカー的なオブジェを配置させたいです。 最終的には新たに配置されたオブジェをさらにクリックすることで外部ブラウザを開き、TXTなどのデータを格納させたいと思っています。 発生している問題・

    • 0評価
    • 679PV
    arihi arihi 10ヶ月前に 回答
1

タグ情報

  • あなたの順位

    -

  • タグ登録者数

    91

  • 総質問数

    86

  • 今週の質問数

    0

関連するタグ

Three.jsタグのよく見られている質問

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る