threejsでアニメーションを再生しようとしたときに空白の画面をレンダリングする

ロン・スティーブンソン

three.jsを使用して、エクスポートされたモデル(3dsmax-> dae file-> jsonから)をアニメーションでアニメーション化しようとしています。コンソールエラーは発生しませんが、画面が空白になります。なぜこれが起こっているのかについて誰かが何か考えを持っていますか?json、png、maxファイル、daeファイル、または役立つ可能性のあるその他のリソースも含めることができてうれしいです。どんな助けでも大歓迎です。私は立ち往生しています...これがjavascriptです:

<script>

    var camera, scene, renderer, animmesh;

    var clock = new THREE.Clock();

    function init() {

        camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

        camera.position.z = 5;

        scene = new THREE.Scene();

        scene.add(camera);

        renderer = new THREE.WebGLRenderer( { antialias: true } );

        renderer.setSize( window.innerWidth, window.innerHeight );

        document.body.appendChild( renderer.domElement );

        var loader = new THREE.JSONLoader();


        loader.load("../../assets/model-threejs.json", function (model, material) {

                createScene(model, material);

        });

}



function createScene(model, material) {

        material[0].skinning = true;

        animmesh = new THREE.SkinnedMesh(model, material[0]);

        scene.add(animmesh);

}


function render() {

        renderer.render(scene, camera);

}



init();

render();

</script>
ボブ・ウッドリー

あなたはいくつかの問題を抱えていました。1)あなたの象はとても大きかったので画面から外れていました。2)原点を見るようにカメラに指示する必要があります。3)単純化しすぎたコードを単純化した場合でも、アニメーションループが必要です。

このコードは機能します(PNGファイルがなかったため、MeshNormalMaterialを使用しました)。

var camera, scene, renderer, animmesh, controls;
var clock = new THREE.Clock();

function init() {

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

    camera.position.x = -900;

    scene.add(camera);

    renderer = new THREE.WebGLRenderer( { antialias: true } );

    renderer.setSize( window.innerWidth*.9, window.innerHeight*.9 );

    document.body.appendChild( renderer.domElement );

    var loader = new THREE.JSONLoader();


    loader.load("model-threejs.json", function (model, material) {

        animmesh = new THREE.Mesh(model, new THREE.MeshNormalMaterial());

        scene.add(animmesh);
        animate();

    });
}

function animate() {
  requestAnimationFrame( animate );
  render();
}
function render() {
        renderer.render(scene, camera);
        camera.lookAt(new THREE.Vector3(0,0,0));
}
init();

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

ボタンをクリックしたときにCSSアニメーションを再生する方法

分類Dev

アニメーションをレンダリングして、再生が完了した後にレンダリングする方法は?

分類Dev

SceneKit: 骨格アニメーションで 2 つの SCNNode をレンダリングしているときにエラーが発生する

分類Dev

Adobe Animateでホバーしたときにアニメーションを逆再生するにはどうすればよいですか?

分類Dev

pygameでアニメーションを再生しようとするとエラーが発生する

分類Dev

アニメーション中にクリックしたときに現在の位置でimagebuttonを停止するにはどうすればよいですか?

分類Dev

MTLTextureでCARendererを使用してアニメーション化されたCALayerを画面外にレンダリングする

分類Dev

ユーザーがアプリケーションを終了したときにMPMusicPlayerControllerの再生を停止するにはどうすればよいですか?

分類Dev

アニメーションはボタンを押したときにのみ再生されます

分類Dev

要素が画面に表示されているときにのみアニメーションを再生する方法

分類Dev

Whatsappのようなダイアログを開いたときにアニメーションを表示しますか?

分類Dev

Whatsappのようなダイアログを開いたときにアニメーションを表示しますか?

分類Dev

アニメーションクリップを再生しようとすると、例外InvalidOperationExceptionが発生するのはなぜですか?

分類Dev

セクションリストをレンダリングしようとしたときのエラー

分類Dev

ボタンをクリックしたときにアニメーションを遷移させるにはどうすればよいですか?

分類Dev

キーを押したw、a、s、および/またはdでアニメーションを再生し、それらのいずれも押されていないときに停止するにはどうすればよいですか?

分類Dev

背景画像の上でアニメーションを再生しようとしています

分類Dev

各再レンダリングでアニメーションを作成するにはどうすればよいですか?(新しい小道具が来るとき)

分類Dev

アニメーション中にサウンドを再生しようとしていますが、サウンドはアニメーションのフレームごとに1回再生されます

分類Dev

gganimateを使用してアニメーションプロットをレンダリングするときに問題が発生する

分類Dev

kivyでボタンとして押すと再生されるアニメーションGIFを使用するにはどうすればよいですか?

分類Dev

/ usr /ディレクトリを削除し、chrootで回復し、Sudoを実行しようとするとセグメンテーション違反(コアダンプ)が発生するようになりました

分類Dev

トグルクラスを実行するときにアニメーションを再生しないのはなぜですか?

分類Dev

TextViewをクリックしたときにアニメーションを作成するにはどうすればよいですか?

分類Dev

Pythonを使用してSeleniumでCSS / Javascriptアニメーションを一連の画像ファイルとしてレンダリングする

分類Dev

ReactNativeでアニメーションGIFをレンダリングするためのより効率的な方法

分類Dev

リンクをクリックすると、一時停止したアニメーションの再生状態を実行に変更します

分類Dev

Androidでアニメーションが終了したときにListViewの可視性をGONEに設定するにはどうすればよいですか?

分類Dev

状態が変化すると、ダイアログはアニメーションを再生します

Related 関連記事

  1. 1

    ボタンをクリックしたときにCSSアニメーションを再生する方法

  2. 2

    アニメーションをレンダリングして、再生が完了した後にレンダリングする方法は?

  3. 3

    SceneKit: 骨格アニメーションで 2 つの SCNNode をレンダリングしているときにエラーが発生する

  4. 4

    Adobe Animateでホバーしたときにアニメーションを逆再生するにはどうすればよいですか?

  5. 5

    pygameでアニメーションを再生しようとするとエラーが発生する

  6. 6

    アニメーション中にクリックしたときに現在の位置でimagebuttonを停止するにはどうすればよいですか?

  7. 7

    MTLTextureでCARendererを使用してアニメーション化されたCALayerを画面外にレンダリングする

  8. 8

    ユーザーがアプリケーションを終了したときにMPMusicPlayerControllerの再生を停止するにはどうすればよいですか?

  9. 9

    アニメーションはボタンを押したときにのみ再生されます

  10. 10

    要素が画面に表示されているときにのみアニメーションを再生する方法

  11. 11

    Whatsappのようなダイアログを開いたときにアニメーションを表示しますか?

  12. 12

    Whatsappのようなダイアログを開いたときにアニメーションを表示しますか?

  13. 13

    アニメーションクリップを再生しようとすると、例外InvalidOperationExceptionが発生するのはなぜですか?

  14. 14

    セクションリストをレンダリングしようとしたときのエラー

  15. 15

    ボタンをクリックしたときにアニメーションを遷移させるにはどうすればよいですか?

  16. 16

    キーを押したw、a、s、および/またはdでアニメーションを再生し、それらのいずれも押されていないときに停止するにはどうすればよいですか?

  17. 17

    背景画像の上でアニメーションを再生しようとしています

  18. 18

    各再レンダリングでアニメーションを作成するにはどうすればよいですか?(新しい小道具が来るとき)

  19. 19

    アニメーション中にサウンドを再生しようとしていますが、サウンドはアニメーションのフレームごとに1回再生されます

  20. 20

    gganimateを使用してアニメーションプロットをレンダリングするときに問題が発生する

  21. 21

    kivyでボタンとして押すと再生されるアニメーションGIFを使用するにはどうすればよいですか?

  22. 22

    / usr /ディレクトリを削除し、chrootで回復し、Sudoを実行しようとするとセグメンテーション違反(コアダンプ)が発生するようになりました

  23. 23

    トグルクラスを実行するときにアニメーションを再生しないのはなぜですか?

  24. 24

    TextViewをクリックしたときにアニメーションを作成するにはどうすればよいですか?

  25. 25

    Pythonを使用してSeleniumでCSS / Javascriptアニメーションを一連の画像ファイルとしてレンダリングする

  26. 26

    ReactNativeでアニメーションGIFをレンダリングするためのより効率的な方法

  27. 27

    リンクをクリックすると、一時停止したアニメーションの再生状態を実行に変更します

  28. 28

    Androidでアニメーションが終了したときにListViewの可視性をGONEに設定するにはどうすればよいですか?

  29. 29

    状態が変化すると、ダイアログはアニメーションを再生します

ホットタグ

アーカイブ