Model loading from blender

Can anyone please guide me how to load a model in 3.js from blender. I’m just starting 3.js and it is very hard to find any tutorial because the previous method is not working anymore.

I suggest you start with this guide:

https://threejs.org/docs/index.html#manual/en/introduction/Loading-3D-models

1 Like

Thanks man, actually i m developing a website for my university " final year project". Is there any way like you upload multiple models on a page and than move those models and place those models anywhere on the page.

I would probably start with a simple example like webgl_morphtargets_horse. You can reuse a single instance of GLTFLoader to load an arbitrary amount of models into your scene.

Hey i have the following error while trying to upload a model
Uncaught TypeError: THREE.GLTFLoader is not a constructor

JS:

let scene, camera, renderer, hlight;

function init(){
	scene = new THREE.Scene();
	camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.01, 1000);
	hlight = new THREE.AmbientLight (0x404040, 100);
	scene.add(hlight);
	
	renderer = new THREE.WebGLRenderer({antialias: true});
	renderer.setSize(window.innerWidth, window.innerHeight);

	document.body.appendChild(renderer.domElement);

	var loader = new THREE.GLTFLoader();
	loader.load('models/INO.glb', function(gltf){
		scene.add(gltf.scene);
		renderer.render(scene,camera);
	},
	undefined, function ( error ) {

	console.error( error );
	});
}

init();

HTML:

{% load static %}
<!DOCTYPE html>
<html>
<head>
	<title> 3D Model </title>
	<link rel="stylesheet" type="text/css" href="{% static 'css/model.css' %}">
</head>
<body>
	<canvas class="cona"></canvas>
	<script src="{% static 'js/three.js' %}"></script>
	<script src="{% static 'js/donut.js' %}"></script>
	<script nomodule src="{% static 'js/GLTFLoader.js' %}"></script>
</body>
</html>

Does it work if you use this URL instead?

https://threejs.org/examples/js/loaders/GLTFLoader.js

1 Like

:dizzy_face: :dizzy_face: :dizzy_face:

In this case, you probably have included the module version of GLTFLoader into your project. What you actually need is the (global script) version from the above URL.

Still showing the same error. :sob:

Try var loader = new GLTFLoader();

1 Like

Now it is showing the following error

Uncaught ReferenceError: GLTFLoader is not defined

Thanks man finally it work. Now i m facing a new problem my model is not loading it shows a blank black screen.

Failed to load resource: the server responded with a status of 404 (Not Found).
BTW i m doing this in django.