CODEWITHSUNDEEP
javascriptthree.js
Ecburt
Ecburt

Reputation: 125

Having trouble implementig Skybox in THREE.js

I am getting no errors in the console. I am using the live server VS code extension to run the JS. Help!

HTML:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script src="https://threejs.org/build/three.js"></script>
    <script src="/script.js"></script>
</body>
</html>

Script:

var scene, camera, renderer;
initialiseScene();
animate();

function initialiseScene() {
    //scene
    scene = new THREE.Scene();

    //FOV, Aspect ratio, Near clip, Far clip
    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0, 1, 1000);

    //renderer
    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

}

//AXES
var axesNavigation = new THREE.AxesHelper(100);
scene.add(axesNavigation);

//FLOOR TEXTURE
var loader = new THREE.TextureLoader();

var floorTexture = loader.load('assets/stone_floor.jpg', function ( texture){

    texture.wrapS= texture.wrapT = THREE.RepeatWrapping;
    texture.offset.set(0,0);
    texture.repeat.set(2,2);
});

//FLOOR MATERIAl
var floorMaterial = new THREE.MeshBasicMaterial({ map: floorTexture, side: THREE.DoubleSide });
var floorGeometry = new THREE.PlaneGeometry(1000, 1000, 10, 10);
var floor = new THREE.Mesh(floorGeometry, floorMaterial);
floor.position.y = -0.5;
floor.rotation.x = Math.PI/2;
scene.add(floor);

//SKYBOX

let materialArray = [];
let texture_ft = new THREE.TextureLoader().load( 'assets/hot_ft.png');
let texture_bk = new THREE.TextureLoader().load( 'assets/hot_bk.png');
let texture_up = new THREE.TextureLoader().load( 'assets/hot_up.png');
let texture_dn = new THREE.TextureLoader().load( 'assets/hot_dn.png');
let texture_rt = new THREE.TextureLoader().load( 'assets/hot_rt.png');
let texture_lf = new THREE.TextureLoader().load( 'assets/hot_lf.png');
  
materialArray.push(new THREE.MeshBasicMaterial( { map: texture_ft }));
materialArray.push(new THREE.MeshBasicMaterial( { map: texture_bk }));
materialArray.push(new THREE.MeshBasicMaterial( { map: texture_up }));
materialArray.push(new THREE.MeshBasicMaterial( { map: texture_dn }));
materialArray.push(new THREE.MeshBasicMaterial( { map: texture_rt }));
materialArray.push(new THREE.MeshBasicMaterial( { map: texture_lf }));
   
for (let i = 0; i < 6; i++)
  materialArray[i].side = THREE.BackSide;
   
let skyboxGeo = new THREE.BoxGeometry( 10000, 10000, 10000);
let skybox = new THREE.Mesh( skyboxGeo, materialArray );
scene.add( skybox );


//ANIMATE
function animate() {
    requestAnimationFrame(animate);
    render();
}
function update(){};
//RENDER
function render() {
    renderer.render(scene, camera);
}

I was getting errors in the console saying that some of the functions i was using had been renamed etc. I ironed all these bugs out but it still wont work im just getting literally a blank canvas.

Upvotes: 1

Views: 159

Answers (1)

Mugen87
Mugen87

Reputation: 31026

camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0, 1, 1000);

It seems the far value of your camera is too small. Your skybox has a width, height and depth of 10.000 which means it won't be visible within the camera's view frustum. Try it with a far value of 20000.

Or even better, load your cube texture with CubeTextureLoader like in the following example and assign the resulting CubeTexture to Scene.background.

https://threejs.org/examples/#webgl_effects_parallaxbarrier

Upvotes: 1

Related Questions