Build a 3D World in React with Three.js - [React Three Fiber Tutorial]

This video starts with me talking about the diference between React and ReactDOM. React Three Fiber uses React to keep track of 3D objects that gets rendered in a webGL canvas via three.js . The result is the ability to code 3D environments the same way you are used to code a React Web Application. We can even add physics and animation to the 3D objects in the world. In this example we place a Box on a Plane inside a Skybox of stars. We then add physics to let the box fall on the plane and finally we interact with the box by attaching a click event to the box. For the physics we are using React hooks for Cannon.js.

Готовим 3D-графику в браузере (часть 1)

Целью этого воркшопа является ознакомление людей с трехмерной графикой в вебе. Предназначается для тех, которые мало знаком (или вообще не знаком) с работой с трехмерной графикой. В процессе воркшопа будет сделана небольшая демка. Будет продемонстрирован весь цикл работы с трехмерными моделями (от экспорта из 3D-редактора до отрисовки на веб-странице). В процессе будет использована библиотека Three.js. Также будет рассмотрен формат хранения 3D-моделей GLTF.

Воркшоп: Готовим 3D-графику в браузере (часть 2)

Целью этого воркшопа является ознакомление людей с трехмерной графикой в вебе. Предназначается для тех, которые мало знаком (или вообще не знаком) с работой с трехмерной графикой. В процессе воркшопа будет сделана небольшая демка. Будет продемонстрирован весь цикл работы с трехмерными моделями (от экспорта из 3D-редактора до отрисовки на веб-странице). В процессе будет использована библиотека Three.js. Также будет рассмотрен формат хранения 3D-моделей GLTF.

How to use Lighting and WebGLRenderer in Three.js

Read about the types of lighting options and highly performant renderer WebGLRenderer available in Three.js, a JavaScript graphics library. Three.js uses the WebGL engine in the browser for rendering scenes. We’ll look at types of lights and WebGLRenderer in Three.js.

Three.js vs Babylon.js: Battle for the Best WebGL Frameworks

Three.js vs Babylon.js: Battle for the Best WebGL Frameworks. Three.js organize the documents in a way that you’ll expect, just like any other software; babylon.js has some innovative ideas, especially when it heavily intertwining Playground as examples for documentation, but it is not easy for you to navigate.

CSS Flip Card Effect & Design

Learn how to create a flip card with CSS. Create a div container. Put in it another container with perspective defined. When hovering on the outside containe...