Skip to content

Commit

Permalink
Added shadow support and directional light setup
Browse files Browse the repository at this point in the history
  • Loading branch information
shipilovden committed Oct 24, 2024
1 parent b7c1e5d commit 794c32c
Show file tree
Hide file tree
Showing 6 changed files with 153 additions and 17 deletions.
1 change: 1 addition & 0 deletions editor/index.html
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<!DOCTYPE html>
<html lang="en">
<head>
<script src="../node_modules/html2canvas/dist/html2canvas.min.js"></script>
<title>Gallery20</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
Expand Down
40 changes: 40 additions & 0 deletions editor/js/Editor.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,48 @@ _DEFAULT_CAMERA.name = 'Camera';
_DEFAULT_CAMERA.position.set( 0, 5, 10 );
_DEFAULT_CAMERA.lookAt( new THREE.Vector3() );

function setupShadows(editor) {

// Создаем рендерер с поддержкой теней
const _RENDERER = new THREE.WebGLRenderer({ antialias: true });
_RENDERER.shadowMap.enabled = true;
_RENDERER.setSize(window.innerWidth, window.innerHeight);

// Поправляем этот блок: добавляем рендерер в DOM
const container = document.body; // Убедитесь, что это правильный DOM-элемент
if (container) {
container.appendChild(_RENDERER.domElement); // Проверяем, что domElement существует
} else {
console.error("Container element is missing.");
}

// Directional Light, которое отбрасывает тени
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(5, 10, 7.5);
directionalLight.castShadow = true;
editor.scene.add(directionalLight);

// Пример объекта, который отбрасывает тень
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshPhongMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
cube.castShadow = true; // Объект будет отбрасывать тень
cube.receiveShadow = true; // Объект будет получать тень
editor.scene.add(cube);

// Настройки камеры и рендеринг сцены
const camera = editor.camera;
const scene = editor.scene;
function animate() {
requestAnimationFrame(animate);
_RENDERER.render(scene, camera);
}
animate();
}

function Editor() {


const Signal = signals.Signal; // eslint-disable-line no-undef

this.signals = {
Expand Down
24 changes: 21 additions & 3 deletions editor/js/Menubar.Screenshot.js
Original file line number Diff line number Diff line change
Expand Up @@ -29,11 +29,27 @@ function MenubarScreenshot( editor ) {
const camera = editor.camera; // Убедитесь, что у вас есть камера
const scene = editor.scene; // Убедитесь, что у вас есть сцена

// Функция для обновления соотношения сторон камеры и размера рендера
function updateRendererSize() {
const width = window.innerWidth;
const height = window.innerHeight;

// Обновляем размеры рендерера
renderer.setSize(width, height);

// Обновляем соотношение сторон камеры и матрицу проекции
camera.aspect = width / height;
camera.updateProjectionMatrix();
}

// Screenshot Button
const screenshotOption = new UIRow();
screenshotOption.setClass( 'option' );
screenshotOption.setTextContent( 'Take Screenshot' );
screenshotOption.onClick( function () {
// Обновляем размеры рендерера и камеры
updateRendererSize();

// Рендер сцены перед созданием скриншота
renderer.render(scene, camera);

Expand All @@ -54,9 +70,11 @@ function MenubarScreenshot( editor ) {
fullscreenOption.onClick( function () {
if (document.fullscreenElement === null) {
document.documentElement.requestFullscreen().then(() => {
updateRendererSize(); // Обновляем размеры при входе в полноэкранный режим
takeFullscreenScreenshot(renderer, scene, camera);
});
} else {
updateRendererSize(); // Обновляем размеры для полноэкранного скриншота
takeFullscreenScreenshot(renderer, scene, camera);
}
});
Expand All @@ -67,6 +85,7 @@ function MenubarScreenshot( editor ) {
telegramOption.setClass( 'option' );
telegramOption.setTextContent( 'Send Screenshot to Telegram' );
telegramOption.onClick( function () {
updateRendererSize(); // Обновляем размеры рендера перед отправкой
sendScreenshotToTelegram(renderer, scene, camera);
});
options.add( telegramOption );
Expand All @@ -89,10 +108,10 @@ function MenubarScreenshot( editor ) {
const canvas = renderer.domElement;
canvas.toBlob(function(blob) {
const formData = new FormData();
formData.append('chat_id', '-____________________________'); // ID вашего канала
formData.append('chat_id', '________________'); // ID вашего канала
formData.append('photo', blob, 'screenshot.png');

fetch(`https://api.telegram.org/bot_________________________________/sendPhoto`, {
fetch(`https://api.telegram.org/bot__________________/sendPhoto`, {
method: 'POST',
body: formData
})
Expand All @@ -111,7 +130,6 @@ function MenubarScreenshot( editor ) {
}

return container;

}

export { MenubarScreenshot };
54 changes: 40 additions & 14 deletions editor/js/Menubar.Shaders.js
Original file line number Diff line number Diff line change
Expand Up @@ -32,31 +32,25 @@ function MenubarShaders( editor ) {
// Обрабатываем включение/выключение чекбокса для Sky
checkboxSky.onChange(function () {
if ( this.getValue() === true ) {
// Создаём контейнер для неба (делаем его полноценным объектом для иерархии)
skyContainer = new THREE.Object3D();
skyContainer.name = 'Sky';

// Создаём небо
const sky = new Sky();
sky.scale.setScalar( 450000 );
skyContainer.add( sky ); // Добавляем небо в контейнер
skyContainer.add( sky );

// Настраиваем позицию солнца
const sun = new THREE.Vector3();
sun.x = 4000;
sun.y = 800;
sun.z = -500;
sky.material.uniforms['sunPosition'].value.copy( sun );

// Добавляем контейнер с небом в сцену и иерархию
editor.execute( new AddObjectCommand( editor, skyContainer ) );

// Создаём контейнер для GUI
const guiContainer = document.createElement('div');
guiContainer.id = 'gui-container';
document.body.appendChild(guiContainer);

// Создаём GUI внутри этого контейнера
gui = new dat.GUI({ autoPlace: false });
guiContainer.appendChild(gui.domElement);

Expand All @@ -70,11 +64,10 @@ function MenubarShaders( editor ) {
exposure: 0.5
};

// Добавляем настройки в GUI с обновлением сцены
gui.add(skyParams, 'turbidity', 0, 20).onChange(() => {
sky.material.uniforms['turbidity'].value = skyParams.turbidity;
sky.material.needsUpdate = true; // Обновляем шейдер
editor.signals.sceneGraphChanged.dispatch(); // Сообщаем редактору об изменении
sky.material.needsUpdate = true;
editor.signals.sceneGraphChanged.dispatch();
});

gui.add(skyParams, 'rayleigh', 0, 4).onChange(() => {
Expand Down Expand Up @@ -119,20 +112,53 @@ function MenubarShaders( editor ) {
});

} else {
// Убираем небо при выключении чекбокса
if ( skyContainer ) {
editor.execute( new RemoveObjectCommand( editor, skyContainer ) ); // Удаляем контейнер
editor.execute( new RemoveObjectCommand( editor, skyContainer ) );
skyContainer = null;
}

// Убираем GUI, если чекбокс снят
if ( gui ) {
gui.destroy(); // Удаляем GUI
gui.destroy();
gui = null;
}
}
});

// Добавляем пункт Shadows с чекбоксом
const optionShadows = new UIRow();
const checkboxShadows = new UICheckbox();
optionShadows.setClass( 'option' );
optionShadows.setTextContent( 'Shadows' );
optionShadows.add( checkboxShadows );
options.add( optionShadows );

checkboxShadows.onChange(function () {
if (this.getValue() === true) {
// Включаем рендеринг теней
editor.renderer.shadowMap.enabled = true;

editor.scene.traverse(function (object) {
if (object.isLight) {
object.castShadow = true; // Свет может отбрасывать тени
}
if (object.isMesh) {
object.castShadow = true; // Объект может отбрасывать тени
object.receiveShadow = true; // Объект может получать тени
}
});
} else {
// Отключаем рендеринг теней
editor.renderer.shadowMap.enabled = false;

editor.scene.traverse(function (object) {
if (object.isMesh) {
object.castShadow = false;
object.receiveShadow = false;
}
});
}
});

return container;
}

Expand Down
50 changes: 50 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -133,6 +133,7 @@
"cannon": "^0.6.2",
"dat.gui": "^0.7.9",
"gsap": "^3.12.5",
"html2canvas": "^1.4.1",
"socket.io": "^4.8.0",
"socket.io-client": "^4.8.0",
"stats.js": "^0.17.0",
Expand Down

0 comments on commit 794c32c

Please sign in to comment.