I got a problem trying to use the three.js library. I’ve followed the exactly same steps as in the tutorial to avoid errors, and i just cant run. I’ve already tried to run it in a server, and the same happens, a black screen. The tutorial is in the link https://redstapler.co/add-3d-model-to-website-threejs/. I’ve uploaded the html and the whole folder on GoogleDrive, its size is about 35MB and the link is https://drive.google.com/file/d/1lrtnlemdBDDECGq7U7LsXz0V6CJuhfAE/view?usp=sharing. I really could not figure out what was happening, as you can see if you download the zip on the link, i’ve used the same model, the same code, even the same css. Unfortunately no success after all. Any help would be appreciated. As i said, some foruns says that i must run it into a server, but if I do so some errors disappear, but the black screen is the same as if i ran in local. I did te exactly same thing as in the tutorial to eliminate possible error, but i doesnt run anyway. Any help would be appreciated
There are loads of small errors in the code in that tutorial. I’d say find a better tutorial and try over.
Here’s a fixed version of the script. It should work now, as long as you run it with a server, but it has way too many lights. That will probably cause performance issues on mobile devices.
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8 />
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<script type="module">
import {
Camera,
DirectionalLight,
Color,
Material,
PointLight,
WebGLRenderer,
Scene,
PerspectiveCamera,
Texture,
AmbientLight,
} from 'https://unpkg.com/three@0.120.1/build/three.module.js'
import { OrbitControls } from 'https://unpkg.com/three@0.120.1/examples/jsm/controls/OrbitControls.js'
import { GLTFLoader } from 'https://unpkg.com/three@0.120.1/examples/jsm/loaders/GLTFLoader.js'
let scene, camera, renderer;
function init() {
scene = new Scene();
scene.background = new Color(0xdddddd);
camera = new PerspectiveCamera(40,window.innerWidth/window.innerHeight,1,5000);
camera.rotation.y = 45/180*Math.PI;
camera.position.x = 8;
camera.position.y = 1;
camera.position.z = 10;
const hlight = new AmbientLight (0x404040,100);
scene.add(hlight);
const directionalLight = new DirectionalLight(0xffffff,100);
directionalLight.position.set(0,1,0);
directionalLight.castShadow = true;
scene.add(directionalLight);
const light = new PointLight(0xc4c4c4,10);
light.position.set(0,300,500);
scene.add(light);
const light2 = new PointLight(0xc4c4c4,10);
light2.position.set(500,100,0);
scene.add(light2);
const light3 = new PointLight(0xc4c4c4,10);
light3.position.set(0,100,-500);
scene.add(light3);
const light4 = new PointLight(0xc4c4c4,10);
light4.position.set(-500,300,500);
scene.add(light4);
renderer = new WebGLRenderer({antialias:true});
renderer.setSize(window.innerWidth,window.innerHeight);
document.body.appendChild(renderer.domElement);
const controls = new OrbitControls(camera, renderer.domElement);
// controls.addEventListener('change', renderer);
let loader = new GLTFLoader();
loader.load('scene.gltf', function(gltf){
const car = gltf.scene.children[0];
console.log('car: ', car);
car.scale.set(0.5,0.5,0.5);
scene.add(car);
animate();
});
}
function animate() {
renderer.render(scene,camera);
requestAnimationFrame(animate);
}
init();
</script>
</body>
</html>
I really have no words to thanks you ! It worked now. Just one last question, to put it inside a page i just need to use an iframe, correct ?
I really appreciate your help. Thanks
Hey I am new to this field, I am facing the same issue what @Filipeecs was facing before.
I copy pasted the updated code which @looeee has provided but still shows black screen for me. Can you help me please? And tell me where I have gone wrong! Attaching file in google link.Blackscreen_error.zip - Google Drive