My console is not showing any errors. I am utilizing the live server VS code extension to execute the JS code. Can someone please assist me?"
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 encountering errors in the console indicating that some functions were renamed or changed. I fixed these issues but the application still shows a blank canvas without any output.