Giter VIP home page Giter VIP logo

vizion-challenge's Introduction

VIZION: Frontend Coding Challenge

Sử dụng React, @react-three/fiber, @react-three/drei để tạo ra demo tương tác không gian 360 như sau: Link demo

Yêu cầu cần đạt được:

  • Cần hoàn thành trong vòng 60p, kết quả cần được build và push lên github pages để được đánh giá.
  • Hoàn thành Demo không gian cho phép xoay xung quanh để xem toàn cảnh 360 độ. Trong demo cần có các bước chân cho phép nhấn vào để di chuyển tới khung cảnh khác (render hình ảnh khác).
  • Hiển thị logo ở 1 góc màn hình.

Technical Guideline:

  • Sử dụng @react-three/fiber > Sphere và các hình ảnh trong "assets/360 images" để tạo ra các khung cảnh. Kết hợp với camera, ánh sáng phù hợp để nhìn thấy rõ ràng các chi tiết.
  • Sử dụng @react-three/drei > OrbitControls để tạo tương tác điều khiển xoay.
  • @react-three/drei > Html và hình ảnh "assets/footstep.png" để tạo ra các bước chân clickable để chuyển sang khung cảnh (không gian) khác. Các bước chân cần hiển thị nghiêng tương tự như trong demo.
  • Hiển thị logo "assets/logo/logo.png" cố định ở góc trên bên phải màn hình. Khi nhấn vào sẽ mở ra website khách hàng (sample.com). Kích thước logo trên mobile: 80x80px, desktop: 150x150px.
  • Ngoài các yêu cầu trong mô tả này, không cần làm thêm gì khác (cho dù có trên demo).

Nộp kết quả:

  • Cần hoàn thành trong vòng 60p, kết quả bao gồm source code và source build cần được push lên github pages để được đánh giá.
  • Submit kết quả bằng cách gửi link Github Pages qua địa chỉ email [email protected] và cc các d/c email: [email protected], [email protected]

vizion-challenge's People

Contributors

giangdao-vizion avatar huyjs9 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.