Настройка ThreeJS для работы

Настройка ThreeJS для работы — Лисья нора

Главная

Лента

Блог

Сервисы

Шаблоны

Главная » Шаблоны » Настройка ThreeJS для работы

В избранное

§ Минимальный код

Для начала, надо поставить последнюю версию ThreeJS на сайт.

Минимальный код для запуска:

1<!DOCTYPE html>
2<html>
3<head>
4    <script src="js/three.min.js"></script>
5</head>
6<body>
7    <script>
8
9        // Ширина и высота окна WebGL
10        const width    = 640;
11        const height   = 480;
12
13        // Создание объектов
14        let scene    = new THREE.Scene();
15
16        // 75 - угол обзора; width / height - пропорции; 0.1 .. 1000 дальность прорисовки
17        let camera   = new THREE.PerspectiveCamera( 75, width / height, 0.1, 1000 );
18        let renderer = new THREE.WebGLRenderer();
19
20        // Установка ширины и высоты
21        renderer.setSize( width, height );
22
23        // Добавление на страницу
24        document.body.appendChild( renderer.domElement );
25
26        // Создадим какую-нибудь геометрию
27        let geometry = new THREE.BoxGeometry( 1, 1, 1 );
28        let material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
29        let cube = new THREE.Mesh( geometry, material );
30        scene.add( cube );
31
32        // Слегка отодвинем камеру
33        camera.position.x = 1;
34        camera.position.y = 1;
35        camera.position.z = 3;
36
37        function animate() {
38            requestAnimationFrame( animate );
39            renderer.render( scene, camera );
40        }
41        animate();
42
43    </script>
44</body>
45</html>

Номера