;(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);