Below is my source code and all I am getting is a white screen. I downloaded a free gltf file that will display in online viewers but not in my HTML file when opened in the browser. Would this be a problem loading the gltf file from the source folder.
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8 />
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<script src="three.js"></script>
<script src="GLTFLoader.js"></script>
<script src="OrbitControls.js"></script>
<script>
let scene, camera, renderer;
function init() {
scene = new THREE.Scene();
scene.background = new THREE.Color(0xdddddd);
camera = new THREE.PerspectiveCamera(40,window.innerWidth/window.innerHeight,1,5000);
camera.rotation.y = 45/180*Math.PI;
camera.position.x = 800;
camera.position.y = 100;
camera.position.z = 1000;
controls = new THREE.OrbitControls(camera);
controls.addEventListener('change', renderer);
hlight = new THREE.AmbientLight (0x404040,100);
scene.add(hlight);
directionalLight = new THREE.DirectionalLight(0xffffff,100);
directionalLight.position.set(0,1,0);
directionalLight.castShadow = true;
scene.add(directionalLight);
light = new THREE.PointLight(0xc4c4c4,10);
light.position.set(0,300,500);
scene.add(light);
light2 = new THREE.PointLight(0xc4c4c4,10);
light2.position.set(500,100,0);
scene.add(light2);
light3 = new THREE.PointLight(0xc4c4c4,10);
light3.position.set(0,100,-500);
scene.add(light3);
light4 = new THREE.PointLight(0xc4c4c4,10);
light4.position.set(-500,300,500);
scene.add(light4);
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(window.innerWidth,window.innerHeight);
document.body.appendChild(renderer.domElement);
let loader = new THREE.GLTFLoader();
loader.load('scene.gltf', function(gltf){
car = gltf.scene.children[0];
car.scale.set(0.5,0.5,0.5);
scene.add(gltf.scene);
animate();
});
}
function animate() {
renderer.render(scene,camera);
requestAnimationFrame(animate);
}
init();
</script>
</body>
</html>
One problem is that you create lights with a too high intensity. Values like 100 will not produce proper visual output. Besides, for a basic lighting setup you normally do not need four point lights. Instead, start with an ambient or hemisphere light and a single directional or point light. Also use intensity values around 1.
In my source folder I just need the .gltf and .bin file correct? I extracted those from the downloaded folder into the same folder my index file is located.
I have tried using HTML myself as well as the code you assisted me with and still getting the same results on 2 different computers. I’m pretty confident I have the correct HTML. Are there any issues you can see with how the files in my source folder are arranged? Maybe it is not access the .js files…? THANKS
Are you hosting your assets on a local webserver? This is actually necessary to avoid security issues in browsers. Read the following guide for more information about that topic:
I am simply saving all of the files on my hard drive and opening the HTML file through my browser just to see my results. I will read through that though as well. Thanks again.
Turns out I am failing to load: three.js, GLTFLoader.js and the OrbitControls.js files. Only three errors I am receiving. Once I solve this I think it will work. Hopefully what you sent works out!
Sorry, but it’s not possible to help you with your provided information. It’s probably best if you share your entire repository at github so it’s easier to understand the project setup.
Are you using three.js on your page? Three.js needs to be loaded in order to work. But this is not specific to three.js all javascript libraries work like this.
It’s tricky to think about this in terms of folders since you’re basically making a web page. The internet (http://www.foo.bar) is different than the file system on your computer (c:\folder).
My advice is to study what HTML pages are, then look into how to make them interactive with JS and finally look into managing large JS files by breaking them up.
