STLLoader.js 以 three.js 开头的代码示例？有没有好的干净的示例代码？

Question

我必须将 three.js 的 STLLoader.js 包含到我的 Web 应用程序中，但找不到一些关于如何开始的简洁代码示例。

关于https://threejs.org website there is only the example demonstration for the STLLoader (https://threejs.org/examples/#webgl_loader_stl) but I can't find some clean sample code for the STLLoader (except for this one: https://github.com/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.org/docs/index.html#examples/en/loaders/OBJLoader)...

请帮我解决这个问题:)

Answer 1

这就是我最后想到的... 对于所有也有问题的人:)

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 (comment 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();

当然，您需要下载 three.js 项目并将其包含到您的项目根目录中。

里昂

STLLoader.js 以 three.js 开头的代码示例？有没有好的干净的示例代码？

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

javascript

three.js

stl

loader

viewer