;(function($){
//panoramaView
jQuery.fn.panoramaViewer=function(prmUser){
///////////////////////////////////////////////////////////////////////////////////////////
// Var
///////////////////////////////////////////////////////////////////////////////////////////
//parameter
const prmDef={
camera : {
fov : 45,
near : 1,
far : 2000
}
};
const prm=$.extend(prmDef,prmUser);
//canvas
const myCanvas=$(this);
var cv=new Canvas();
function Canvas(){
this._id =myCanvas.attr("id");
this._box =myCanvas.closest("#canvas_box");
this._w =this._box.width();
this._h =this._box.height();
}
myCanvas.attr({
'width' : cv._w,
'height' : cv._h
});
//three.js
var renderer;
var scene;
var group;
var camera;
///////////////////////////////////////////////////////////////////////////////////////////
// Canvas
///////////////////////////////////////////////////////////////////////////////////////////
setCanvas();
function setCanvas(){
renderer=new THREE.WebGLRenderer({
canvas : document.querySelector('#'+cv._id),
antialias : true,
alpha : true
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(cv._w,cv._h);
scene=new THREE.Scene();
group=new THREE.Group();
camera=new THREE.PerspectiveCamera(prm.camera.fov,cv._w/cv._h,prm.camera.near,prm.camera.far);
camera.position.set(0,100,100);
//Geometry
group.add(makeGeometry());
scene.add(group);
runAnimate();
function runAnimate(){
renderer.render(scene,camera);
requestAnimationFrame(runAnimate);
}
}
};
function makeGeometry(){
var group=new THREE.Group();
group.add(new THREE.GridHelper(1000,100));
var testGeometry1=new THREE.BoxGeometry(150,150,120);
var testMaterial1=new THREE.MeshNormalMaterial();
var testMesh1=new THREE.Mesh(testGeometry1,testMaterial1);
testMesh1.position.set(100,300,-500);
group.add(testMesh1);
var testGeometry2=new THREE.SphereGeometry(70,6,4);
var testMaterial2=new THREE.MeshNormalMaterial();
var testMesh2=new THREE.Mesh(testGeometry2,testMaterial2);
testMesh2.position.set(-120,100,-400);
group.add(testMesh2);
return group;
}
})(jQuery);