Плоские фигуры
Нарисовать ломаную линию
// создадим материал зелёного цвета
let material_for_lines_first = new THREE.LineBasicMaterial({ color: "#00FF00", linewidth: 7 });
// создаём структуру для хранения точек
let container_of_tochki_first = new THREE.Geometry();
// добавляем точки
container_of_tochki_first.vertices.push(new THREE.Vector3(1, 0, 0));
container_of_tochki_first.vertices.push(new THREE.Vector3(15, 3, 0));
container_of_tochki_first.vertices.push(new THREE.Vector3(1, 9, 0));
container_of_tochki_first.vertices.push(new THREE.Vector3(15, 12, 0));
// создаём ломанную линию из точек
let figura_first = new THREE.Line(container_of_tochki_first, material_for_lines_first);
// добавляем ломанную линию на сцену
scene.add(figura_first);
// выводим на экран то, что видит камера
renderer.render(scene, camera);
Создать анимацию ломаной линии
// создадим материал
let material_for_lines_first = null;
// создадим фигуру
let figura_first = null;
// создадим структуру для хранения точек
let container_of_tochki_first = null;
// создадим изменяющуюяся позицию Z
let dZ = 0;
// вызываем блок кода циклически
let movingInterval = setInterval(function(){
// если фигура существует, то удаляем её
try {
scene.remove(figura_first);
} catch (err) {
// error
}
// задаём материал
material_for_lines_first = new THREE.LineBasicMaterial({ color: "#2940ff", linewidth: 7 });
// создаём стуктуру для хранения точек
container_of_tochki_first = new THREE.Geometry();
// добавляем точки
container_of_tochki_first.vertices.push(new THREE.Vector3(1, 0, dZ));
container_of_tochki_first.vertices.push(new THREE.Vector3(15, 3, dZ));
container_of_tochki_first.vertices.push(new THREE.Vector3(1, 9, dZ));
container_of_tochki_first.vertices.push(new THREE.Vector3(15, 12, dZ));
// создаём ломанную линию из точек
figura_first = new THREE.Line(container_of_tochki_first, material_for_lines_first);
// добавляем ломанную линию на сцену
scene.add(figura_first);
// выводим на экран то, что видит камера
renderer.render(scene, camera);
// изменяем позицию Z
dZ -= 0.2;
}, 50);
Last updated
Was this helpful?