2018-10-11 06:07:56

License: MIT License

Fork: 1

Fav: 0

View: 362

Play
Stop
Reload

Fullscreen

Smart Phone

Fork tree

Readme
JavaScript 461 lines
HTML 7 lines
CSS 13 lines

Babylon.js v3.3.0 でカメラの位置操作を対象オブジェクト周りでできるようにしてみるテスト

var canvas = document.getElementById("renderCanvas");

var box;
var camera;

var isLeftBtnDwn = false;
var isForwardBtnDwn = false;
var isBackwardBtnDwn = false;
var isRightBtnDwn = false;

//カメラ回転用
var rot = 0; // 角度
var targetRot = 0;
var cameraDistance = -14;

var createScene = function () {
    
        var scene = new BABYLON.Scene(engine);

// This creates and positions a free camera (non-mesh)
        camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);
        // This attaches the camera to the canvas
        camera.attachControl(canvas, true);
    
        //ここではカメラの高さのみ設定　position.xとposition.zは画面描画時に角度計算より設定される
        camera.position.y  =  7;    
       
        // create a basic light, aiming 0,1,0 - meaning, to the sky
        var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0,1,0), scene);
        
        // create a built-in "sphere" shape; its constructor takes 6 params: name, segment, diameter, scene, updatable, sideOrientation 
        var sphere = BABYLON.Mesh.CreateSphere('sphere1', 16, 2, scene);
        
        // move the sphere 
        sphere.position.y = 1;
        sphere.position.z = 5;

box = BABYLON.Mesh.CreateBox("box", 2.0, scene);
        var material = new BABYLON.StandardMaterial("material01", scene);
        box.material = material;
        
        material.diffuseColor = new BABYLON.Color3(1, 0, 0);

//boxがgroundとして使用しているplaneオブジェクトの上にbox全体が表示されるように設定 
        box.position.y = 1;

//boxオブジェクトをカメラのターゲットとして設定
        camera.lockedTarget = box; //version 2.5 onwards
    
        // create a built-in "ground" shape;
        var ground = BABYLON.Mesh.CreateGround('ground1', 16, 16, 2, scene);

//3Dオブジェクトに物理演算により衝突機能をもたせる
        scene.enablePhysics();
    
        box.physicsImpostor = new BABYLON.PhysicsImpostor(box, BABYLON.PhysicsImpostor.BoxImpostor, { mass: 1, restitution: 0.9 }, scene);
	
        sphere.physicsImpostor = new BABYLON.PhysicsImpostor(sphere, BABYLON.PhysicsImpostor.SphereImpostor, { mass: 1, restitution: 0.9 }, scene);
        ground.physicsImpostor = new BABYLON.PhysicsImpostor(ground, BABYLON.PhysicsImpostor.BoxImpostor, { mass: 0, restitution: 0.9 }, scene);
    
    
        //ボタンと表示用ラベルからなるユーザーインターフェースを作成・設定
        
        // UI
        var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI");

//ここから上段UIの設定

//上段ボタンまとめ用パネル　ここにボタンをまとめてからadvancedTextureに追加    
        var UiPanel01 = new BABYLON.GUI.StackPanel("horizontal");
        UiPanel01.isVertical = false;
        UiPanel01.top = "-40%";
        UiPanel01.left = "-9%";
        UiPanel01.width = "400px";
        UiPanel01.height = "160px";
        UiPanel01.fontSize = "14px";
        UiPanel01.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER;
        UiPanel01.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_CENTER;
        advancedTexture.addControl(UiPanel01);

//上段 カメラ左回転ボタン
        var camLeftRotButton = BABYLON.GUI.Button.CreateSimpleButton("leftRotBut", "LeftRot");
        camLeftRotButton.paddingLeft = "10px";
        camLeftRotButton.width = "80px";
        camLeftRotButton.height = "50px";
        camLeftRotButton.cornerRadius = 5;
        camLeftRotButton.color = "white";
        camLeftRotButton.background = "black";

camLeftRotButton.onPointerDownObservable.add(()=> {
            targetRot = targetRot + 60; 
            text.text = "カメラ左回転ボタン \nが押されました";
        });
    
        camLeftRotButton.onPointerUpObservable.add(()=> {
            text.text = "カメラ左回転ボタン \nが開放されました";
        });
    
        camLeftRotButton.onPointerOutObservable.add(()=> {
            text.text = "カメラ左回転ボタン \nが開放されました";
        });
        
        UiPanel01.addControl(camLeftRotButton);
    
        //上段 カメラ右回転ボタン
        var camRightRotButton = BABYLON.GUI.Button.CreateSimpleButton("rightRotBut", "RightRot");
        camRightRotButton.paddingLeft = "10px";
        camRightRotButton.width = "80px";
        camRightRotButton.height = "50px";
        camRightRotButton.cornerRadius = 5;
        camRightRotButton.color = "white";
        camRightRotButton.background = "black";

camRightRotButton.onPointerDownObservable.add(()=> {
            targetRot = targetRot - 60; 
            text.text = "カメラ右回転ボタン \nが押されました";
        });
    
        camRightRotButton.onPointerUpObservable.add(()=> {
            text.text = "カメラ右回転ボタン \nが開放されました";
        });
    
        camRightRotButton.onPointerOutObservable.add(()=> {
            text.text = "カメラ右回転ボタン \nが開放されました";
        });
    
        UiPanel01.addControl(camRightRotButton);

//上段 カメラ高さ変更ボタン
        var camHeightButton = BABYLON.GUI.Button.CreateSimpleButton("heightBut", "Height");
        camHeightButton.paddingLeft = "10px";
        camHeightButton.width = "80px";
        camHeightButton.height = "50px";
        camHeightButton.cornerRadius = 5;
        camHeightButton.color = "white";
        camHeightButton.background = "black";

camHeightButton.onPointerDownObservable.add(()=> {
            camera.position.y = camera.position.y + 2;
            if (camera.position.y > 15) {
                camera.position.y = 7;
            }                                                    
            text.text = "カメラ高さ変更ボタン \nが押されました";
        });
    
        camHeightButton.onPointerUpObservable.add(()=> {
            text.text = "カメラ高さ変更ボタン \nが開放されました";
        });
    
        camHeightButton.onPointerOutObservable.add(()=> {
            text.text = "カメラ高さ変更ボタン \nが開放されました";
        });
    
        UiPanel01.addControl(camHeightButton);
 
    
        //上段 カメラ距離変更ボタン
        var camDistanceButton = BABYLON.GUI.Button.CreateSimpleButton("distanceBut", "Distance");
        camDistanceButton.paddingLeft = "10px";
        camDistanceButton.width = "80px";
        camDistanceButton.height = "50px";
        camDistanceButton.cornerRadius = 5;
        camDistanceButton.color = "white";
        camDistanceButton.background = "black";

camDistanceButton.onPointerDownObservable.add(()=> {
            cameraDistance = cameraDistance + 2;
            if (cameraDistance > -8){
                cameraDistance = -20;
            } 
            text.text = "カメラ距離変更ボタン \nが押されました";
        });
    
        camDistanceButton.onPointerUpObservable.add(()=> {
            text.text = "カメラ距離変更ボタン \nが開放されました";
        });
    
        camDistanceButton.onPointerOutObservable.add(()=> {
            text.text = "カメラ距離変更ボタン \nが開放されました";
        });
        
        UiPanel01.addControl(camDistanceButton);
 
    
        //上段 カメラを初期状態にもどすボタン
        var camDefaultButton = BABYLON.GUI.Button.CreateSimpleButton("defaultBut", "Default");
        camDefaultButton.paddingLeft = "10px";
        camDefaultButton.width = "69px";
        camDefaultButton.height = "50px";
        camDefaultButton.cornerRadius = 5;
        camDefaultButton.color = "white";
        camDefaultButton.background = "black";

camDefaultButton.onPointerDownObservable.add(()=> {

camera.position.y  =  7;
            targetRot = 0;
            cameraDistance = -14;   
                                                     
            text.text = "カメラ状態リセットボタン \nが押されました";
        });
    
        camDefaultButton.onPointerUpObservable.add(()=> {
            text.text = "カメラ状態リセットボタン \nが開放されました";
        });
    
        camDefaultButton.onPointerOutObservable.add(()=> {
            text.text = "カメラ状態リセットボタン \nが開放されました";
        });
        
        UiPanel01.addControl(camDefaultButton);

//ここから下段UIの設定
    
        //下段　表示用ラベル　ラベル部分設定　直接advancedTextureに追加
        var label = new BABYLON.GUI.Rectangle("label");
        label.background = "#00ffff";
        label.height = "60px";
        label.alpha = 0.5;
        label.width = "300px";
        label.cornerRadius = 25;
        label.thickness = 1;
        //label2.linkOffsetY = 30;
        label.top = "5%";
        label.paddingLeft = "10px";
        label.paddingRight = "10px";
        advancedTexture.addControl(label); 
        //下段　表示用ラベル　テキスト部分設定　ラベルに追加
        var text = new BABYLON.GUI.TextBlock();
        text.text = "てすと";
        text.color = "black";
        text.fontSize = "20px";
        label.addControl(text);

//下段ボタンまとめ用パネル　ここにボタンをまとめてからadvancedTextureに追加    
        var UiPanel02 = new BABYLON.GUI.StackPanel("horizontal");
        UiPanel02.isVertical = false;
        UiPanel02.top = "30%";
        UiPanel02.width = "360px";
        UiPanel02.height = "160px";
        UiPanel02.fontSize = "14px";
        UiPanel02.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER;
        UiPanel02.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_CENTER;
        advancedTexture.addControl(UiPanel02);

//下段 左ボタン
        var leftButton = BABYLON.GUI.Button.CreateSimpleButton("leftBut", "left");
        leftButton.paddingLeft = "10px";
        leftButton.width = "100px";
        leftButton.height = "50px";
        leftButton.cornerRadius = 5;
        leftButton.color = "white";
        leftButton.background = "black";

leftButton.onPointerDownObservable.add(()=> {
            text.text = "左ぼたん \nが押されました";
            isLeftBtnDwn = true;
        });
    
        leftButton.onPointerUpObservable.add(()=> {
            text.text = "左ぼたん \nが開放されました";
            isLeftBtnDwn = false;
        });
    
        leftButton.onPointerOutObservable.add(()=> {
            text.text = "左ぼたん \nが開放されました";
            isLeftBtnDwn = false;
        });
        
        UiPanel02.addControl(leftButton);
    
        //下段 前進ボタン
        var forwardButton = BABYLON.GUI.Button.CreateSimpleButton("forwardBut", "forward");
        forwardButton.paddingLeft = "30px";
        forwardButton.paddingTop = "-50px";
        forwardButton.paddingBottom = "50px";
        forwardButton.paddingRight = "-20px";
        forwardButton.width = "100px";
        forwardButton.height = "50px";
        forwardButton.cornerRadius = 5;
        forwardButton.color = "white";
        forwardButton.background = "black";

forwardButton.onPointerDownObservable.add(()=> {
            text.text = "前進ぼたん \nが押されました";
            isForwardBtnDwn = true;
        });
    
        forwardButton.onPointerUpObservable.add(()=> {
            text.text = "前進ぼたん \nが開放されました";
            isForwardBtnDwn = false;
        });
    
        forwardButton.onPointerOutObservable.add(()=> {
            text.text = "前進ぼたん \nが開放されました";
            isForwardBtnDwn = false;
        });
    
        UiPanel02.addControl(forwardButton);

//下段 後退ボタン
        var backwardButton = BABYLON.GUI.Button.CreateSimpleButton("backwardBut", "backward");
        backwardButton.paddingLeft = "-70px";
        backwardButton.paddingTop = "50px";
        backwardButton.paddingBottom = "-50px";
        backwardButton.paddingRight = "30px";
        backwardButton.width = "50px";
        backwardButton.height = "50px";
        backwardButton.cornerRadius = 5;
        backwardButton.color = "white";
        backwardButton.background = "black";

backwardButton.onPointerDownObservable.add(()=> {
            text.text = "後退ぼたん \nが押されました";
            isBackwardBtnDwn = true;
        });
    
        backwardButton.onPointerUpObservable.add(()=> {
            text.text = "後退ぼたん \nが開放されました";
            isBackwardBtnDwn = false;
        });
    
        backwardButton.onPointerOutObservable.add(()=> {
            text.text = "後退ぼたん \nが開放されました";
            isBackwardBtnDwn = false;
        });
    
        UiPanel02.addControl(backwardButton);
    
        //下段 右ボタン
        var rightButton = BABYLON.GUI.Button.CreateSimpleButton("rightButt", "right");
        rightButton.paddingRight = "10px";
        rightButton.width = "100px";
        rightButton.height = "50px";
        rightButton.cornerRadius = 5;
        rightButton.color = "white";
        rightButton.background = "black";

rightButton.onPointerDownObservable.add(()=> {
            text.text = "右ぼたん \nが押されました";
            isRightBtnDwn = true;
        });
    
        rightButton.onPointerUpObservable.add(()=> {
            text.text = "右ぼたん \nが開放されました";
            isRightBtnDwn = false;
        });
    
        rightButton.onPointerOutObservable.add(()=> {
            text.text = "右ぼたん \nが開放されました";
            isRightBtnDwn = false;
        });
        
        UiPanel02.addControl(rightButton);

return scene;
};

var engine = new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true });
var scene = createScene();

engine.runRenderLoop(function () {
    if (scene) {
        
        //Leftボタン押下時　Boxを左に移動
        if(isLeftBtnDwn) { 
            box.position.x = box.position.x - 0.1;
        }
        
        //Forwardボタン押下時　Boxを前進させる
        if(isForwardBtnDwn) {
            box.position.z = box.position.z + 0.1;
        }    
        
        //Backwardボタン押下時　Boxを後退させる
        if(isBackwardBtnDwn) {
            box.position.z = box.position.z - 0.1;
        }    
        
        //Rightボタン押下時　Boxを右に移動
        if(isRightBtnDwn) {
            box.position.x = box.position.x + 0.1;
        }

//rot += 0.5; // 毎フレーム角度を0.5度ずつ足していく
        // イージングの公式を用いて滑らかにする
        // 値 += (目標値 - 現在の値) * 減速値
        rot += (targetRot - rot) * 0.05;

// 角度に応じてカメラの位置を設定
        camera.position.x = box.position.x + cameraDistance * Math.sin(rot * Math.PI / 180);
        camera.position.z = box.position.z + cameraDistance * Math.cos(rot * Math.PI / 180);

scene.render();
    }
});

// Resize
window.addEventListener("resize", function () {
    engine.resize();
});

Babylon.js v3.3.0 でカメラの位置操作を対象オブジェクト周りでできるようにしてみるテスト

// forked from siouxcitizen2's "Babylon.js v3.3.0 で衝突判定つき3Dオブジェクトを操作してみるテスト" http://jsdo.it/siouxcitizen2/mM6o // forked from siouxcitizen2's "Babylon.js v3.3.0 でGUIボタンでBox操作してみるテスト" http://jsdo.it/siouxcitizen2/qSTT // forked from siouxcitizen2's "Babylon.js v3.3.0 でGUIのボタン・ラベルの機能いろいろテスト" http://jsdo.it/siouxcitizen2/Q9ug // forked from siouxcitizen2's "Babylon.js v3.3.0 でSound on Mesh再生機能テスト" http://jsdo.it/siouxcitizen2/qI2M // forked from siouxcitizen2's "Babylon.js v3.3.0 でSound再生機能テスト" http://jsdo.it/siouxcitizen2/Cpqv // forked from siouxcitizen2's "Babylon.js v3.3.0 で3D GUI（MeshButton3D）機能テスト" http://jsdo.it/siouxcitizen2/S5i8 // forked from siouxcitizen2's "Babylon.js v3.3.0 でGUI機能テスト" http://jsdo.it/siouxcitizen2/08qP // forked from siouxcitizen2's "Babylon.js v3.3.0 で3D GUI機能テスト" http://jsdo.it/siouxcitizen2/aTB7 Babylon.js Version 3.3.0 のライブラリを使用してみました Babylon.jsのサンプルがある「Babylon.js Playground」からのコードを参考にしてカメラがターゲット対象として3Dオブジェクト（box）の周りを移動できるようにしてみました以下のような操作ができます「LeftRot」でカメラがboxのまわりを左周り(な感じで)回転「RightRot」でカメラがboxのまわりを右周り(な感じで)回転「Height」でカメラの高さを変更「Distance」でカメラのboxからの距離を変更「Default」でカメラの位置を最初の場所にもどす前に作成した以下の自分のコードを参考にしました Three.js r70　で自前でカメラ操作機能作成(WebGL使用) http://jsdo.it/siouxcitizen/8bYv Three.js r70(WebGL使用)とCreateJSでインターフェース実験 http://jsdo.it/siouxcitizen/4Knh Three.js r70(WebGL使用)とCreateJSでインターフェース実験２ http://jsdo.it/siouxcitizen/sIW9 以下のサイト・コードも参考にさせていただきました Position and Rotation https://doc.babylonjs.com/babylon101/position https://ics.media/tutorial-three/camera_position.html Three.jsのカメラの制御 WebGL版Away3D入門―第4回カメラの制御方法 http://ics-web.jp/lab/archives/2632 // forked from siouxcitizen2's "Babylon.js v3.3.0 で衝突判定つき3Dオブジェクトを操作してみるテスト" http://jsdo.it/siouxcitizen2/mM6o // forked from siouxcitizen2's "Babylon.js v3.3.0 でGUIボタンでBox操作してみるテスト" http://jsdo.it/siouxcitizen2/qSTT // forked from siouxcitizen2's "Babylon.js v3.3.0 でGUIのボタン・ラベルの機能いろいろテスト" http://jsdo.it/siouxcitizen2/Q9ug // forked from siouxcitizen2's "Babylon.js v3.3.0 でSound on Mesh再生機能テスト" http://jsdo.it/siouxcitizen2/qI2M // forked from siouxcitizen2's "Babylon.js v3.3.0 でSound再生機能テスト" http://jsdo.it/siouxcitizen2/Cpqv // forked from siouxcitizen2's "Babylon.js v3.3.0 で3D GUI（MeshButton3D）機能テスト" http://jsdo.it/siouxcitizen2/S5i8 // forked from siouxcitizen2's "Babylon.js v3.3.0 でGUI機能テスト" http://jsdo.it/siouxcitizen2/08qP // forked from siouxcitizen2's "Babylon.js v3.3.0 で3D GUI機能テスト" http://jsdo.it/siouxcitizen2/aTB7 // //Babylon.js Version 3.3.0 のライブラリを使用してみました // //Babylon.jsのサンプルがある「Babylon.js Playground」からのコードを参考にして //カメラがターゲット対象として3Dオブジェクト（box）の周りを移動できるようにしてみました //以下のような操作ができます // //「LeftRot」でカメラがboxのまわりを左周り(な感じで)回転 //「RightRot」でカメラがboxのまわりを右周り(な感じで)回転 //「Height」でカメラの高さを変更 //「Distance」でカメラのboxからの距離を変更 //「Default」でカメラの位置を最初の場所にもどす // // // // //前に作成した以下の自分のコードを参考にしました // //Three.js r70　で自前でカメラ操作機能作成(WebGL使用) //http://jsdo.it/siouxcitizen/8bYv // //Three.js r70(WebGL使用)とCreateJSでインターフェース実験 //http://jsdo.it/siouxcitizen/4Knh // //Three.js r70(WebGL使用)とCreateJSでインターフェース実験２ //http://jsdo.it/siouxcitizen/sIW9 // // // //以下のサイト・コードも参考にさせていただきました // //Position and Rotation //https://doc.babylonjs.com/babylon101/position // //https://ics.media/tutorial-three/camera_position.html //Three.jsのカメラの制御 // //WebGL版Away3D入門―第4回カメラの制御方法 //http://ics-web.jp/lab/archives/2632 // var canvas = document.getElementById("renderCanvas"); var box; var camera; var isLeftBtnDwn = false; var isForwardBtnDwn = false; var isBackwardBtnDwn = false; var isRightBtnDwn = false; //カメラ回転用 var rot = 0; // 角度 var targetRot = 0; var cameraDistance = -14; var createScene = function () { var scene = new BABYLON.Scene(engine); // This creates and positions a free camera (non-mesh) camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene); // This attaches the camera to the canvas camera.attachControl(canvas, true); //ここではカメラの高さのみ設定　position.xとposition.zは画面描画時に角度計算より設定される camera.position.y = 7; // create a basic light, aiming 0,1,0 - meaning, to the sky var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0,1,0), scene); // create a built-in "sphere" shape; its constructor takes 6 params: name, segment, diameter, scene, updatable, sideOrientation var sphere = BABYLON.Mesh.CreateSphere('sphere1', 16, 2, scene); // move the sphere sphere.position.y = 1; sphere.position.z = 5; box = BABYLON.Mesh.CreateBox("box", 2.0, scene); var material = new BABYLON.StandardMaterial("material01", scene); box.material = material; material.diffuseColor = new BABYLON.Color3(1, 0, 0); //boxがgroundとして使用しているplaneオブジェクトの上にbox全体が表示されるように設定 box.position.y = 1; //boxオブジェクトをカメラのターゲットとして設定 camera.lockedTarget = box; //version 2.5 onwards // create a built-in "ground" shape; var ground = BABYLON.Mesh.CreateGround('ground1', 16, 16, 2, scene); //3Dオブジェクトに物理演算により衝突機能をもたせる scene.enablePhysics(); box.physicsImpostor = new BABYLON.PhysicsImpostor(box, BABYLON.PhysicsImpostor.BoxImpostor, { mass: 1, restitution: 0.9 }, scene); sphere.physicsImpostor = new BABYLON.PhysicsImpostor(sphere, BABYLON.PhysicsImpostor.SphereImpostor, { mass: 1, restitution: 0.9 }, scene); ground.physicsImpostor = new BABYLON.PhysicsImpostor(ground, BABYLON.PhysicsImpostor.BoxImpostor, { mass: 0, restitution: 0.9 }, scene); //ボタンと表示用ラベルからなるユーザーインターフェースを作成・設定 // UI var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI"); //ここから上段UIの設定 //上段ボタンまとめ用パネル　ここにボタンをまとめてからadvancedTextureに追加 var UiPanel01 = new BABYLON.GUI.StackPanel("horizontal"); UiPanel01.isVertical = false; UiPanel01.top = "-40%"; UiPanel01.left = "-9%"; UiPanel01.width = "400px"; UiPanel01.height = "160px"; UiPanel01.fontSize = "14px"; UiPanel01.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER; UiPanel01.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_CENTER; advancedTexture.addControl(UiPanel01); //上段カメラ左回転ボタン var camLeftRotButton = BABYLON.GUI.Button.CreateSimpleButton("leftRotBut", "LeftRot"); camLeftRotButton.paddingLeft = "10px"; camLeftRotButton.width = "80px"; camLeftRotButton.height = "50px"; camLeftRotButton.cornerRadius = 5; camLeftRotButton.color = "white"; camLeftRotButton.background = "black"; camLeftRotButton.onPointerDownObservable.add(()=> { targetRot = targetRot + 60; text.text = "カメラ左回転ボタン \nが押されました"; }); camLeftRotButton.onPointerUpObservable.add(()=> { text.text = "カメラ左回転ボタン \nが開放されました"; }); camLeftRotButton.onPointerOutObservable.add(()=> { text.text = "カメラ左回転ボタン \nが開放されました"; }); UiPanel01.addControl(camLeftRotButton); //上段カメラ右回転ボタン var camRightRotButton = BABYLON.GUI.Button.CreateSimpleButton("rightRotBut", "RightRot"); camRightRotButton.paddingLeft = "10px"; camRightRotButton.width = "80px"; camRightRotButton.height = "50px"; camRightRotButton.cornerRadius = 5; camRightRotButton.color = "white"; camRightRotButton.background = "black"; camRightRotButton.onPointerDownObservable.add(()=> { targetRot = targetRot - 60; text.text = "カメラ右回転ボタン \nが押されました"; }); camRightRotButton.onPointerUpObservable.add(()=> { text.text = "カメラ右回転ボタン \nが開放されました"; }); camRightRotButton.onPointerOutObservable.add(()=> { text.text = "カメラ右回転ボタン \nが開放されました"; }); UiPanel01.addControl(camRightRotButton); //上段カメラ高さ変更ボタン var camHeightButton = BABYLON.GUI.Button.CreateSimpleButton("heightBut", "Height"); camHeightButton.paddingLeft = "10px"; camHeightButton.width = "80px"; camHeightButton.height = "50px"; camHeightButton.cornerRadius = 5; camHeightButton.color = "white"; camHeightButton.background = "black"; camHeightButton.onPointerDownObservable.add(()=> { camera.position.y = camera.position.y + 2; if (camera.position.y > 15) { camera.position.y = 7; } text.text = "カメラ高さ変更ボタン \nが押されました"; }); camHeightButton.onPointerUpObservable.add(()=> { text.text = "カメラ高さ変更ボタン \nが開放されました"; }); camHeightButton.onPointerOutObservable.add(()=> { text.text = "カメラ高さ変更ボタン \nが開放されました"; }); UiPanel01.addControl(camHeightButton); //上段カメラ距離変更ボタン var camDistanceButton = BABYLON.GUI.Button.CreateSimpleButton("distanceBut", "Distance"); camDistanceButton.paddingLeft = "10px"; camDistanceButton.width = "80px"; camDistanceButton.height = "50px"; camDistanceButton.cornerRadius = 5; camDistanceButton.color = "white"; camDistanceButton.background = "black"; camDistanceButton.onPointerDownObservable.add(()=> { cameraDistance = cameraDistance + 2; if (cameraDistance > -8){ cameraDistance = -20; } text.text = "カメラ距離変更ボタン \nが押されました"; }); camDistanceButton.onPointerUpObservable.add(()=> { text.text = "カメラ距離変更ボタン \nが開放されました"; }); camDistanceButton.onPointerOutObservable.add(()=> { text.text = "カメラ距離変更ボタン \nが開放されました"; }); UiPanel01.addControl(camDistanceButton); //上段カメラを初期状態にもどすボタン var camDefaultButton = BABYLON.GUI.Button.CreateSimpleButton("defaultBut", "Default"); camDefaultButton.paddingLeft = "10px"; camDefaultButton.width = "69px"; camDefaultButton.height = "50px"; camDefaultButton.cornerRadius = 5; camDefaultButton.color = "white"; camDefaultButton.background = "black"; camDefaultButton.onPointerDownObservable.add(()=> { camera.position.y = 7; targetRot = 0; cameraDistance = -14; text.text = "カメラ状態リセットボタン \nが押されました"; }); camDefaultButton.onPointerUpObservable.add(()=> { text.text = "カメラ状態リセットボタン \nが開放されました"; }); camDefaultButton.onPointerOutObservable.add(()=> { text.text = "カメラ状態リセットボタン \nが開放されました"; }); UiPanel01.addControl(camDefaultButton); //ここから下段UIの設定 //下段　表示用ラベル　ラベル部分設定　直接advancedTextureに追加 var label = new BABYLON.GUI.Rectangle("label"); label.background = "#00ffff"; label.height = "60px"; label.alpha = 0.5; label.width = "300px"; label.cornerRadius = 25; label.thickness = 1; //label2.linkOffsetY = 30; label.top = "5%"; label.paddingLeft = "10px"; label.paddingRight = "10px"; advancedTexture.addControl(label); //下段　表示用ラベル　テキスト部分設定　ラベルに追加 var text = new BABYLON.GUI.TextBlock(); text.text = "てすと"; text.color = "black"; text.fontSize = "20px"; label.addControl(text); //下段ボタンまとめ用パネル　ここにボタンをまとめてからadvancedTextureに追加 var UiPanel02 = new BABYLON.GUI.StackPanel("horizontal"); UiPanel02.isVertical = false; UiPanel02.top = "30%"; UiPanel02.width = "360px"; UiPanel02.height = "160px"; UiPanel02.fontSize = "14px"; UiPanel02.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER; UiPanel02.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_CENTER; advancedTexture.addControl(UiPanel02); //下段左ボタン var leftButton = BABYLON.GUI.Button.CreateSimpleButton("leftBut", "left"); leftButton.paddingLeft = "10px"; leftButton.width = "100px"; leftButton.height = "50px"; leftButton.cornerRadius = 5; leftButton.color = "white"; leftButton.background = "black"; leftButton.onPointerDownObservable.add(()=> { text.text = "左ぼたん \nが押されました"; isLeftBtnDwn = true; }); leftButton.onPointerUpObservable.add(()=> { text.text = "左ぼたん \nが開放されました"; isLeftBtnDwn = false; }); leftButton.onPointerOutObservable.add(()=> { text.text = "左ぼたん \nが開放されました"; isLeftBtnDwn = false; }); UiPanel02.addControl(leftButton); //下段前進ボタン var forwardButton = BABYLON.GUI.Button.CreateSimpleButton("forwardBut", "forward"); forwardButton.paddingLeft = "30px"; forwardButton.paddingTop = "-50px"; forwardButton.paddingBottom = "50px"; forwardButton.paddingRight = "-20px"; forwardButton.width = "100px"; forwardButton.height = "50px"; forwardButton.cornerRadius = 5; forwardButton.color = "white"; forwardButton.background = "black"; forwardButton.onPointerDownObservable.add(()=> { text.text = "前進ぼたん \nが押されました"; isForwardBtnDwn = true; }); forwardButton.onPointerUpObservable.add(()=> { text.text = "前進ぼたん \nが開放されました"; isForwardBtnDwn = false; }); forwardButton.onPointerOutObservable.add(()=> { text.text = "前進ぼたん \nが開放されました"; isForwardBtnDwn = false; }); UiPanel02.addControl(forwardButton); //下段後退ボタン var backwardButton = BABYLON.GUI.Button.CreateSimpleButton("backwardBut", "backward"); backwardButton.paddingLeft = "-70px"; backwardButton.paddingTop = "50px"; backwardButton.paddingBottom = "-50px"; backwardButton.paddingRight = "30px"; backwardButton.width = "50px"; backwardButton.height = "50px"; backwardButton.cornerRadius = 5; backwardButton.color = "white"; backwardButton.background = "black"; backwardButton.onPointerDownObservable.add(()=> { text.text = "後退ぼたん \nが押されました"; isBackwardBtnDwn = true; }); backwardButton.onPointerUpObservable.add(()=> { text.text = "後退ぼたん \nが開放されました"; isBackwardBtnDwn = false; }); backwardButton.onPointerOutObservable.add(()=> { text.text = "後退ぼたん \nが開放されました"; isBackwardBtnDwn = false; }); UiPanel02.addControl(backwardButton); //下段右ボタン var rightButton = BABYLON.GUI.Button.CreateSimpleButton("rightButt", "right"); rightButton.paddingRight = "10px"; rightButton.width = "100px"; rightButton.height = "50px"; rightButton.cornerRadius = 5; rightButton.color = "white"; rightButton.background = "black"; rightButton.onPointerDownObservable.add(()=> { text.text = "右ぼたん \nが押されました"; isRightBtnDwn = true; }); rightButton.onPointerUpObservable.add(()=> { text.text = "右ぼたん \nが開放されました"; isRightBtnDwn = false; }); rightButton.onPointerOutObservable.add(()=> { text.text = "右ぼたん \nが開放されました"; isRightBtnDwn = false; }); UiPanel02.addControl(rightButton); return scene; }; var engine = new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true }); var scene = createScene(); engine.runRenderLoop(function () { if (scene) { //Leftボタン押下時　Boxを左に移動 if(isLeftBtnDwn) { box.position.x = box.position.x - 0.1; } //Forwardボタン押下時　Boxを前進させる if(isForwardBtnDwn) { box.position.z = box.position.z + 0.1; } //Backwardボタン押下時　Boxを後退させる if(isBackwardBtnDwn) { box.position.z = box.position.z - 0.1; } //Rightボタン押下時　Boxを右に移動 if(isRightBtnDwn) { box.position.x = box.position.x + 0.1; } //rot += 0.5; // 毎フレーム角度を0.5度ずつ足していく // イージングの公式を用いて滑らかにする // 値 += (目標値 - 現在の値) * 減速値 rot += (targetRot - rot) * 0.05; // 角度に応じてカメラの位置を設定 camera.position.x = box.position.x + cameraDistance * Math.sin(rot * Math.PI / 180); camera.position.z = box.position.z + cameraDistance * Math.cos(rot * Math.PI / 180); scene.render(); } }); // Resize window.addEventListener("resize", function () { engine.resize(); }); <script src="https://cdn.jsdelivr.net/npm/cannon@0.6.2/build/cannon.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/babylonjs@3.3.0/babylon.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/babylonjs-gui@3.3.0/babylon.gui.min.js"></script> <canvas id="renderCanvas"></canvas>html, body { overflow: hidden; width : 100%; height : 100%; margin : 0; padding : 0; } #renderCanvas { width : 100%; height : 100%; touch-action: none; }

Play on jsdo.it games
- Author
- Share
- ブログに埋め込む
- QR
- Tag
Download

Complete!

Description What kind of game?

Babylon.js Version 3.3.0 のライブラリを使用してみました

Babylon.jsのサンプルがある「Babylon.js Playground」からのコードを参考にして
カメラがターゲット対象として3Dオブジェクト（box）の周りを移動できるようにしてみました
以下のような操作ができます

「LeftRot」でカメラがboxのまわりを左周り(な感じで)回転
「RightRot」でカメラがboxのまわりを右周り(な感じで)回転
「Height」でカメラの高さを変更
「Distance」でカメラのboxからの距離を変更
「Default」でカメラの位置を最初の場所にもどす

前に作成した以下の自分のコードを参考にしました

Three.js r70　で自前でカメラ操作機能作成(WebGL使用)
http://jsdo.it/siouxcitizen/8bYv

Three.js r70(WebGL使用)とCreateJSでインターフェース実験
http://jsdo.it/siouxcitizen/4Knh

Three.js r70(WebGL使用)とCreateJSでインターフェース実験２
http://jsdo.it/siouxcitizen/sIW9

以下のサイト・コードも参考にさせていただきました

Position and Rotation
https://doc.babylonjs.com/babylon101/position

https://ics.media/tutorial-three/camera_position.html
Three.jsのカメラの制御

WebGL版Away3D入門―第4回 カメラの制御方法
http://ics-web.jp/lab/archives/2632

Control Device

	Smartphone Controllerjsdo.it WebSocket Controller»
	Mouse
	Keyboard
	Touch Device

Fullscreen

Activated
Inactivated

jsdo.it games から削除する Submit

siouxcitizen2

URL
https://twitter.com/siouxcitizen

Yahoo Open ID が機能しなくなったのでjsdo.itの第二アカウント作成しました

jsdo.itの第一アカウント http://jsdo.it/siouxcitizen

第一アカウントも含めて混沌としてきたので、投稿コードを以下のようにまとめてみました Naver : http://matome.naver.jp/odai/2142288467101177901

作業用BGMにYoutube動画を連続再生するプログラムもまとめてみました直リンク : http://matome.naver.jp/odai/2143666226200730001 アーティスト別の再生動画の一覧付きリスト : http://matome.naver.jp/odai/2142630899820574901

ブログ : http://oreorekaihatsu.blogspot.jp/

Size

Width: px
Height: px

code

<script type="text/javascript" src="http://jsdo.it/blogparts/g6Ry/js"></script>

QR Code

Discussion

Questions on this code?

Forked

sort by

Babylon.js v3.3.0 で回転・前進操作を対象3

siouxcitizen

465/7/13
- 3D
- Babylon.js
- Collision
- CollisionDetection
- GUI
- Physics
- PhysicsEngine
- WebGL
- art&design
- html5_elements&api
- library&test

Babylon.js v3.3.0 でカメラの位置操作を対象オブジェクト周りでできるようにしてみるテスト

Description What kind of game?

Control Device

Fullscreen

Author

Default Panel

Size

code

Discussion

Tags

Forked