SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.
SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.
Successfully reported this slideshow.
Activate your 30 day free trial to unlock unlimited reading.
Путь к WebGL через THREE.js | Odessa Frontend Meetup #12
Современный фронтэнд – это не только React/Angular/Vue, вёрстка и анимации. Это ещё и полноценный 3D.
Вместе с Андреем Дьяковым мы разбираем основы компьютерной графики, WebGL и Three.js, говорим об оптимизации трёхмерных приложений в современных браузерах и создаём интерактивное 3D-приложение прямо на докладе.
10.
Шейдеры: полный доступ ко всем OpenGL-шейдерам (GLSL)
11.
Источники света:
внешний, направленный, точечный;
Тени: брошенные и полученные
Камеры:
перспективная или ортографическая
Сцена:
добавление и удаление объектов в
режиме реального времени, туман
Объекты:
сети, частицы, спрайты, линии,
скелетная анимация и другое
Геометрия:
плоскость, куб, сфера, тор, 3D текст и
другое;
Модификаторы: ткань, выдавливание
А также загрузчики данных, экспорт и
импорт утилиты, поддержка сообщества,
постоянные обновления, отличная
документация и невероятное количество
примеров и много-много других плюшек
12.
<html>
<head>
<title>My first three.js app</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="js/three.js"></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
var animate = function () {
requestAnimationFrame( animate );
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render( scene, camera );
};
animate();
</script>
</body>
</html>
13.
<html>
<head>
<title>My first three.js app</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="js/three.js"></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
var animate = function () {
requestAnimationFrame( animate );
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render( scene, camera );
};
animate();
</script>
</body>
</html>
Современный фронтэнд – это не только React/Angular/Vue, вёрстка и анимации. Это ещё и полноценный 3D.
Вместе с Андреем Дьяковым мы разбираем основы компьютерной графики, WebGL и Three.js, говорим об оптимизации трёхмерных приложений в современных браузерах и создаём интерактивное 3D-приложение прямо на докладе.
10.
Шейдеры: полный доступ ко всем OpenGL-шейдерам (GLSL)
11.
Источники света:
внешний, направленный, точечный;
Тени: брошенные и полученные
Камеры:
перспективная или ортографическая
Сцена:
добавление и удаление объектов в
режиме реального времени, туман
Объекты:
сети, частицы, спрайты, линии,
скелетная анимация и другое
Геометрия:
плоскость, куб, сфера, тор, 3D текст и
другое;
Модификаторы: ткань, выдавливание
А также загрузчики данных, экспорт и
импорт утилиты, поддержка сообщества,
постоянные обновления, отличная
документация и невероятное количество
примеров и много-много других плюшек
12.
<html>
<head>
<title>My first three.js app</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="js/three.js"></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
var animate = function () {
requestAnimationFrame( animate );
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render( scene, camera );
};
animate();
</script>
</body>
</html>
13.
<html>
<head>
<title>My first three.js app</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="js/three.js"></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
var animate = function () {
requestAnimationFrame( animate );
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render( scene, camera );
};
animate();
</script>
</body>
</html>