Help us understand the problem. What is going on with this article?

機械学習とA-frameの連動方法

A-frameで3Dが簡単につくれることを知った

「3Dなんて僕にはまだ無理無理」

そんな風に思っていたのですが、
初心者でも、簡単に、WEB上で3Dをつくれることを、つい先日知りました。

それがA-frame サイトはこちら

WEBサイト上にこんなものを簡単に表示させることができます。

image10.png

じゃあ、この物体動かしてみよう

それぞれのものを動かすのも簡単です。animationを追加すれば、すぐに動かせます。

<a-box position="-1 1.6 -5" animation="property: position; to: 1 8 -10; dur: 2000; easing: linear; loop: true" color="tomato"></a-box>

こんなものを一行加えるだけで、animationが動きます。

じゃあ、teachable Machineと連動させて動かすには?

if文の中にif文書いたり複雑なことをやろうとしてなかなかうまくいかなかったんですが、
関数をつくることが、なんとかできました。

const imageModelURL = 'teachableMachineから取得したURL';

            async function main() {
                // カメラからの映像取得
                const stream = await navigator.mediaDevices.getUserMedia({
                    audio: false,
                    video: true,
                });
                // html内のidがvideoのdomを取得
                const video = document.getElementById('video');
                // videoにカメラ映像を適用
                video.srcObject = stream;

                // 自作モデルのロード
                classifier = ml5.imageClassifier(
                    imageModelURL + 'model.json',
                    video,
                    modelLoaded
                );
                // モデルのロード完了時に実行される
                function modelLoaded() {
                    console.log('Model Loaded!');
                }
                // 繰り返し検出処理
                classifier.classify(onDetect);
                function onDetect(err, results) {
                    console.log(results);
                    if (results[0]) {
                        console.log(results[0].label);
                        if (results[0].label === '動画から取得した情報') {
                            //  "取得情報"を検出すると、上にanimatinが動く関数
                            move();
                        }
                    }
                    classifier.classify(onDetect);   
                }
                //  対象とする物体にanimationを追加。
                function move() {
                    cylinder.setAttribute('animation', 'property: position; to: 0 5 -3; dur: 2000; easing: linear; loop: true');
                }
            }
            main();

kaiser355
ゼロからプロトタイピングを楽しみ、自社サービスを自分でつくれるレベルを目指す経営者です。
protoout-studio
ProtoOut Studioは日本初のプロトタイピング専門スクールです。プログラミングとプランニング(企画)の両方のスキルを兼ね備えた人材輩出を行います。作って発信して、がんがんプロトアウトしていきましょう。
https://protoout.studio
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした