Help to load stl file

loaders

#1

Hello, I’m trying to upload a file. Stl but I’m not succeeding, it just does not appear on the screen, how do I solve it?

This is my code :

<script>
        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera( 50, window.innerWidth/window.innerHeight, 1, 1000 );

        var renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );
        document.body.appendChild( renderer.domElement );

        controls = new THREE.OrbitControls(camera, renderer.domElement);
            controls.center =  new THREE.Vector3(
            );

        // var geometry = new THREE.BoxGeometry( 3, 1, 1 );
        // var material = new THREE.MeshBasicMaterial( { color: 'skyblue' } );
        // var cube = new THREE.Mesh( geometry, material );
        // scene.add( cube );

        var loader = new THREE.STLLoader();
            loader.load( 'js/novo/undefined.stl', function ( geometry ) {

                var material = new THREE.MeshPhongMaterial( { color: 'skyblue' } );

                var mesh = new THREE.Mesh( geometry, material );
                console.log( mesh);

                scene.add( mesh );

            } );


        camera.position.z = 5;

        var animate = function () {
            requestAnimationFrame( animate );


            renderer.render(scene, camera);
        };

        animate();
    </script>

#2

Edit: I thought maybe no lighting might have been your problem… guess you don’t technically need lights…


#3

I already managed to solve, I changed my loader to var loader = new THREE.STLLoader ();
Loader.load (‘js / new / undefined.stl’, function (geometry) {

                Var material = new THREE.TextureLoader (). Load ("js / new / back2.jpg");
                Var mesh = new THREE.Mesh (geometry);
                Mesh.scale.set (0.1, 0.1, 0.1);
                // mesh.rotation.set (- Math.PI / 2, Math.PI / 2, 0);
                // mesh.scale.set (0.3, 0.3, 0.3);
                // mesh.receiveShadow = true;
                Scene.add (mesh);
            });

I managed to solve without needing a light


#4

Good. Phong material looks horrible without lights, though. :slight_smile: