babylonjs followCamera

7022 ワード

先端 httml 5

カメラは物体に従って移動し、コードは以下の2つの例から取られる.
カメラが物体に従って動く、物体がある軌跡に沿って移動するの組み合わせで物体の軌跡移動を完了
例1:カメラは物体に従って直線を走る

var canvas = document.getElementById('carCanvas');
var engine = new BABYLON.Engine(canvas, true);
// This creates a basic Babylon Scene object (non-mesh)
var scene = new BABYLON.Scene(engine);

// This creates and initially positions a follow camera    
var camera = new BABYLON.FollowCamera("FollowCam", new BABYLON.Vector3(0, 10, -10), scene);

//The goal distance of camera from target
camera.radius = 30;

// The goal height of camera above local origin (centre) of target
camera.heightOffset = 10;

// The goal rotation of camera around local origin (centre) of target in x y plane
camera.rotationOffset = 0;

//Acceleration of camera in moving from current to goal position
camera.cameraAcceleration = 0.005

//The speed at which acceleration is halted 
camera.maxCameraSpeed = 10

//camera.target is set after the target's creation

// This attaches the camera to the canvas
camera.attachControl(canvas, true);

/**********************************************/

// lights
var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 0.5, 0), scene);

/*-----------------------Car Body----------------------*/

//Create body and apply material
var carBody = BABYLON.MeshBuilder.CreateBox("box", {
        size: 5
    }, scene);
    carBody.position = new BABYLON.Vector3(0, 0, 0);
/*---------------End Car Body--------------------*/

/*---------------Path----------------------------*/

// Create array of points to describe the curve
var points = [];
var n = 450; // number of points
var r = 50; //radius
points.push(new BABYLON.Vector3(0,0,0));
for(var i=0;i<200;i++){
    points.push(new BABYLON.Vector3(i,0,0));
}
for(var i=0;i<200;i++){
    points.push(new BABYLON.Vector3(200,0,i));
}

//Draw the curve
var track = BABYLON.MeshBuilder.CreateLines('track', {
    points: points
}, scene);
track.color = new BABYLON.Color3(0, 0, 0);
/*--------------End Path-----------------------------*/

/*--------------Ground------------------------------*/
var ground = BABYLON.MeshBuilder.CreateGround("ground", {
    width: 3 * r,
    height: 3 * r
}, scene);
/*-----------End Ground--------------------*/

/*----------Position and Rotate Car at Start--------*/
carBody.position.y = 4;
carBody.position.z = r;

var path3d = new BABYLON.Path3D(points);
var normals = path3d.getNormals();
var theta = Math.acos(BABYLON.Vector3.Dot(BABYLON.Axis.Z, normals[0]));
carBody.rotate(BABYLON.Axis.Y, theta, BABYLON.Space.WORLD);
var startRotation = carBody.rotationQuaternion;
/*------End Position and Rotate Car at Start-------*/

/*******SET TARGET FOR CAMERA****************/
camera.lockedTarget = carBody;
/***************************************/


/*----------------Animation Loop--------------*/
var i = 0;
scene.registerAfterRender(function () {
    carBody.position.x = points[i].x;
    carBody.position.y = points[i].y;
    carBody.position.z = points[i].z;


    i ++; // //continuous looping  
    if(i==450) i=0;
    if (i == 0) {
        carBody.rotationQuaternion = startRotation;
    }
});

/*----------------End Animation Loop------------------*/
engine.runRenderLoop(function () {
    scene.render();
})

例2:カメラが物体に従って曲線を描く

var canvas = document.getElementById('carCanvas');
var engine = new BABYLON.Engine(canvas, true);
// This creates a basic Babylon Scene object (non-mesh)
var scene = new BABYLON.Scene(engine);

// This creates and initially positions a follow camera    
var camera = new BABYLON.FollowCamera("FollowCam", new BABYLON.Vector3(0, 10, -10), scene);

//The goal distance of camera from target
camera.radius = 30;

// The goal height of camera above local origin (centre) of target
camera.heightOffset = 10;

// The goal rotation of camera around local origin (centre) of target in x y plane
camera.rotationOffset = 0;

//Acceleration of camera in moving from current to goal position
camera.cameraAcceleration = 0.005

//The speed at which acceleration is halted 
camera.maxCameraSpeed = 10

//camera.target is set after the target's creation

// This attaches the camera to the canvas
camera.attachControl(canvas, true);

/*************************************************/

// lights
var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(1, 0.5, 0), scene);

/*----------------Car Body-----------*/

//Create body and apply material
var carBody = BABYLON.MeshBuilder.CreateBox("box", {
        size: 5
    }, scene);
    carBody.position = new BABYLON.Vector3(0, 0, 0);
/*------------------End Car Body--------------*/

/*-------------Path-------------*/

// Create array of points to describe the curve
var points = [];
var n = 450; // number of points
var r = 50; //radius
for (var i = 0; i < n + 1; i++) {
     points.push(new BABYLON.Vector3((r + (r / 5) * Math.sin(8 * i * Math.PI / n)) * Math.sin(2 * i * Math.PI / n), 0, (r + (r / 10) * Math.sin(6 * i * Math.PI / n)) * Math.cos(2 * i * Math.PI / n)));
}

//Draw the curve
var track = BABYLON.MeshBuilder.CreateLines('track', {
    points: points
}, scene);
track.color = new BABYLON.Color3(0, 0, 0);
/*-----------------------End Path----------------*/

/*-----------------------Ground----------------*/
var ground = BABYLON.MeshBuilder.CreateGround("ground", {
    width: 3 * r,
    height: 3 * r
}, scene);
/*-----------------------End Ground-----------------*/

/*----------------Position and Rotate Car at Start-------*/
carBody.position.y = 4;
carBody.position.z = r;

var path3d = new BABYLON.Path3D(points);
var normals = path3d.getNormals();
var theta = Math.acos(BABYLON.Vector3.Dot(BABYLON.Axis.Z, normals[0]));
carBody.rotate(BABYLON.Axis.Y, theta, BABYLON.Space.WORLD);
var startRotation = carBody.rotationQuaternion;
/*----------------End Position and Rotate Car at Start------*/

/*********SET TARGET FOR CAMERA*****************/
camera.lockedTarget = carBody;
/*************************************************/


/*-------------Animation Loop---------------------*/
var i = 0;
scene.registerAfterRender(function () {
    carBody.position.x = points[i].x;
    carBody.position.y = points[i].y;
    carBody.position.z = points[i].z;

    theta = Math.acos(BABYLON.Vector3.Dot(normals[i], normals[i + 1]));
    var dir = BABYLON.Vector3.Cross(normals[i], normals[i + 1]).y;
    var dir = dir / Math.abs(dir);
    carBody.rotate(BABYLON.Axis.Y, dir * theta, BABYLON.Space.WORLD);

    i = (i + 1) % (n - 1); //continuous looping  
    if (i == 0) {
        carBody.rotationQuaternion = startRotation;
    }
});

/*-------------End Animation Loop----------------------*/


engine.runRenderLoop(function () {
    scene.render();
})

小さなプログラムのアップルの携帯電話の地図の授権の問題

sql文の選択