javascript - STLLoader.js code example for starting with three.js? Is there any good clean sample code?

I have to include the STLLoader.js of three.js into my web application but can't find some good clean code examples on how to start.

On the website there is only the example demonstration for the STLLoader () but I can't find some clean sample code for the STLLoader (except for this one: .js/blob/master/examples/webgl_loader_stl.html which is still quite difficult to understand for beginners), like there is for some other Loaders e.g. the OBJLoader (.html#examples/en/loaders/OBJLoader)...

Please help me out with this:)

I have to include the STLLoader.js of three.js into my web application but can't find some good clean code examples on how to start.

On the https://threejs website there is only the example demonstration for the STLLoader (https://threejs/examples/#webgl_loader_stl) but I can't find some clean sample code for the STLLoader (except for this one: https://github./mrdoob/three.js/blob/master/examples/webgl_loader_stl.html which is still quite difficult to understand for beginners), like there is for some other Loaders e.g. the OBJLoader (https://threejs/docs/index.html#examples/en/loaders/OBJLoader)...

Please help me out with this:)

Share Improve this question edited Jan 25, 2023 at 19:39 asked Jul 22, 2019 at 13:59 leonnicklas 4631 gold badge6 silver badges23 bronze badges

1 TBH, the example webgl_loader_stl should sufficiently demonstrate how you use the class in your code. What's unclear about that? – Mugen87 Commented Jul 22, 2019 at 14:13
I now found the code you said, but there is so much stuff in it that it is very unclear which part of the code is essentially necessary and which isn't! For every other Loader there is a very clear documentation on the side, but not for STLLoaders:) – leonnicklas Commented Jul 23, 2019 at 8:03
Sorry, but there is not much to document. Create an instance of STLLoader, call the load() by passing in the URL to your STL asset and an onLoad() callback handler. Then create a mesh with the resulting geometry and add it to the scene. Basically the same process like in all other loaders. BTW: It's not correct to say that there is a documentation for every other loader. In fact, most loaders don't have one. – Mugen87 Commented Jul 23, 2019 at 10:10
I'm sorry but I'm not a professional yet. I thought it is more difficult than that! I have now figured it out by myself and it is working just fine. Sorry for bothering you! And with the other Loaders, you are right! I made a mistake. SRY – leonnicklas Commented Jul 23, 2019 at 10:55

Add a ment |

1 Answer 1

Sorted by: Reset to default 4

That is what i came up with at the end... For all those who had problems figuring it out too:)

HTML:

<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <title>STLLoader Test</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <script src="three.js-master/build/three.js"></script>
        <script src="three.js-master/examples/jsm/controls/OrbitControls.js"></script>
        <script src="three.js-master/examples/jsm/loaders/STLLoader.js"></script>
        <script src="js/custom.js"></script>
    </body>
</html>

JS (custom.js):

// Necessary for camera/plane rotation
var degree = Math.PI/180;

// Setup
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();

renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Resize after viewport-size-change
window.addEventListener("resize", function () {
    var height = window.innerHeight;
    var width = window.innerWidth;
    renderer.setSize(width, height);
    camera.aspect = width / height;
    camera.updateProjectionMatrix();
});

// Adding controls
controls = new THREE.OrbitControls(camera, renderer.domElement);

// Ground (ment out line: "scene.add( plane );" if Ground is not needed...)
var plane = new THREE.Mesh(
    new THREE.PlaneBufferGeometry(500, 500 ),
    new THREE.MeshPhongMaterial( { color: 0x999999, specular: 0x101010 } )
);
plane.rotation.x = -90 * degree;
plane.position.y = 0;
scene.add( plane );
plane.receiveShadow = true;

// ASCII file - STL Import
var loader = new THREE.STLLoader();
loader.load( './stl/1.stl', function ( geometry ) {
    var material = new THREE.MeshLambertMaterial( { color: 0xFFFFFF, specular: 0x111111, shininess: 200 } );
    var mesh = new THREE.Mesh( geometry, material );
    mesh.position.set( 0, 0, 0);
    scene.add( mesh );
} );

// Binary files - STL Import
loader.load( './stl/2.stl', function ( geometry ) {
    var material = new THREE.MeshLambertMaterial( { color: 0xFFFFFF, specular: 0x111111, shininess: 200 } );
    var mesh = new THREE.Mesh( geometry, material );
    mesh.position.set( 0, 20, 0);
    scene.add( mesh );
} );

// Camera positioning
camera.position.z = 100;
camera.position.y = 100;
camera.rotation.x = -45 * degree;

// Ambient light (necessary for Phong/Lambert-materials, not for Basic)
var ambientLight = new THREE.AmbientLight(0xffffff, 1);
scene.add(ambientLight);

// Draw scene
var render = function () {
    renderer.render(scene, camera);
};

// Run game loop (render,repeat)
var GameLoop = function () {
    requestAnimationFrame(GameLoop);

    render();
};

GameLoop();

And of course you need to download the three.js project and include it into your project root.

Leon

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - STLLoader.js code example for starting with three.js? Is there any good clean sample code? - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)