admin管理员组

文章数量:1415145

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:)

  • javascript
  • three.js
  • stl
Share Improve this question edited Jan 25, 2023 at 19:39 leonnicklas asked Jul 22, 2019 at 13:59 leonnicklasleonnicklas 4631 gold badge6 silver badges23 bronze badges 4
  • 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

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 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745208746a2647763.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。