Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Cannot See Mesh From Blender In Threejs

I’m trying to use a mesh I created in blender in threejs. The event log shows the file is being loaded but I cannot see it. Instead there is just a black screen. How do I go about this to have the mesh actually show up?

import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

const scene  = new THREE.Scene();
const loader = new GLTFLoader();

loader.load(
    'scene.glb',
    function ( gltf ) {
        scene.add( gltf.scene );
    },
    function ( xhr ) {
        console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
    },
    function ( error ) {
        console.log( 'An error happened' );
    }
);

const light = new THREE.PointLight(0xffffff, 9, 100, 1.7);
light.position.set(1.53, 2.627, 1.217)
scene.add(light)
 
const camera = new THREE.PerspectiveCamera(45, 800 / 600)
camera.position.z = 24.327
camera.position.x = -4.288
camera.position.y = 24.327
scene.add(camera)

const canvas = document.querySelector(".webgl")
const renderer = new THREE.WebGL1Renderer({canvas})
renderer.setSize(800, 600)
renderer.render(scene, camera)

I’ve gone to three.js editor to view my model and once I change my light’s intensity I can see my mesh but when I try to do in my javascript file it does not change. I’ve tried readjusting the camera position but I still cannot see the mesh.

Tags:

2

Answers


  1. 0

    Probably this is a combination of your model and the lighting. In general a single point light is not very effective as lighting – an environment map or THREE.RoomEnvironment is generally a safer place to start.

    Also try setting a background color for the scene…

    scene.background = new THREE.Color(0xcccccc);

    … so that even if the model is not well-lit, you’ll still see the black outline of the model against a non-black background.

    Login or Signup to reply.
  2. 0

    Try adding an animation loop, put camera.lookAt(scene.position); inside. I don’t know if it will be clearly visible in the photo, but the glb (blue) is the there, trust me 😉 Probably you still need to tinker with the camera settings or/and glb (scale for example), because mesh is extremely small.

    import * as THREE from "three";
import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
// import { GUI } from "dat.gui";

const scene = new THREE.Scene();
const loader = new GLTFLoader();

loader.load("REACT.glb", function (gltf) {
  gltf.scene.position.set(0, 0, 3);
  scene.add(gltf.scene);
});

const light = new THREE.PointLight(0xffffff, 9, 10, 1.7);
light.position.set(1.53, 2.627, 1.217);
scene.add(light);

const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(5, 5, 5);
scene.add(directionalLight);

const ambientLight = new THREE.AmbientLight(0x404040);
scene.add(ambientLight);

const camera = new THREE.PerspectiveCamera(45, 800 / 600);
camera.position.set(-4.288, 24.327, 24.327);
scene.add(camera);

const canvas = document.querySelector(".webglHH");
const renderer = new THREE.WebGL1Renderer({ canvas });
renderer.setSize(800, 600);
renderer.render(scene, camera);

function animate() {
  requestAnimationFrame(animate);
  camera.lookAt(scene.position);
  renderer.render(scene, camera);
}
animate();

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search