Форум программистов, компьютерный форум, киберфорум
JavaScript: HTML5 Canvas
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.71/7: Рейтинг темы: голосов - 7, средняя оценка - 4.71
0 / 0 / 0
Регистрация: 02.10.2019
Сообщений: 34
1

Babylon JS Не отображается текстура skybox

20.09.2021, 20:50. Показов 1352. Ответов 2
Метки нет (Все метки)

Author24 — интернет-сервис помощи студентам
Я только начал изучать Babylon JS, и столкнулся с проблемой. Изучая данный примерhttps://playground.babylonjs.com/#1SLLOJ#17 я заметил, что текстура применяемая к skybox не отображается. Я получаю пустой чёрный куб. Данная ошибка возникает именно в загруженом проекте. Все текстуры хранятся вот в этой папке
Babylon JS Не отображается текстура skybox
. Вот сам JS код:
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
var canvas = document.getElementById("renderCanvas");
 
    var engine = null;
    var scene = null;
    var sceneToRender = null;
    var createDefaultEngine = function() { return new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true,  disableWebGL2Support: false}); };
    var createScene = function () {
        var scene = new BABYLON.Scene(engine);
    
        var camera = new BABYLON.ArcRotateCamera("Camera", 3 * Math.PI / 2, Math.PI / 4, 100, BABYLON.Vector3.Zero(), scene);
        camera.attachControl(canvas, true, false);
    
        var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
        
        // Skybox
        var skybox = BABYLON.Mesh.CreateBox("skyBox", 5000.0, scene);
        var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
        skyboxMaterial.backFaceCulling = false;
        skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("textures/TropicalSunnyDay_nz", scene);
        skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
        skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
        skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
        skyboxMaterial.disableLighting = true;
        skybox.material = skyboxMaterial;
            
        // Water
        var waterMesh = BABYLON.Mesh.CreateGround("waterMesh", 2048, 2048, 16, scene, false);
        var water = new BABYLON.WaterMaterial("water", scene, new BABYLON.Vector2(512, 512));
        water.backFaceCulling = true;
        water.bumpTexture = new BABYLON.Texture("textures/waterbump.png", scene);
        water.windForce = -10;
        water.waveHeight = 1.7;
        water.bumpHeight = 0.1;
        water.windDirection = new BABYLON.Vector2(1, 1);
        water.waterColor = new BABYLON.Color3(0, 0, 221 / 255);
        water.colorBlendFactor = 0.0;
        water.addToRenderList(skybox);
        waterMesh.material = water;
    
        return scene;
    }
            window.initFunction = async function() {
                
                
                var asyncEngineCreation = async function() {
                    try {
                    return createDefaultEngine();
                    } catch(e) {
                    console.log("the available createEngine function failed. Creating the default engine instead");
                    return createDefaultEngine();
                    }
                }
 
                window.engine = await asyncEngineCreation();
    if (!engine) throw 'engine should not be null.';
    window.scene = createScene();};
    initFunction().then(() => {sceneToRender = scene        
        engine.runRenderLoop(function () {
            if (sceneToRender && sceneToRender.activeCamera) {
                sceneToRender.render();
            }
        });
    });
 
    // Resize
    window.addEventListener("resize", function () {
        engine.resize();
    });
0
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
20.09.2021, 20:50
Ответы с готовыми решениями:

Не отображается текстура
загружаю текстуру 256*256, но, почему-то она не отображается. #include <windows.h> //...

Не отображается текстура
Не отображается текстура. Наложил через shading. Картинку на куб. Но не отображается текстура....

Некорректно отображается текстура
Почему спрайт нормально отображается только после 3 клика, при том что счетчик k работает...

Текстура отображается неверно
На объекте текстура отображается неверно, вместо одной, наложилось 4. Получилось 4 текстуры на...

OpenGL + Win8, не отображается текстура
Столкнулся с такой проблемой у меня не отображается текстура, не выдаёт ошибку, просто белый...

2
5160 / 2772 / 465
Регистрация: 05.10.2013
Сообщений: 7,323
Записей в блоге: 150
19.11.2021, 13:34 2
Лучший ответ Сообщение было отмечено 8Observer8 как решение

Решение

Название: skybox-babylonjs-js-compressed.gif
Просмотров: 28

Размер: 924.4 Кб

Демка в песочнице

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>Skybox. BabylonJS, JavaScript</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babylonjs/4.2.0/babylon.js"></script>
 
    <style>
        html,
        body {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
 
        #renderCanvas {
            width: 100%;
            height: 100%;
            touch-action: none;
        }
    </style>
</head>
 
<body>
    <canvas id="renderCanvas"></canvas>
 
    <script>
        const canvas = document.getElementById("renderCanvas");
        const engine = new BABYLON.Engine(canvas, true);
        const scene = new BABYLON.Scene(engine);
        const camera = new BABYLON.ArcRotateCamera("camera", 90 * Math.PI / 180, 70 * Math.PI / 180, 3,
            new BABYLON.Vector3(0, 0, 0), scene);
        camera.attachControl(canvas, true);
        camera.wheelPrecision = 100;
        const light = new BABYLON.HemisphericLight("hemisphericLight", new BABYLON.Vector3(0.1, 1, 0.2), scene);
 
        const ground = BABYLON.MeshBuilder.CreateGround("ground", { width: 2, height: 2 }, scene);
        const box = BABYLON.MeshBuilder.CreateBox("box", { width: 0.5, height: 0.5, depth: 0.5 }, scene);
        box.position.y = 0.25;
        const sphere = BABYLON.MeshBuilder.CreateSphere("sphere", { diameter: 0.5 }, scene);
        sphere.position.y = 0.75;
 
        const skybox = BABYLON.MeshBuilder.CreateBox("skybox", { size: 1000 }, this.scene);
        skybox.infiniteDistance = true;
        const skyboxMaterial = new BABYLON.StandardMaterial("skyboxMat", this.scene);
        skyboxMaterial.backFaceCulling = false;
        const files = [
            "https://www.cyberforum.ru/images/skybox_px.jpg",
            "https://www.cyberforum.ru/images/skybox_py.jpg",
            "https://www.cyberforum.ru/images/skybox_pz.jpg",
            "https://www.cyberforum.ru/images/skybox_nx.jpg",
            "https://www.cyberforum.ru/images/skybox_ny.jpg",
            "https://www.cyberforum.ru/images/skybox_nz.jpg",
        ];
        skyboxMaterial.reflectionTexture = BABYLON.CubeTexture.CreateFromImages(files, this.scene);
        skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
        skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
        skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
        skybox.material = skyboxMaterial;
 
        engine.runRenderLoop(() => { scene.render(); });
        window.onresize = () => engine.resize();
    </script>
</body>
 
</html>
Вложения
Тип файла: zip skybox-babylonjs-js.zip (88.9 Кб, 2 просмотров)
0
5160 / 2772 / 465
Регистрация: 05.10.2013
Сообщений: 7,323
Записей в блоге: 150
22.11.2021, 14:23 3
Версия на языке TypeScript: Skybox на Babylon.js и TypeScript с инструкцией по сборке
0
22.11.2021, 14:23
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
22.11.2021, 14:23
Помогаю со студенческими работами здесь

Не отображается текстура SDL + OpenGL
Вот код SDL_Window *window = NULL; SDL_Surface *surf = NULL; SDL_GLContext glContext;...

DevIL - 64-битная текстура не отображается
Есть библиотека DevIL. Она грузит текстуры. play_textura(IL_PNG, &quot;c/DEMO/m/MENU.png&quot;,...

OpenGl под C#. Текстура отображается неверно
Недавно разобрался как использовать Tao для взаимодействия OpenGL и C#, и вот возникла проблемка....

Текстура на модели отображается только с одной стороны
Сделал приборы в Cinema 4D и перенёс в свой проект Unity. В синеме объект имеет текстуру с обоих...

Не отображается текстура при рендере cycle в blender
При рендере в cycle текстура просто отображается серым цветом,хотя в Eevee все работает нормально....


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru