Export from Blender to three.js

Questions
1

Made a 3D project of the area and want to upload it to the site. Make something like an interactive map. When loading the model in threejs transferred only the model, without textures, shadows, and everything else, please tell me what I did wrong.

HTML

			<div id="container"></div>

			<script src="js/three.min.js"></script>
			<script src="js/loaders/JSONLoader.js"></script>
			<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
			<script src="js/libs/MapControls.js"></script>
			<script src="js/mainscene.js"></script>

JS

var scene, camera, renderer;
        var controls;
        var SCREEN_WIDTH, SCREEN_HEIGHT;
        var loader, model;
        var group = new THREE.Object3D();
        var mscale = 10;

        var manager = new THREE.LoadingManager();


        manager.onLoad = function () {
        scene.add(group);
        }

        var loader = new THREE.JSONLoader(manager);

        function init() {
        scene = new THREE.Scene();
        camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, .1, 5000);
        renderer = new THREE.WebGLRenderer({
            antialias: true,
            alpha: true
        });
        renderer.setClearColor( 0x000000, 0 ); // the default
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);



        controls = new THREE.MapControls( camera, renderer.domElement );
        controls.enableDamping = true; // an animation loop is required when either damping or auto-rotation are enabled
        controls.dampingFactor = 1;
        controls.screenSpacePanning = false;
        controls.minDistance = 15;
        controls.maxDistance = 80;
        controls.maxPolarAngle = Math.PI / 2;



        camera.position.x = 0;
        camera.position.y = 35;
        camera.position.z = 35;
        camera.lookAt(scene.position);




        h1 = new THREE.HemisphereLight(0xffffff, 0xffffff, 0.3);
        h1.position.set(-300,200, -3000);
        scene.add(h1);

        var s1 = new THREE.SpotLight(0xffffff);
        s1.position.set(300, 300, -1000);
        scene.add(s1);

        var s2 = new THREE.SpotLight(0xffffff);
        s2.position.set(-300, 300, 1000);
        scene.add(s2);



        loader.load(
            'json/grass.json',
            function ( geometry, materials ) {
                var material = new THREE.MultiMaterial( materials );
                var object = new THREE.Mesh( geometry, material );
                object.scale.set(mscale, mscale, mscale);
                object.position.set(0, 0, 0);
                group.add( object );
            }
        );
        loader.load(
            'json/road.json',
            function ( geometry, materials ) {
                var material = new THREE.MultiMaterial( materials );
                var object = new THREE.Mesh( geometry, material );
                object.scale.set(mscale, mscale, mscale);
                object.position.set(0, 0, 0);
                group.add( object );
            }
        );
        loader.load(
            'json/square.json',
            function ( geometry, materials ) {
                var material = new THREE.MultiMaterial( materials );
                var object = new THREE.Mesh( geometry, material );
                object.scale.set(mscale, mscale, mscale);
                object.position.set(0, 0, 0);
                group.add( object );
            }
        );
        loader.load(
            'json/still.json',
            function ( geometry, materials ) {
                var material = new THREE.MultiMaterial( materials );
                var object = new THREE.Mesh( geometry, material );
                object.scale.set(mscale, mscale, mscale);
                object.position.set(0, 0, 0);
                group.add( object );
            }
        );
        loader.load(
            'json/tree.json',
            function ( geometry, materials ) {
                var material = new THREE.MultiMaterial( materials );
                var object = new THREE.Mesh( geometry, material );
                object.scale.set(mscale, mscale, mscale);
                object.position.set(0, 0, 0);
                group.add( object );
            }
        );
        loader.load(
            'json/less.json',
            function ( geometry, materials ) {
                var material = new THREE.MultiMaterial( materials );
                var object = new THREE.Mesh( geometry, material );
                object.scale.set(mscale, mscale, mscale);
                object.position.set(0, 0, 0);
                group.add( object );
            }
        );
        loader.load(
            'json/light.json',
            function ( geometry, materials ) {
                var material = new THREE.MultiMaterial( materials );
                var object = new THREE.Mesh( geometry, material );
                object.scale.set(mscale, mscale, mscale);
                object.position.set(0, 0, 0);
                group.add( object );
            }
        );
        loader.load(
            'json/dark.json',
            function ( geometry, materials ) {
                var material = new THREE.MultiMaterial( materials );
                var object = new THREE.Mesh( geometry, material );
                object.scale.set(mscale, mscale, mscale);
                object.position.set(0, 0, 0);
                group.add( object );
            }
        );
        loader.load(
            'json/game.json',
            function ( geometry, materials ) {
                var material = new THREE.MultiMaterial( materials );
                var object = new THREE.Mesh( geometry, material );
                object.scale.set(mscale, mscale, mscale);
                object.position.set(0, 0, 0);
                group.add( object );
            }
        );

        $("#container").append(renderer.domElement);
        }

        function render() {
        group.rotation.y += 0.000001;
        }

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

        $(window).resize(function () {
        SCREEN_WIDTH = window.innerWidth;
        SCREEN_HEIGHT = window.innerHeight;
        camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
        camera.updateProjectionMatrix();
        renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
        });
2

It looks like you are using the deprecated JSON Blender exporter. This utility was removed quite a while ago so it’s better to switch to alternatives. The project’s recommendation is a glTF based workflow. You will find all relevant information in the following nice guide:

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

You will find there a glTF exporter for Blender and also the respective GLTFLoader.

BTW: JSONLoader is deprecated and should not be used anymore.

1 Like
3

Could you show me please some example with the connection of the exported file format glTF, so I looked at the whole structure from the inside?

4

Is this example what you’re looking for? https://threejs.org/examples/?q=gltf#webgl_loader_gltf

1 Like
5

Yes, but when I load a colorless model, please tell me there are some lessons where it is shown to create a model from the beginning and before exporting it to threejs in gltf format

6

Sure, search for “Blender” and “glTF” and you’ll find a number of results. Here’s one:

If you’re new to blender and don’t know how to create a model, you may want to start with general Blender tutorials first.

1 Like