I am currently running 5.6.1 which seems to be the newest version. When I open the index.html I get a black weboage and nothing else. here is my index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Skybox</title>
<script src="three.min.js"></script>
<script src="OrbitControls.js"></script>
<script src="skybox.js"></script>
</head>
<style>
body {
margin:0;
}
canvas {
width:100%;
height:100%
}
</style>
<body>
</body>
</html>
and hereās the js. This is from a tutorial I was trying to do.
let scene, camera, renderer;
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(55,window.innerWidth / window.innerHeight, 45, 30000);
camera.position.set(100,100,1000);
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
let controls = new THREE.OrbitalControls(camera);
controls.addEventListener('change',renderer);
let materialArray = [];
let texture_ft = new THREE.TextureLoader().load('https://imgur.com/IM0AGHy');
let texture_bk = new THREE.TextureLoader().load('https://imgur.com/IM0AGHy');
let texture_up = new THREE.TextureLoader().load('https://imgur.com/IM0AGHy');
let texture_dn = new THREE.TextureLoader().load('https://imgur.com/IM0AGHy');
let texture_rt = new THREE.TextureLoader().load('https://imgur.com/IM0AGHy');
let texture_lf = new THREE.TextureLoader().load('https://imgur.com/IM0AGHy');
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}));
let skyboxGeo = new THREE.BoxGeometry(10000,10000,10000);
let skybox = new THREE.Mesh(materialArray, skyboxGeo);
scene.add(skybox);
animate();
};
function animate() {
renderer.render(scene,camera);
requestAnimationFrame(animate);
}
init();
NOTE: I currently have imgur links in there because I wanted to see if that would change anything. Itās the same pic for all links because I was testing. Also in imgur there are two different links I can copy and I tried both.
I have also tried,
let materialArray = [];
let texture_ft = new THREE.TextureLoader().load('bay_ft.jpg');
let texture_bk = new THREE.TextureLoader().load('bay_bk.jpg');
let texture_up = new THREE.TextureLoader().load('bay_up.jpg');
let texture_dn = new THREE.TextureLoader().load('bay_dn.jpg');
let texture_rt = new THREE.TextureLoader().load('bay_rt.jpg');
let texture_lf = new THREE.TextureLoader().load('bay_lf.jpg');
which are how the images are labled and are in the same folder as the html and js. Like I said before I do have access to the images through my browser by typing in localhost and navigating the file tree.
hereās a basic yellow cube that does render for me
var mesh;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.z = 400;
scene = new THREE.Scene();
var geometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
var material = new THREE.MeshBasicMaterial( { color: 0xffee00 } );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
//
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
mesh.rotation.x += 0.005;
mesh.rotation.y += 0.01;
renderer.render( scene, camera );
}
Not really sure where to go from here.
