Javascript 将动态图像与HTML5 WebGL 360度全景查看器和Codeigniter中的Three.js集成
如果您只需复制和粘贴文档中的可用代码，并将360图像放置在索引文件旁边，然后在浏览器中打开，Panorama 360 Viewer便可找到并易于使用。但是，有没有一种方法可以动态地从数据库中获取图像，并在视图中呈现360个图像，如下所示（） panorama viewer文件中给出的代码在panorama数组中获取图像，如下所示Javascript 将动态图像与HTML5 WebGL 360度全景查看器和Codeigniter中的Three.js集成,javascript,php,html,codeigniter,360-panorama-viewer,Javascript,Php,Html,Codeigniter,360 Panorama Viewer,如果您只需复制和粘贴文档中的可用代码，并将360图像放置在索引文件旁边，然后在浏览器中打开，Panorama 360 Viewer便可找到并易于使用。但是，有没有一种方法可以动态地从数据库中获取图像，并在视图中呈现360个图像，如下所示（） panorama viewer文件中给出的代码在panorama数组中获取图像，如下所示 var panoramasArray = ["01.jpg","02.jpg","03.jpg","04.jpg","05.jpg","06.jpg"]; var p
var panoramasArray = ["01.jpg","02.jpg","03.jpg","04.jpg","05.jpg","06.jpg"];
var panoramaNumber = Math.floor(Math.random()*panoramasArray.length);
如果我们必须只显示一个图像怎么办？是否有人尝试从数据库中动态获取图像，并使用360 viewer渲染视图？。我看到了一条没有答案的线索，但没有人回答这个问题。对于许多Codeigniter开发人员和那些一直在开发房地产网站的人来说，他们要么想要，要么已经尝试，但未能将360 image viewer集成到他们的网站中。这是我到目前为止所做和学到的练习 它是如何工作的？
- 控制器中用于上传360图像的功能
- 模型中用于保存和获取360幅图像列表的函数
- 调用视图以显示图像的函数
- 显示360图像的标记页面，其中包含所有JavaScript
public function upload_360_images()
{
if($this->session->userdata['id'] && $this->session->userdata['type']=='user')
{
if($_FILES)
{
if(isset($_FILES['files'])){
$data['errors']= array();
$extensions = array("jpeg","jpg","png");
foreach($_FILES['files']['tmp_name'] as $key => $tmp_name ){
$file_name = $key.$_FILES['files']['name'][$key];
$file_size =$_FILES['files']['size'][$key];
$file_tmp =$_FILES['files']['tmp_name'][$key];
$file_type=$_FILES['files']['type'][$key];
/*$file_ext=explode('.',$_FILES['image']['name'][$key]) ;
$file_ext=end($file_ext);*/
$i=1;
if($file_size > 7097152){
$data['errors'][$i]='File '.$i.' size must be less than 7 MB';
$i++;
}
$desired_dir="uploads";
if(empty($data['errors'])==true){
if(is_dir($desired_dir)==false){
mkdir("$desired_dir", 0700); // Create directory if it does not exist
}
if(is_dir("$desired_dir/".$file_name)==false){
move_uploaded_file($file_tmp,"uploads/".$file_name);
$this->post_model->add360Image('property_360_images',$file_name,$this->uri->segment(3));
}else{ //rename the file if another one exist
$new_dir="uploads/".$file_name.time();
rename($file_tmp,$new_dir) ;
}
}else{
$data['contact']=$this->admin_model->getContactDetails();
$data['images']=$this->post_model->getProperty360Images($this->uri->segment(3));
$data['title']='My Profile Image';
$this->load->view('site/static/head',$data);
$this->load->view('site/static/header');
$this->load->view('site/content/upload_360_images');
$this->load->view('site/static/footer');
$this->load->view('site/static/footer_links');
}
}
if(empty($data['errors']))
{
redirect(base_url().'dashboard');
}
else
{
$data['contact']=$this->admin_model->getContactDetails();
$data['images']=$this->post_model->getProperty360Images($this->uri->segment(3));
$data['title']='My Profile Image';
$this->load->view('site/static/head',$data);
$this->load->view('site/static/header');
$this->load->view('site/content/upload_360_images');
$this->load->view('site/static/footer');
$this->load->view('site/static/footer_links');
}
}
}
else
{
$data['contact']=$this->admin_model->getContactDetails();
$data['images']=$this->post_model->getProperty360Images($this->uri->segment(3));
$data['title']='My Profile Image';
$this->load->view('site/static/head',$data);
$this->load->view('site/static/header');
$this->load->view('site/content/upload_360_images');
$this->load->view('site/static/footer');
$this->load->view('site/static/footer_links');
}
}
else
{
redirect(base_url().'user/login');
}
}
public function property_detail()
{
$id=$this->uri->segment(3);
$this->property_model->incPageViewById($id);
$data['contact']=$this->admin_model->getContactDetails();
$data['section_fields']=$this->admin_model->getSectionFields('property_sections');
$data['property']=$this->property_model->getPropertyById($id);
// Get 360 Images list of this property based on ID
$data['images360']=$this->post_model->getProperty360Images($id);
$data['profile']=$this->property_model->getFieldsById($id);
$data['types']=$this->admin_model->getAll('property_types');
$data['similar']=$this->property_model->getSimilarPropertiesById($data['property'][0]['posted_by']);
$data['popular']=$this->property_model->getAllProperties(0,0);
if($this->isLoggedIn())
{
$data['favorites']=$this->property_model->getMyFavorites($this->session->userdata['id']);
$data['is_favorite']=$this->property_model->isFavorite($id,$this->session->userdata['id']);
}
$data['posted_by']=$this->property_model->getPostedByDetails($id);
$data['comments']=$this->property_model->getCommentsById($id);
if($_POST)
{
$config=array(
array(
'field' => 'name',
'label' => 'Name',
'rules' => 'trim|required',
),
array(
'field' => 'email',
'label' => 'Email',
'rules' => 'trim|required',
),
array(
'field' => 'comment',
'label' => 'Comment',
'rules' => 'trim|required',
)
);
$this->form_validation->set_rules($config);
if($this->form_validation->run()==false)
{
$data['errors']=validation_errors();
$data['title']=$data['property'][0]['title'];
$this->load->view('site/static/head',$data);
$this->load->view('site/static/header');
$this->load->view('site/content/property_detail');
$this->load->view('site/static/footer');
$this->load->view('site/static/footer_links');
}
else
{
$this->property_model->addComment($_POST,$id);
$data['success']='Comment posted successfully';
$data['comments']=$this->property_model->getCommentsById($id);
$data['title']=$data['property'][0]['title'];
$this->load->view('site/static/head',$data);
$this->load->view('site/static/header');
$this->load->view('site/content/property_detail');
$this->load->view('site/static/footer');
$this->load->view('site/static/footer_links');
}
}
else
{
$data['title']=$data['property'][0]['title'];
$this->load->view('site/static/head',$data);
$this->load->view('site/static/header');
$this->load->view('site/content/property_detail');
$this->load->view('site/static/footer');
$this->load->view('site/static/footer_links');
}
}
// Get 360 Images list of this property based on ID
$data['images360']=$this->post_model->getProperty360Images($id);