0

在这里，我有一个使用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，但它不是为我制作的。谢谢你。

4

1 回答 1

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 );
} );

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

于 2018-07-23T15:40:53.563 回答