使用threeJS在单个网页上的多个STL文件答案

【问题标题】：Multiple STL files on single web page using threeJS使用threeJS在单个网页上的多个STL文件
【发布时间】：2018-07-23 23:40:53
【问题描述】：

这里我有一个 STL 文件，我用threeJS 显示。我不知道如何在单个网页中呈现多个 STL 文件。这是我的代码：

var container, camera, scene, renderer;

init();
animate();

function init() {

    container = document.getElementById('pratik');
    document.body.appendChild( container );

    // renderer
    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setSize( window.innerWidth, window.innerHeight );
    container.appendChild( renderer.domElement );

    // scene
    scene = new THREE.Scene();

    // camera
    camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.set( 3, 0.5, 3 );
    scene.add( camera ); // required, because we are adding a light as a child of the camera

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

    // lights
    scene.add( new THREE.AmbientLight( 0x222222 ) );

    var light = new THREE.PointLight( 0xffffff, 0.8 );
    camera.add( light );

    // object

    var loader = new THREE.STLLoader();
    loader.load( 'files/wolf.stl', function ( geometry ) {

        var material = new THREE.MeshPhongMaterial( { color: 0xff5533 } );

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

        scene.add( mesh );

    } );

    window.addEventListener( 'resize', onWindowResize, false );

}

function onWindowResize() {

    camera.aspect = window.innerWidth / window.innerHeight;

    camera.updateProjectionMatrix();

    renderer.setSize( window.innerWidth, window.innerHeight );

}

function animate() {

    requestAnimationFrame( animate );

    render();

}

function render() {

    var timer = Date.now() * 0.0005;

    camera.position.x = Math.cos( timer ) * 15;
    camera.position.z = Math.sin( timer ) * 15;

    camera.lookAt( scene.position );

    renderer.render( scene, camera );

}

&lt;div id="pratik"&gt;&lt;/div&gt;

现在如果我需要包含另一个名为“mk6.stl”的文件，我该怎么做？有谁知道该怎么做？我试过 SketchFan，但它不是为我制作的。谢谢。

【问题讨论】：

标签： javascript three.js stl-format

【解决方案1】：

您已经拥有加载单个 STL 文件并将其插入场景的代码。加载多个文件的下一步很简单，您只需重用您的 STLLoader 实例。基本上你可以这样做：

var loader = new THREE.STLLoader();
loader.load( 'FIRSTFILE.stl', function ( geometry ) {
    var material = new THREE.MeshPhongMaterial( { color: 0xff5533 } );
    var mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );
} );

loader.load( 'SECONDFILE.stl', function ( geometry ) {
    var material = new THREE.MeshPhongMaterial( { color: 0xff5533 } );
    var mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );
} );

如果你有一个 URL 数组来加载你的 STL 文件，你也可以在循环中使用加载器 load() 方法。

【讨论】：