常連

### 実現したいこと
- [ ] Three.jsで、アニメーション付きGLTFモデルをマテリアル名で取得し、シェーダーマテリアルに置き換えたい。

### 前提
GLTFモデルはBlenderのシェイプキーアニメーションで作成しています。下のように球が変形するアニメーションをWeb上で再生するところまでは上手くいきました。
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-09-05/638c9067-a1ce-44b2-a558-7f5c3d0ace2a.png)

### 発生している問題
後述のソースコードの39行目あたりで、メッシュをマテリアル名（bg_mat）で取得してシェーダーマテリアルに置き換えたところ、色は意図通りに変わったのですが、アニメーションが動かなくなってしまいました。
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-09-05/681e0847-72f3-40ef-8065-c1dc26c414ea.png)

アニメーションに関わる何かが上書きされてしまったのでしょうか？
アニメーションが消えてしまう原因や消えない方法をご教示いただけると幸いです。

### 該当のソースコード
```JavaScript
window.addEventListener('load', init);

function init() {
    // レンダラーを作成
    const renderer = new THREE.WebGLRenderer({
        canvas: document.querySelector('#canvas'),
        antialias: true,
        alpha: true,
    });
    // シーンを作成
    const scene = new THREE.Scene();

    // カメラを作成
    // new THREE.PerspectiveCamera(視野角, アスペクト比, near, far)
    const camera = new THREE.PerspectiveCamera(45, 1, 1, 2000);
    camera.fov = 50;
    camera.position.set(0, 0.5, 8);
    // 原点方向を見つめる
    camera.lookAt(0, 0, 0);
    //camera.rotation.x = THREE.Math.DEG2RAD * (-45);
 
    // Load GLTF or GLB
    const loader = new THREE.GLTFLoader();
    const url = '3d/sample.glb';
    
    let model = null;
    // clockを作成する
    const clock = new THREE.Clock();
    loader.load(
        url,
        function (gltf) {
            model = gltf.scene;
            model.traverse((node) => {
                if (!node.isMesh) return;
              });
            model.scale.set(1, 1, 1);
            model.position.set(0, 0, 0);

            //マテリアルを置換
            const bgMesh = getMatbyName(model, "bg_mat");
            //バーテックスシェーダ
            const vertexShader =`void main() {gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);}`;
            //フラグメントシェーダ
            const fragmentShader =`precision mediump float;
            void main() {
            // オレンジ色のRGB値を定義 (1.0, 0.5, 0.0)
            vec3 orangeColor = vec3(1.0, 0.5, 0.0);
            // 最終的に出力される色に代入
            gl_FragColor = vec4(orangeColor, 1.0);
            }`;

            const bgMat = new THREE.ShaderMaterial({
            vertexShader:vertexShader,
             fragmentShader:fragmentShader,
             side:THREE.DoubleSide,
            });

            bgMesh.material = bgMat;
  

            // アニメーションを読み込む
            let mixer = new THREE.AnimationMixer(model);
            gltf.animations.forEach((clip) => {
            mixer.clipAction(clip).play();
            });

            scene.add(model);

        // アニメーションを更新する関数を定義する
        function update() {
            if (mixer) {
                mixer.update(clock.getDelta());
            }
        }

        // アニメーションを再生するイベントを設定する
        renderer.setAnimationLoop(() => {
            update();
            renderer.render(scene, camera);
        });

        },
        function (error) {
            console.log('An error happened');
        }
    );

    //テクスチャをガンマ補正
    renderer.gammaOutput = true;
    renderer.gammaFactor = 2.2;
 
    // ライト追加
    hemisphereLight = new THREE.HemisphereLight(0xffffff, 0x4169e1, 4);
    scene.add(hemisphereLight);

    // カメラコントローラーを作成
    const controls = new THREE.OrbitControls(camera, renderer.domElement);
    controls.enableDamping = true;
    controls.dampingFactor = 0.2;

    // フォグを設定
    scene.fog = new THREE.Fog(0x2a2a5f, 150, 200);

    // 初回実行
    var frame_num = 0;
    tick();
    onResize();
 
    // リサイズイベント発生で実行
    window.addEventListener('resize', onResize);
 
    function onResize() {
        // サイズを取得
        const w = window.innerWidth;
        const h = window.innerHeight;
        // 描画サイズ
        renderer.setSize(w, h);
        // ピクセル比
        renderer.setPixelRatio(window.devicePixelRatio);
        // カメラのアスペクト比を正す
        camera.aspect = w / h;
        camera.updateProjectionMatrix();
        console.log('h' + h + 'h' + h);
        // レンダリング
        renderer.render(scene, camera);
    }

    function tick() {
        requestAnimationFrame(tick);        
        renderer.render(scene, camera);
        controls.update();
        
    }
}

function update() {
    controls.update();
    requestAnimationFrame(update);

}

// 指定したマテリアル名がセットされている[ mesh ] を返します
function getMatbyName(_o, _name){
    let refO = null;

    if(_o.material && _o.material.name.indexOf(_name) > -1 ){
        return _o;
    }

    if(_o.materials){
        for(let i =0; i < _o.materials.length; i++){
            refO = getMatbyName(_o.materials[i], _name );
            if(refO) {return refO;}
        }
    }

    for(let i =0; i < _o.children.length; i++){
        refO = getMatbyName(_o.children[i], _name );
        if(refO) {return refO; }
    }

    return refO; 
}
```

### 補足情報（FW/ツールのバージョンなど）
Blender3.6
three.js r124

【Three.js】アニメーション付きGLTFモデルのマテリアルを置換するとアニメーションが動かなくなる現象を解決したい

## 昨今のホームページ制作におけるフロント実装の技術について

個人的に周りに話を聞いても、今は生のhtml/cssでコードを書いて実装をする話を聞かなくなりました。

そこでシンプルに疑問なのですが、ペライチのLPや簡易的なサイトのコーディングでも基本はReactなどのjsフレームワークを使うことが多いのでしょうか？
また、jsフレームワークでフロント実装をするのがセオリーとして生のhtml/cssで実装するケースもほとんどないのでしょうか？
要素としての実装以外にもアニメーションやパララックスなどのビジュアルの効果もReactなどで完結できるのでしょうか？

WebGLのような技術を使う場合、Reactとの親和性についても気になります。

最近のホームページを見ていると、どうやって実装しているのかわからないようなアニメーションや効果を盛り込んでいるサイトが多くて、すごい技術だなと感動しています。

## 背景、状況

自分自身数年前までコーディングするときは生のhtml,cssを書いてました。
ここ数年はコーディングから遠ざかりデザインの道を歩んでいてコードはほとんど書かなくなりました。
そのため最近のフロントの実装についてシンプルに疑問に感じたため質問しました。



昨今のホームページ制作におけるフロント実装の技術について

### 実現したいこと

unityで作ったゲームをwebGLで正常に動かしたい

### 前提

最近、自分で作ったゲームをunityroomに投稿したいと思い、webGLでbuildまでできたのですが、いざ動かしてみると、正常に動かないです。例えば、消えるはずのオブジェクトが消えなかったり、なぜか会話の最初に戻ったりします。更に明らかに重くなっています。このような時、どうすれば解決できるでしょうか？unityのGameでは想定通り動きました。ゲーム自体はwebでなければ正しく動きます。
### 発生している問題・エラーメッセージ

```
選択肢を押したときに、押したほうのボタンしか消えない
なぜかイベントが巻き戻る
ゲームが重くなる
```
### 
```choisee.cs
using System.Collections;
using System.Collections.Generic;
using TMPro;
using Unity.VisualScripting;
using UnityEngine;


public class choisee : MonoBehaviour
{
    public TextMeshProUGUI textt1;
    text1 text;
    choise choises;
    private void Start()
    {
        GameObject obj = GameObject.Find("Square");
        text = obj.GetComponent<text1>();
        GameObject obj2 = obj.transform.Find("Canvas/21").gameObject;
        choises = obj2.GetComponent<choise>();
    }
    // Start is called before the first frame update
    public void sentakusi(string one)
    {
        textt1.text = one;
        this.gameObject.SetActive(true);
    }
    public void click()
    {
        this.gameObject.SetActive(false);
        text.choose = 2;
        text.choisee = false;
       //ここがうまく動かない
        choises.gameObject.SetActive(false);
        text.ikeeee();
    }
}
```
```choise.cs
using System.Collections;
using System.Collections.Generic;
using TMPro;
using Unity.VisualScripting;
using UnityEngine;


public class choise : MonoBehaviour
{
    public TextMeshProUGUI textt1;
    text1 text;
    choisee choises;
    private void Start()
    {
        GameObject obj = GameObject.Find("Square");
        text = obj.GetComponent<text1>();
        GameObject obj2 = obj.transform.Find("Canvas/22").gameObject;
        choises = obj2.GetComponent<choisee>();
    }
    // Start is called before the first frame update
    public void sentakusi(string one)
    {
        textt1.text = one;
        this.gameObject.SetActive(true);
    }
    public void click()
    {
        this .gameObject.SetActive(false);
        text.choose = 1;
        text.choisee = false;
        text.ikeeee();
       //ここがうまく動かない
        choises.gameObject.SetActive(false);
    }
}
```
```start.cs
using System.Collections;
using System.Linq;
using Unity.VisualScripting;
using UnityEngine;

public class start : MonoBehaviour
{
    SpriteRenderer sprite;
    public bool wait = false;
    text1 text;
    end ending;
    restart res;

    void Start()
    {
        sprite = GetComponent<SpriteRenderer>();
        GameObject obj = GameObject.Find("Square");
        text = obj.GetComponent<text1>();
        Transform obj2 = this.transform.Find("Canvas/end");
        ending = obj2.GetComponent<end>();
        Transform obj3 = this.transform.Find("Canvas/retry");
        res= obj3.GetComponent<restart>();
        // Coroutine を開始する
        StartCoroutine(FadeOut());
    }

    // Coroutine の定義
    IEnumerator FadeOut()
    {
        Color color = sprite.color;
        // 透明度が0より大きい場合
        while (sprite.color.a > 0)
        {
            // 10フレーム待つ
            yield return new WaitForSeconds(10 * Time.deltaTime);
            // 透明度を0.01ずつ減らす
            color.a -= 0.01f;
            sprite.color = color;
        }
        wait = true;
    }
    IEnumerator Black()
    {
        //ここがうまく作動しない
        Color color = sprite.color;
        if (sprite.color.a >= 1.27)
        {
            ending.Theend(text.end);
            res.Reset();
        }
        if (sprite.color.a < 1.27)
        {
            yield return new WaitForSeconds(13 * Time.deltaTime);
            // 透明度を0.01ずつ減らす
            color.a += 0.01f;
            sprite.color = color;
            Blackout();
        }
    }
    public void Blackout() {
        text.choisee = true;
        if (text.end == 1 || text.end == 3 || text.end == 4 || text.end == 6||text.end==7)
        {
            if (text.number.Length == 1)
            {
                if (text.real==5)
                {
                    text.number= new int[4] {1,2,3,4};
                }
                else
                {
                    text.number = new int[1] { 5 };
                }
            }
            else
            {
                text.number = text.number.Where(e => e != text.real).ToArray(); ;
            }
        }
        text.textter = 0;
        text.real = 0;
        text.SAVE();
        StartCoroutine(Black());
    }
}
```


### 試したこと

時間がたってから再度buildしたり、別のブラウザで動かしてみました。

### 補足情報（FW/ツールのバージョンなど）

unityのバージョンは2022.3です。


unityで作ったゲームがブラウザ上で正常に動かない

###前提・実現したいこと
unityでゲームを作っていまして、webGLでビルドして、
ローカル環境ではfirefoxで作動を確認しました。
しかし、unityroomや他のサーバーに上げるとfirefoxでもこのようなエラーメッセージが表示されて起動できませんでした。
ネット上で起動させたいです。

###発生している問題・エラーメッセージ

```
An error occurred running the Unity content this page. See your browser's JavaScript console for more info. The error was
uncaught exception: incorrect header check
```

###試したこと
firefox以外でも試しましたが全てのブラウザでこのメッセージがでました。

Consoleで確認しましたところ

```
Failed to load resource: the server responded with a status of 404 (Not Found)
unity_loader:1 Invoking error handler due to
Uncaught incorrect header check
unity_loader:1 Uncaught incorrect header check

```
と出ました。

###補足情報(言語/FW/ツール等のバージョンなど)
unity 5.5.1f1 64bit

[unity webGL]でビルドしてネットに上げるとAn error occurred running…と出ます

Unity2019.4.x系で作成したゲームをWebGLでビルドし、サイトにアップロード、プレイしようとしたのですが、タイトルからメインのシーンへ遷移するところで動かなくなり、DevelopmentBiludで確認したところ、上記のRuntime Error, memory access out of bounds　というものが発生していることがわかりました。
このエラーは何が原因で起こるもので、どういう解決策が適しているのでしょうか？
試したこと　テクスチャのMaxSizeの変更
短期間で制作したもので、あまりデータサイズが過大になるようなことはしていないとおもいます。

unity WebGL 実行時のメモリ不足エラー　Rantime Error memory access out of bounds について

three.jsでOrbitControlsをimportしたところからエラーが出てしまいます。
具体的には、2行目の
import {OrbitControls} from "./jsm/controls/OrbitControls.js";
と53行目の
controls = new OrbitControls(camera, renderer.domElement);を書くまでは球体が表示されているのですが、この2行を書くと下記のようなエラーが出ます。
Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../".

解決方法を教えていただけないでしょうか。
お手数をおかけしますが、よろしくお願いいたします！！

![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-08-05/1902262c-665b-4598-b70e-63f11be2ea13.png)


index.html
```ここに言語を入力
    <script src="main.js" type="module"></script>
```

main.js
```ここに言語を入力
import * as THREE from './build/three.module.js'; //全ての要素に対してインポートするので*
import {OrbitControls} from "./jsm/controls/OrbitControls.js";

//webブラウザで表示するときには、シーン(scene),カメラ(camera),レンダラー(renderer)が必ず必要

let scene, camera, renderer, pointLight, controls;//ここで書くと、グローバル変数として宣言することになる
//シーンを追加
scene = new THREE.Scene();//Sceneの頭は大文字でかく

//カメラを追加
camera = new THREE.PerspectiveCamera(//PerspectiveCamera(視野角(映す角度),アスペクト比（画面の横と縦の比率。表示する画面サイズを決定),開始距離,終了距離)
    50,//視野角
    window.innerWidth / window.innerHeight,//アスペクト比
    0.1,//開始距離
    1000//終了距離
);
camera.position.set(0, 0, +500);//cameraをz軸のプラスの方向に動かしていく（そうしないとcameraが物体より前に出て映らない）

//レンダラー(カメラで写した要素を変換して、ブラウザに3dとして表示するもの)を追加
renderer = new THREE.WebGLRenderer({alpha: true});//alpha・・透明度を表す。デフォルトではfalse。trueにして透明度を上げると、背景画像が見える
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);//レンダラーをhtmlのbodyタグに表示する
renderer.render(scene, camera);//画面にレンダラーが表示される


//ジオメトリを作成
//SphereGeometry・・・球体のジオメトリ
//three.jsの公式サイトで、documentから検索すると、引数に何を書くか分かる
let ballGeometry = new THREE.SphereGeometry(100, 64, 32);//(radius(半径),widthSegment(ポリゴンの数を増やす。値を大きくすればするほど、より球体に近づく。),heightSegment(ポリゴンの分割数を上げる。より綺麗な球体に近づく。))
//マテリアルを作成
let ballMaterial = new THREE.MeshPhysicalMaterial();//粗さ、金属性、反射率等を設定できる。引数には、{color: 色}や、{map: テクスチャ}など。テクスチャでは、地球の画像を持ってきて球体に貼り付けることができる。
//ジオメトリ（骨格）とマテリアル（色）をここまでで作成しました。それをメッシュ化していきます
//メッシュ化
let ballMesh = new THREE.Mesh(ballGeometry, ballMaterial);//引数としてジオメトリとマテリアルを宣言
scene.add(ballMesh);//sceneにポリゴンを乗せて、cameraで撮影する準備ができる

//平行光源を追加してみよう//上から光が降り注ぐ
let directionalLight = new THREE.DirectionalLight(0xffffff, 2)//引数は色(0xは、16進数を描きますという意味）と、強さをとる
directionalLight.position.set(1, 1, 1);//(1,1,1)の位置から光が降り注ぐようになる
scene.add(directionalLight);

//ポイント光源を追加してみよう//地球の周りを動かすためにグローバルで宣言したいので、5行目のとこで宣言している（なんでここはグローバルじゃない？）
pointLight = new THREE.PointLight(0xffffff, 1);//平行光源と同じく、引数は色と強さ
//今の状態だとポイント光源が地球の中に入ってしまっているので、位置を変える
pointLight.position.set(-200, -200, -200);
scene.add(pointLight);//作ったものはsceneにaddする

//ポイント光源がどこにあるのかを特定する//平行光源のヘルパーとかもあるらしい
let pointLightHelper = new THREE.PointLightHelper(pointLight, 30);//第二引数はヘルパー（菱形みたいなやつ）の大きさを表す
scene.add(pointLightHelper);

//マウス操作ができるようにしよう（グルーバル変数で変数を宣言する）
controls = new OrbitControls(camera, renderer.domElement);

//ポイント光源を球の周りを周りを巡回させる//座標を変数にして動的に変える
//リロードしないと場所が変わらないので、常にぐるぐる回らせるために、アニメート関数に入れて、アニメート関数をフレーム単位で変えていく
function animate(){
    pointLight.position.set(
    200 * Math.sin(Date.now() / 500),
    200 * Math.sin(Date.now() / 1000),
    200 * Math.cos(Date.now() / 500),
);
//レンダリングしてみよう
renderer.render(scene, camera);//これもフレームタイムでレンダリングしないと、画面がフレーム単位でレンダリングされないので、アニメート関数に組み込む

//アニメーション関数をフレーム単位で更新するためには、requestAnimationFrameという関数を使う
requestAnimationFrame(animate);//これだけではアニメート関数を呼んでいない
}
//アニメート関数を呼ぶ
//レンダリングもフレーム単位で更新しないと、画面がレンダリングされないので、アニメート関数に組み込む
animate();



```

three.jsのimportについて

Unityで作ったゲームをビルドしたいのにエラーの原因が分からない

学校で作ったゲームを家のPCに持ち帰って、プラットフォームをwebGLにしてビルドしようとしてエラーが発生。調べてみたり、Unityを再インストールしてみたり、エラー文を翻訳にかけてもよく分かりません。保存先はC:\Users\name\Projectになっていて日本語は含まれていません。
プロジェクト名も日本語は使っておらず。すべて英語です（_は使ってます）。Unity2020.3.14f1を管理者として実行してもダメでした。
別のプロジェクトを用意してビルドしたところ、まったくおなじエラーは発生したのを確認しました。

一つ目

Exception: Failed running C:\Program Files\Unity\Hub\Editor\2020.3.14f1\Editor\Data\il2cpp/build/BeeSettings/offline/bee.exe --useprebuiltbuildprogram --no-colors

stdout:
[             ] Require frontend run.  tundra.dag no longer valid. FileSignature timestamp changed: ../../../../../../../../../../../Users/name/AppData/Local/Stevedore/artifacts/7za-win-x64/38c5b39be2e8_a333cfccb708c88459b3812eb2597ca486ec9b416172543ca3ef8e5cd5f80984.zip
[        0s] Executed build program. Created build graph with 1 nodes.
error: Cannot parse path because it's ..'ing beyond the root: C:/Users/name/UnityWebGL/New Unity Project/Library/Il2cppBuildCache/WebGL/../../../../../../../../../../../.repoconfig (System.ArgumentException)
  at NiceIO.NPath.CollapseDoubleDots
  at NiceIO.NPath.MakeCompletelyWellFormatted
  at NiceIO.NPath..ctor
  at NiceIO.NPath.Combine
  at NiceIO.NPath.RelativeTo
  at System.Linq.Enumerable+WhereSelectArrayIterator`2[TSource,TResult].MoveNext
  at Bee.TundraBackend.TundraBackend.AddFileSignature
  at Bee.TundraBackend.TundraBackend.AddFileAndGlobSignaturesFromOtherTundraFile
  at Bee.StandaloneBeeDriver.CreateBuildGraph
  at Bee.StandaloneBeeDriver.InvokeTundra
  at Bee.StandaloneBeeDriver.BuildMain
  at Bee.StandaloneBeeDriver.Main
stderr:

UnityEditorInternal.Runner.RunProgram (UnityEditor.Utils.Program p, System.String exe, System.String args, System.String workingDirectory, UnityEditor.Scripting.Compilers.CompilerOutputParserBase parser) (at <25e9afc147634a5ca855ab83fab425dd>:0)
UnityEditorInternal.Runner.RunManagedProgram (System.String exe, System.String args, System.String workingDirectory, UnityEditor.Scripting.Compilers.CompilerOutputParserBase parser, System.Action`1[T] setupStartInfo) (at <25e9afc147634a5ca855ab83fab425dd>:0)
UnityEditorInternal.IL2CPPBuilder.RunIl2CppWithArguments (System.Collections.Generic.List`1[T] arguments, System.Action`1[T] setupStartInfo) (at <25e9afc147634a5ca855ab83fab425dd>:0)
UnityEditorInternal.IL2CPPBuilder.ConvertPlayerDlltoCpp (UnityEditor.Il2Cpp.Il2CppBuildPipelineData data) (at <25e9afc147634a5ca855ab83fab425dd>:0)
UnityEditorInternal.IL2CPPBuilder.Run () (at <25e9afc147634a5ca855ab83fab425dd>:0)
UnityEditorInternal.IL2CPPUtils.RunIl2Cpp (System.String stagingAreaData, UnityEditorInternal.IIl2CppPlatformProvider platformProvider, System.Action`1[T] modifyOutputBeforeCompile, UnityEditor.RuntimeClassRegistry runtimeClassRegistry) (at <25e9afc147634a5ca855ab83fab425dd>:0)
UnityEditor.WebGL.WebGlBuildPostprocessor.CompileBuild (UnityEditor.Modules.BuildPostProcessArgs args) (at /Users/bokken/buildslave/unity/build/PlatformDependent/WebGL/Extensions/Unity.WebGL.extensions/BuildPostprocessor.cs:365)
UnityEditor.WebGL.WebGlBuildPostprocessor.PostProcess (UnityEditor.Modules.BuildPostProcessArgs args) (at /Users/bokken/buildslave/unity/build/PlatformDependent/WebGL/Extensions/Unity.WebGL.extensions/BuildPostprocessor.cs:913)
UnityEditor.Modules.DefaultBuildPostprocessor.PostProcess (UnityEditor.Modules.BuildPostProcessArgs args, UnityEditor.BuildProperties& outProperties) (at <25e9afc147634a5ca855ab83fab425dd>:0)
UnityEditor.PostprocessBuildPlayer.Postprocess (UnityEditor.BuildTargetGroup targetGroup, UnityEditor.BuildTarget target, System.String installPath, System.String companyName, System.String productName, System.Int32 width, System.Int32 height, UnityEditor.BuildOptions options, UnityEditor.RuntimeClassRegistry usedClassRegistry, UnityEditor.Build.Reporting.BuildReport report) (at <25e9afc147634a5ca855ab83fab425dd>:0)
UnityEngine.GUIUtility:ProcessEvent(Int32, IntPtr, Boolean&)

二つ目

Build completed with a result of 'Failed' in 45 seconds (45158 ms)
UnityEngine.GUIUtility:ProcessEvent (int,intptr,bool&)

三つ目

UnityEditor.BuildPlayerWindow+BuildMethodException: 2 errors
  at UnityEditor.BuildPlayerWindow+DefaultBuildMethods.BuildPlayer (UnityEditor.BuildPlayerOptions options) [0x002ca] in <25e9afc147634a5ca855ab83fab425dd>:0 
  at UnityEditor.BuildPlayerWindow.CallBuildMethods (System.Boolean askForBuildLocation, UnityEditor.BuildOptions defaultBuildOptions) [0x00080] in <25e9afc147634a5ca855ab83fab425dd>:0 
UnityEngine.GUIUtility:ProcessEvent (int,intptr,bool&)

Unityでビルドしようとするとエラーが起こる

①Unityroomに投稿したゲームを自機が動くシーンでフルスクリーン表示すると敵の沸く位置がずれて余白の上に表示される
**※フルスクリーンしなければ想定した位置に敵がちゃんといる**
②タイトル画面の話になりますがUnityroomのWebG設定の表示サイズを横1280縦720にしたのにフルスクリーン表示にするとはみ出てるやつが描画されます。ただしタイトル画面の方は位置がずれたりはしてないぽい
（具体的にはタイトル画面の背景にある黒色に近いでかい戦闘機の先端が表示されてしまう）
**※フルスクリーンにしなければ表示させたくないとこも表示されない**

③あと上の余白の色だけ青色なのは使用なのでしょうか
投稿したUnityroom＜**https://unityroom.com/games/hositukage-mu2**＞
※一応限定公開にしております

誰か解決案くださるとありがたいです。

開発環境表記
---
2020年の1.14f1
プラットフォームはwebGL
詳細設定表記
---
Unityエディターのキャンバスの設定は横1280 縦720です
unityroomのwebgl設定も上記の情報と同じです

---
①回答者からCanvasのインスペクタビューにある、Canvas Scaler(script)　＞　UI Scale Modeが
Constant Pixel Sizeになっていると似たようなことが起きるらしくScale With Screen Sizeに変更してみると治ると言われましたが既にScale With Screen Sizeにはなっておりました

②webGLから別のプラットフォームを試してみましたが変わりませんでした
別のプラットフォーム名は（pc,Mac&Linux Standalone）
**※ビルド前の場合はゲームビューを拡大しても想定した位置にキャラがちゃんといます**
ビルド設定
---
![イメージ説明](02611be6ecba75485456fefd2274b5e3.png)
titlescene
---
![イメージ説明](0d25d44cc102382deff2e4b9f33f36ec.png)
![イメージ説明](f19551e52f18114d2b53ace933b2ba78.png)
![イメージ説明](1491e3b731c975ebc35b64b797ee4480.png)
![イメージ説明](92b72a8db26467c37093a59f51cf8f84.png)
![イメージ説明](850b6f1c01721a2acc41eab68284f796.png)

![イメージ説明](d7130c16ac7181833ed3a6ff78257858.png)
![イメージ説明](3eb1d39bcb4393543e3314a0c06de0bc.png)
![イメージ説明](7cad35ce9828a5e7610966228d755076.png)
![イメージ説明](c91a0d141f3ac8ce883459bbec4b110d.png)
![イメージ説明](578367ecd9e66f2c46ea9a178bee2764.png)

![イメージ説明](88a82f69100b8a95e4980aa74419e906.png)
![イメージ説明](3ee77c4d4336e90ce1138d53f786be0c.png)
mainscene
---
![イメージ説明](41ccd6c55af20c126cff1b99a22ecf57.png)
![イメージ説明](1610f3e0fcd75e1155f924a42878f862.png)
![イメージ説明](00d78763a241df4bf872b89c63e102b3.png)
![イメージ説明](4da9787ee8e7fb5c482a609a003dd5de.png)
![イメージ説明](21dbdbff956d339206b3725d551718b3.png)

![イメージ説明](bba561f9675b956e02df7d44f7e676bf.png)