How do I load a 3D model using three.js using the editor playcode.io?

Question

I have been trying to load in a 3d Model on playcode.io. My browser supports WebGl and so does playcode.io (I think) So far, no success. There is no problem The model either. The model is called plane.gltf. The screen is just a blank black screen. Here is my code for the three.js:

import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

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

const loader = new GLTFLoader();

loader.load( 'plane.gltf', function ( gltf ) {

    scene.add( gltf.scene );

}, undefined, function ( error ) {

    console.error( error );

} );

function animate() {
    renderer.render( scene, camera );
}
renderer.setAnimationLoop( animate );

And here is my code for the HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>My first three.js app</title>
        <style>
            body { margin: 0; }
        </style>
    </head>
    <body>
        <script type="module" src="/main.js"></script>
    </body>
</html>

I checked all the threeJS documentation and tutorials. I was expecting the model to load up. it didn't. I tried in multiple editors but no success. am I doing something wrong?

Łukasz Daniel Mastalerz · Accepted Answer · 2024-12-10 15:07:08Z

0

The black screen tells you that you are rendering the scene correctly. Assuming the path to the model is correct. First, add lights to the scene:

const light = new THREE.DirectionalLight(0xffffff, .5);
scene.add(light1);
const light2 = new THREE.AmbientLight(0xffffff);
scene.add(light2);

When you still see black screen, that probably means that model is in wrong place on scene.

Try set:

camera.position.z = 10; // Make some experiments with position

That depends on your model sometimes is to big, no need to experiments with scale, just move camera.

If still you render black screen try load model from link, to be sure, that something else produces that issue.

const loader = new GLTFLoader();
loader.load(
   'https://threejs.org/examples/models/gltf/Nefertiti/Nefertiti.glb',
    function (gltf) {
        scene.add(gltf.scene);
    });

answered Dec 10, 2024 at 15:07

Łukasz Daniel Mastalerz

2,6162 gold badges10 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How do I load a 3D model using three.js using the editor playcode.io?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related