Hiện ảnh 3D/VR lên trang web

Nội dung

    Có được website chất lượng là điều mà bất cứ doanh nghiệp nào cũng hết sức quan tâm. Website thông thường, người dùng chỉ được chiêm ngưỡng những hình ảnh sắc nét và hoàn hảo nhất. Tuy nhiên, với thiết kế web thực tế ảo VR, từ hình ảnh đến âm thanh đều được truyền tải một cách hoàn hảo. Mang đến một cái nhìn toàn diện và đầy ấn tượng với khách hàng. Từ đó tạo được sự thu hút, chú ý và tò mò của họ.
    Bằng việc ứng dụng công nghệ VR, website có thực tế ảo mang đến cảm nhận về chiều sâu, tạo sự hứng thú, tò mò khám phá, mong muốn tham quan không gian hay sản phẩm của doanh nghiệp hơn là những hình ảnh, video thông thường. Khách hàng có thể hiểu rõ sản phẩm/ dịch vụ mà doanh nghiệp cung cấp một cách dễ dàng và chi tiết khi thao tác với không gian thực tế ảo. Một doanh nghiệp sử dụng công nghệ thực tế ảo có ưu thế đạt được tầm nhìn về nâng cao trải nghiệm khách hàng, xây dựng hình ảnh thương hiệu lâu dài đối với khách hàng mới và giữ chân những khách hàng hiện có.. Điều mà các website thông thường không thể đạt được.

    Nền tảng website thực tế ảo VR được xem công cụ hữu ích, cải thiện marketing. Nhờ đó mà sản phẩm hay dịch vụ của doanh nghiệp tiếp cận khách hàng với sự hài lòng lớn nhất. Ảnh / video 3D mang đến nhiều lợi ích cho các ngành như du lịch (du lịch thực tế ảo), bất động sản, kiến trúc, văn phòng, trường học,… Các doanh nghiệp nên cân nhắc phương pháp kết hợp công nghệ mới như thực tế ảo vào hoạt động kinh doanh, tiếp thị của mình để trở nên khác biệt, tạo ấn tượng là người tiên phong áp dụng công nghệ mới trong mắt công chúng.

    Quy trình tạo ra hình ảnh 3D/VR cho một căn nhà

    Bước 1: Chuẩn bị camera 360 độ phù hợp

    Để tạo ra một sản phẩm 3D/VR cho căn nhà của bạn thì thiết bị cần thiết là một chiếc máy quay 360 độ. Ngày nay có rất nhiều loại camera 360 độ với nhiều mức giá khác nhau, phù hợp với đa dạng nhu cầu.

    Theo Rever khảo sát, các camera 360 độ thông dụng hiện nay có mức giá dao động từ 250 USD đến 3,400 USD (chưa bao gồm thuế, phí), như:

    • Ricoh Theta V (380 USD)
    • Insta360 One X (456 USD)
    • Ricoh Theta Z1 (1,000 USD)
    • Matterport Pro2 (3,400 USD)

    Bạn nên xem xét các đánh giá chuyên sâu về các loại camera 360 độ thông dụng trên thị trường; so sánh giá cả, tính năng, độ phân giải, thời lượng pin và thao tác sử dụng để tìm ra cho mình thiết bị phù hợp nhất.

    Ngoài ra, để chất lượng hình ảnh chuyên nghiệp hơn, bạn nên đầu tư vào một chân máy ổn định với giá treo hỗ trợ quay toàn cảnh.

    Các thiết bị này sẽ giúp các góc trong hình ảnh của bạn thẳng hàng khi chúng được ghép lại với nhau và hình ảnh 3D/VR của căn nhà sẽ xuất hiện liền mạch hơn, chân thật hơn.

    Bước 2: Lập danh sách các phòng cần quay

    Lập danh sách tất cả các phòng trong căn nhà mà bạn muốn tiến hành tạo ra hình ảnh 3D/VR.

    Trước hết, bạn đi qua từng phòng và xác định các vị trí trung tâm ở từng phòng. Đây sẽ là các vị trí đặt máy quay mà thu được nhiều đặc điểm của căn phòng nhất.

    Lưu bản nháp tự động

    Ở mỗi phòng bạn nên tìm ra 1, 2 vị trí thích hợp nhất để đặt máy.

    Để tránh việc bỏ sót bất cứ một không gian nào trong căn nhà, bạn nên lập một checklist gồm danh sách các phòng và các vị trí đặt máy tương ứng.

    Bạn không nên bỏ qua một không gian, một phòng nào. Mỗi một không gian trong căn nhà đều có tầm quan trọng đối với mỗi đối tượng khách mua tiềm năng khác nhau. Tùy theo nhu cầu của từng người mua mà họ sẽ dành sự quan tâm khác nhau cho các phòng khác nhau.

    Bước 3: Tiến hành quay từng phòng

    Trước ra bắt đầu quay, bạn cần đảm bảo rằng căn phòng đang trong tình trạng đẹp mắt nhất có thể. Bạn nên dời đi bất cứ thứ gì cản trở ống kính, đảm bảo rằng camera sẽ quay rõ toàn bộ căn phòng.

    Lưu bản nháp tự động

    Bạn cần đảm bảo phòng ốc sạch sẽ, gọn gàng để hình ảnh hiện lên bắt mắt nhất.

    Căn phòng nên trong tình trạng ngăn nắp, sạch sẽ. Bạn hãy dọn dẹp những vật dụng khiến căn phòng trông lộn xộn hoặc khiến người mua phân tâm khỏi những ưu điểm của căn phòng.

    Đồng thời, bạn cũng nên đảm bảo căn phòng có đầy đủ ánh sáng để các điểm nổi bật được hiển thị trong tình trạng tốt nhất.

    Bước 4: Tải hình ảnh lên nền tảng lưu trữ

    Hiện nay có rất nhiều nền tảng lưu trữ giúp tải lên hình ảnh 360 độ và tạo ra VR Tour, có thể kể đến những cái tên nổi bật như: Matterport, iStaging, Asteroom, Ogulo, Immoviewer, Box Brownie, Giraffe360,…

    Lưu bản nháp tự động

    Ở nhiều nền tảng sẽ giúp bạn sắp xếp lại các hình ảnh 3D thành một mô hình liền mạch.

    Các công cụ chỉnh sửa trên nhiều nền tảng này sẽ ghép các hình ảnh 360 độ của bạn lại với nhau để tạo nên một chuyến tham quan 360 độ toàn cảnh căn nhà.

    Chi phí để sử dụng các nền tảng này cũng thay đổi đa dạng, dao động từ 50 USD – 400 USD/tháng. Trong đó, nền tảng Matterport cung cấp nhiều công cụ nâng cao và chuyên nghiệp có chi phí từ 250 USD – 400 USD/tháng.

    Hướng dẫn xem nhà 3D View

    Bạn có thể ngồi tại chỗ để khám phá mọi ngóc ngách của căn nhà, từ phòng này sang phòng khác, thậm chí đo chiều dài của từng chi tiết trong căn nhà. Dưới đây là các hướng dẫn nhằm giúp bạn hiểu rõ hơn về cách thức sử dụng chức năng 3D View tại các căn nhà được đăng web.

    Công nghệ Rever giúp khách hàng

    Rever có thể xem như một trong những đơn vị tiên phong mang đến giải pháp xem nhà 3D/VR tại Việt Nam. Đây không chỉ là một giải pháp hữu hiệu mùa giãn cách mà còn hứa hẹn mang đến nhiều đột phá trong hoạt động mua bán nhà đất.

    Trước đây, người mua nhà phải đến tận nơi để xem nhà bất kể trở ngại về khoảng cách di chuyển, điều kiện thời tiết,… Hoặc trong những lúc hy hữu như thời gian xảy ra đại dịch COVID-19 thì việc đi xem nhà sẽ bị xếp vào hoạt động không thiết yếu!

    Không những vậy, một thống kê cho biết trung bình một người phải đi xem 9 căn mới mua được 1 căn như ý. Theo đó, để tìm được “tổ ấm đích thực”, người mua phải bỏ phí rất nhiều thời gian và công sức di chuyển chỉ để xem những căn nhà không đúng nhu cầu.

    Còn một cách khác là xem nhà qua hình ảnh được người bán đăng tải lên internet. Nhưng cách thức này cũng tồn tại nhiều nhược điểm như không thể xem hết mọi ngóc ngách trong căn nhà, không thể nắm bắt được mặt bằng các tầng cũng như không mang đến cảm nhận chân thật về không gian nhà.

    Hiện ảnh 3D/VR lên trang web

    Trong thời gian giãn cách xã hội, việc đi xem nhà sẽ bị xếp vào hoạt động không thiết yếu.

    Nhưng, công nghệ luôn phát triển không ngừng để đáp ứng nhu cầu của con người, công nghệ áp dụng trong ngành bất động sản cũng vậy. Đó là lý do mà trên thế giới, trong những năm gần đây, khái niệm xem nhà 3D/VR thường xuyên được nhắc đến.

    Nắm bắt nhu cầu thị trường và đi tiên phong trong lĩnh vực công nghệ bất động sản tại Việt Nam, Rever từ sớm đã giới thiệu công nghệ xem nhà 3D/VR đến người mua trên website rever.vn.

    Với công nghệ xem nhà 3D/VR tại Rever, người mua có thể ngồi tại gia mà vẫn xem được từng ngóc ngách của căn nhà. Chỉ với smartphone hay máy tính, không gian căn nhà sẽ hiện lên một cách chân thật, rõ nét ngay trước mắt chúng ta.

    Hiện ảnh 3D/VR lên trang web

    Hình ảnh 3D của một căn hộ áp dụng công nghệ 3D/VR tại rever.vn.

    Công nghệ 3D/VR mang đến một chân trời trải nghiệm mới cho người mua nhà, điều mà số đông chúng ta trước đây chỉ thấy trong phim viễn tưởng. Với một mô hình thu nhỏ của căn nhà dưới dạng 3D được gói gọn trong smartphone hay máy tính, người mua có thể dễ dàng phóng to/thu nhỏ từng chi tiết, nhanh chóng “di chuyển” quan sát giữa các tầng, cảm nhận không gian nhà ở từng góc nhìn khác nhau.

    Thêm vào đó, người mua cũng có thể quan sát căn nhà dưới dạng mặt bằng. Chức năng này giúp người mua có cái nhìn trực quan về thứ tự bố trí các phòng cũng như cách sắp xếp nội thất của căn nhà.

    Ngoài ra, công nghệ tiên phong này còn mang đến chức năng thước đo. Chỉ với vài thao tác đơn giản, người mua có thể biết được độ rộng của cánh cửa, độ cao của cửa sổ hay khoảng cách giữa các phòng,…

    Hiện ảnh 3D/VR lên trang web

    Không chỉ xem nhà, công nghệ 3D/VR tại Rever còn giúp bạn đo đạc từng chi tiết trong căn nhà.

    “Sau khi xem nhà 3D ưng ý thì tôi đến nhà trực tiếp để chốt mua. Tôi hầu như không cần hướng dẫn của chủ nhà mà vẫn có thể chủ động đi xem từng phòng, cứ như đã nắm rõ căn nhà trong lòng bàn tay vậy, dù tôi chỉ mới đến trực tiếp lần đầu thôi!”, anh Lam Nguyên (ngụ tại TP. Thủ Đức, TP.HCM), là một khách hàng đã mua nhà thông qua phương thức xem nhà 3D/VR tại Rever tỏ ra vô cùng tâm đắc với độ chân thật của công nghệ này.

    Trên thế giới, công nghệ xem nhà 3D/VR càng chứng tỏ được ưu thế rõ ràng hơn suốt thời gian đại dịch COVID-19 vừa qua, khi việc xem nhà trực tiếp vấp phải nhiều trở ngại. Tại Mỹ và Anh, nhiều giao dịch triệu đô đã thành công khi khách mua chỉ xem nhà bằng công nghệ này trên smartphone của mình.

    Tại Trung Quốc, người mua đã “bình thường hóa” việc mua nhà mà chỉ cần xem mô hình 3D trên các thiết bị điện tử, sức cạnh tranh của những căn nhà bán có bao gồm công nghệ 3D/VR cũng ngày càng lớn tại quốc gia tỷ dân này.

    Hiện ảnh 3D/VR lên trang web

    Trên thế giới, công nghệ xem nhà 3D/VR càng chứng tỏ được ưu thế rõ ràng hơn suốt thời gian đại dịch COVID-19.

    Tại Việt Nam, công nghệ xem nhà 3D/VR tại Rever cũng hứa hẹn tạo nên cuộc cách mạng trong mua bán nhà đất. Đây không chỉ là giải pháp tạm thời mùa dịch mà còn là tương lai đầy hứa hẹn của ngành bất động sản.

    Công nghệ tiên phong này vừa là lời giải cho những bất cập của phương thức xem nhà truyền thống, vừa là chìa khóa góp phần mở lối cho xu hướng đầu tư bất động sản Việt Nam của giới đầu tư nước ngoài.

    Với tinh thần luôn luôn quan tâm, lắng nghe và cải tiến của Rever, công nghệ xem nhà 3D/VR sẽ ngày càng hoàn thiện để mang đến những trải nghiệm mua nhà ngày một tốt hơn cho khách hàng, giúp việc giao dịch bất động sản ngày càng trơn tru và dễ dàng hơn.

    Cách đăng hình ảnh 3D/VR lên WordPress không sử dụng plugin

    Bạn phải tạo ra một tập tin PHP để hiển thị ảnh 360, sau đó dùng iframe để chèn hình ảnh 360 độ vào bài viết.

    <?php
    $src = isset( $_GET['src'] ) ? $_GET['src'] : '';
     
    if ( empty( $src ) ) {
    return;
    }
     
    $title = isset( $_GET['title'] ) ? $_GET['title'] : 'Hình ảnh 360';
    $type  = isset( $_GET['type'] ) ? $_GET['type'] : 'equirectangular';
    $type  = strtolower( $type );
    ?>
    <!DOCTYPE html>
    <html lang="vi">
    <head>
    <title><?php echo $title; ?></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style>
    body {
    background-color: #000000;
    margin: 0;
    overflow: hidden;
    }
     
    canvas,
    img {
    cursor: hand;
    }
     
    canvas,
    img {
    cursor: -webkit-grab;
    }
    </style>
    </head>
    <body>
    <div id="container"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/90/three.min.js"></script>
    <script async>
    var camera, scene, renderer;
     
    var isUserInteracting = false,
    onMouseDownMouseX = 0, onMouseDownMouseY = 0,
    lon = 0, onMouseDownLon = 0,
    lat = 0, onMouseDownLat = 0,
    phi = 0, theta = 0;
     
    init();
    animate();
     
    function init() {
     
    var container, mesh;
     
    container = document.getElementById('container');
     
    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1100);
    camera.target = new THREE.Vector3(0, 0, 0);
     
    scene = new THREE.Scene();
     
    var geometry = new THREE.SphereBufferGeometry(500, 60, 40);
     
    geometry.scale(-1, 1, 1);
     
    var material = new THREE.MeshBasicMaterial({
    map: new THREE.TextureLoader().load('<?php echo $src; ?>')
    });
     
    mesh = new THREE.Mesh(geometry, material);
     
    scene.add(mesh);
     
    renderer = new THREE.WebGLRenderer();
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    container.appendChild(renderer.domElement);
     
    document.addEventListener('mousedown', onDocumentMouseDown, false);
    document.addEventListener('mousemove', onDocumentMouseMove, false);
    document.addEventListener('mouseup', onDocumentMouseUp, false);
    document.addEventListener('wheel', onDocumentMouseWheel, false);
     
    document.addEventListener('dragover', function (event) {
     
    event.preventDefault();
    event.dataTransfer.dropEffect = 'copy';
     
    }, false);
     
    document.addEventListener('dragenter', function (event) {
     
    document.body.style.opacity = 0.5;
     
    }, false);
     
    document.addEventListener('dragleave', function (event) {
     
    document.body.style.opacity = 1;
     
    }, false);
     
    document.addEventListener('drop', function (event) {
     
    event.preventDefault();
     
    var reader = new FileReader();
    reader.addEventListener('load', function (event) {
     
    material.map.image.src = event.target.result;
    material.map.needsUpdate = true;
     
    }, false);
    reader.readAsDataURL(event.dataTransfer.files[0]);
     
    document.body.style.opacity = 1;
     
    }, false);
     
    window.addEventListener('resize', onWindowResize, false);
     
    }
     
    function onWindowResize() {
     
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
     
    renderer.setSize(window.innerWidth, window.innerHeight);
     
    }
     
    function onDocumentMouseDown(event) {
     
    event.preventDefault();
     
    isUserInteracting = true;
     
    onMouseDownMouseX = event.clientX;
    onMouseDownMouseY = event.clientY;
     
    onMouseDownLon = lon;
    onMouseDownLat = lat;
     
    }
     
    function onDocumentMouseMove(event) {
     
    if (isUserInteracting === true) {
     
    lon = ( onMouseDownMouseX - event.clientX ) * 0.1 + onMouseDownLon;
    lat = ( event.clientY - onMouseDownMouseY ) * 0.1 + onMouseDownLat;
     
    }
     
    }
     
    function onDocumentMouseUp(event) {
     
    isUserInteracting = false;
     
    }
     
    function onDocumentMouseWheel(event) {
     
    var fov = camera.fov + event.deltaY * 0.05;
     
    camera.fov = THREE.Math.clamp(fov, 10, 75);
     
    camera.updateProjectionMatrix();
     
    }
     
    function animate() {
     
    requestAnimationFrame(animate);
    update();
     
    }
     
    function update() {
     
    if (isUserInteracting === false) {
     
    //lon += 0.1;
     
    }
     
    lat = Math.max(-85, Math.min(85, lat));
    phi = THREE.Math.degToRad(90 - lat);
    theta = THREE.Math.degToRad(lon);
     
    camera.target.x = 500 * Math.sin(phi) * Math.cos(theta);
    camera.target.y = 500 * Math.cos(phi);
    camera.target.z = 500 * Math.sin(phi) * Math.sin(theta);
     
    camera.lookAt(camera.target);
     
    renderer.render(scene, camera);
     
    }
     
    </script>
    </body>
    </html>

    sau đó Bạn chỉ cần chèn theo dạng iframe là có thể hiển thị trong nội dung của WordPress. Tham số là src là đường dẫn đến hình ảnh của bạn và title.

    <iframe src="http://domain.com/360.php?src=/images/anh360.jpg&title=Test+360"></iframe>

    Lý do phải thông qua iframe là vì hỉnh ảnh làm 360 độ sẽ hiển thị full màn hình, nó sẽ làm vỡ khung giao diện của bạn.

    Dùng plugin đăng hình ảnh 3D/VR lên WordPress

    iPanorama 360 WordPress Virtual Tour Builder

    iPanorama 360 là plugin WordPress cho phép bạn tạo các chuyến tham quan ảo tuyệt vời cho khách hàng từ trực tiếp bên trong quản trị viên WordPress chỉ trong vài giây. Plugin hỗ trợ các điểm đánh dấu để cung cấp thông tin về bất kỳ phần nào của cảnh hoặc để điều hướng đến các phòng khác

    WP VR – 360 Panorama and Virtual Tour Builder For WordPress

    Khi bạn có camera 360, bạn sẽ có thể quay video 360 độ căn hộ thật tuyệt vời. Sau khi bạn nhúng video 360 độ vào trang web của mình, khách truy cập của bạn có thể điều hướng trong video khi video phát. Bạn có thể tải nội dung video 360 lên Youtube, Vimeo hoặc trang web của mình, sau đó nhúng video vào bất kỳ trang nào trong trang web của mình bằng WPVR. Nhúng chuyến tham quan ảo chỉ trong vài cú nhấp chuột Sau khi bạn tạo chuyến tham quan, bạn thực sự dễ dàng nhúng chuyến tham quan đó vào trang web của mình.

    Panorama
    Một Plugin kích thước nhỏ giúp bạn, Dễ dàng hiển thị hình ảnh / video 360 độ toàn cảnh vào Trang web WordPress trong Bài đăng, Trang, Khu vực tiện ích bằng cách sử dụng Mã ngắn.

     

    Để lại một bình luận

    Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *