在 Codeigniter 中使用 Three.js 将动态图像与 HTML5 WebGL 360 度全景查看器集成

Integrate Dynamic Images with HTML5 WebGL 360 degrees panorama viewer with Three.js in Codeigniter

已找到 Panorama 360 查看器 HERE and HERE are easy to use if you just copy and paste the code available in their documentation and place the 360 images right next to the index file and open it in browser. However is there a way to Dynamically bring images from Database and render the 360 images in the view like this (link)

全景查看器文件中给出的代码像这样获取全景阵列中的图像

var panoramasArray = ["01.jpg","02.jpg","03.jpg","04.jpg","05.jpg","06.jpg"];
var panoramaNumber = Math.floor(Math.random()*panoramasArray.length);

如果我们只能显示一张图片怎么办？有没有人尝试过从数据库中动态获取图像并在其中呈现带有 360 查看器的视图？。我看到了一个未回答的话题 here，但没有人回答这个问题。

对于许多 Codeigniter 开发人员和那些一直在开发房地产网站的人来说，想要或已经尝试但未能将 360 图像查看器集成到他们的网站中。这是我到目前为止所做和学习的练习。

如何运作？

  1. 上传 360 图片
  2. 从数据库获取 360 图像
  3. 显示/渲染视图

我们需要什么？

  • 控制器中上传 360 图片的功能
  • 模型中用于保存和获取 360 度图像列表的函数
  • 调用视图显示图像的函数。
  • 一个显示 360 图像的标记页面，其中包含所有 JavaScript。

这是我上传 360 度图像的视图，它只是一个带有文件输入字段的表单。 

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');
    }

}

以上是我的控制器功能，它上传 360 图像并将名称保存在数据库中。没什么特别的，我没有使用 CI 上传库

这是我的数据库Table 用于存储 360 图片名称

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

从模型中获取 360 度图像列表。现在，在 属性 详细视图中，我再次调用在