使用threeJS

Question

在这里，我有一个与ThreeJS一起显示的STL文件。我不知道如何在单个网页中呈现多个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 );

}

<div id="pratik"></div>

现在，如果我需要包含另一个名为“ mk6.stl”的文件，该怎么办？ 有谁知道该怎么做？ 我已经尝试过SketchFan，但它并非适合我。 谢谢。

Answer 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()方法。