Model loading from blender

Questions
1

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.

2

I suggest you start with this guide:

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

1 Like
3

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.

4

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.

5

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>
6

Does it work if you use this URL instead?

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

1 Like
7

:dizzy_face: :dizzy_face: :dizzy_face:

8

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.

9

Still showing the same error. :sob:

10

Try var loader = new GLTFLoader();

1 Like
11

Now it is showing the following error

Uncaught ReferenceError: GLTFLoader is not defined

12

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.