Importing Blender obj file with mtl to ThreeJS

Question

I am trying to import an object file that I created in Blender to ThreeJS. My Blender project looks like this: image

I exported it into a waveform, for importing into ThreeJS I used MTLLoader and OBJLoader, here is my code:

<script>
            var container;
            var camera, controls, scene, renderer, dragControls;
            var lighting, ambient, keyLight, fillLight, backLight;
            var windowHalfX = window.innerWidth / 2;
            var windowHalfY = window.innerHeight / 2;

            var keyboard = {};
            var floor;

            var objects = [];
            var meshes = [];

            var cameraParams = {speed: 0.1, turnSpeed: Math.PI * 0.5};

            var raycaster = new THREE.Raycaster();
            var mouse = new THREE.Vector2(1, 1), INTERSECTED;

            init();
            animate();

            function init() {
                container = document.createElement('div');
                document.body.appendChild(container);

                camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000);
                camera.position.set(0, 7, 25);

                scene = new THREE.Scene();
                ambient = new THREE.AmbientLight(0xffffff, 1.0);
                scene.add(ambient);

                keyLight = new THREE.DirectionalLight(new THREE.Color('hsl(30, 100%, 75%)'), 1.0);
                keyLight.position.set(-100, 0, 100);

                fillLight = new THREE.DirectionalLight(new THREE.Color('hsl(240, 100%, 75%)'), 0.75);
                fillLight.position.set(100, 0, 100);

                backLight = new THREE.DirectionalLight(0xffffff, 1.0);
                backLight.position.set(100, 0, -100).normalize();

                scene.add(keyLight);
                scene.add(fillLight);
                scene.add(backLight);

                // load model

                loadMesh('road', function(obj){
                    obj.position.y = 0;
                    obj.scale.x = 1;
                    obj.scale.y = 1;
                    obj.scale.z = 1;
                    addMesh(obj);
                });

                renderer = new THREE.WebGLRenderer();
                renderer.setPixelRatio(window.devicePixelRatio);
                renderer.setSize(window.innerWidth, window.innerHeight);
                renderer.setClearColor(new THREE.Color('hsl(0, 0%, 10%)'));

                container.appendChild(renderer.domElement);


                controls = new THREE.OrbitControls(camera, renderer.domElement);
                controls.enableDamping = true;
                controls.dampingFactor = 0.25;
                controls.enableZoom = false;

                dragControls = new THREE.DragControls(objects, camera, renderer.domElement);
                dragControls.addEventListener('dragstart', function (event) {
                    event.object.material.emissive.set(0xaaaaaa);
                    controls.enabled = false;
                });

                dragControls.addEventListener('dragend', function (event) {
                    event.object.material.emissive.set(0x000000);
                    controls.enabled = true;
                });

                window.addEventListener('resize', onWindowResize, false);
                window.addEventListener('keydown', keyDownEvent, false);
                window.addEventListener('keyup', keyUpEvent, false);
                window.addEventListener('mousemove', onMouseMove, false);
            }

            function addMesh(mesh) {
                meshes.push(mesh);
                scene.add(mesh);
            }

            function loadMesh(name, callback) {
                var objLoader = new THREE.OBJLoader();
                var matLoader = new THREE.MTLLoader();
                matLoader.setPath('assets/');
                matLoader.load('ROAD2.mtl', function(materials) {
                    materials.preload();
                    objLoader.setMaterials(materials);
                    objLoader.setPath('assets/');
                    objLoader.load('ROAD2.obj', function (obj) {
                        callback(obj);
                    });
                });
            }

            function onWindowResize() {
                camera.aspect = window.innerWidth/window.innerHeight;
                camera.updateProjectionMatrix();

                renderer.setSize(window.innerWidth, window.innerHeight);
            }

            function keyDownEvent(event) {
                keyboard[event.keyCode] = true;
            }

            function keyUpEvent(event) {
                keyboard[event.keyCode] = false;
            }

            function onMouseMove(event) {
                event.preventDefault();

                mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
                mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
            }

            function animate() {
                requestAnimationFrame(animate);

                if (keyboard[37]) { // left arrow key
                    camera.rotation.y += cameraParams.turnSpeed;
                }

                if (keyboard[39]) { // right arrow key
                    camera.rotation.y -= cameraParams.turnSpeed;
                }

                controls.update();
                render();
            }

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

        </script>

My Blender scene rarely loads in my browser, when it does, it is without any textures. Most of the time my tab crashes before anything is able to load in because is eats up all my RAM (using Firefox and http-server to load the html). I am out of ideas about what the problem is, haven't been able to find anything on Google, most of the examples were of one object with materials and textures. My file hierarchy looks like this in case it is important:

index.html
js/
   DragControls1.js
   MTLLoader.js
   OBJLoader.js
   OrbitControls.js
   three.js
assets/
   ROAD2.mtl
   ROAD2.obj
   cottage_textures.png
   road_texture.png

Any help would be appreciated.

Ruben Nunez Ruben Nunez · Accepted Answer · 2020-01-18T19:14:28

It seems that your scene has about 7'000'000 vertices, which is not a little but a little too much.
In Blender, try to do the export in several smaller objects. For example each one separately, the street, a tree, one of the houses, etc. With this method, you can approach the limit of your scene.

Also, try to duplicate multiple objects in your scene in the code instead of doing it in Blender!

(In realtime 3D applications you should always try to use optimal 3D models (geometry, topology) and not oversized models with several million vertices)

Importing Blender obj file with mtl to ThreeJS

1 Answers