Besoin .js et HTML exemple pour l'affichage .STL objets 3D dans une page web

Quelqu'un peut-il produire un propre "pour les nuls" exemple de code HTML pour l'aide STLLoader.js pour afficher le code ASCII (non binaire) .stl fichiers objet dans une page web? Le résultat doit permettre aux utilisateurs de manipuler des objets en courant les navigateurs HTML5 et sans fantaisie visuels au-delà d'une échelle de gris de surface d'objet et le fond.

STLLoader.js pourrait avoir besoin de l'aide de three.js ou three.min.js mais je ne sais pas. STLLoader.js contient ci-dessous exemple d'utilisation mais n'a pas inclus une enveloppe HTML.

Exemple d'utilisation à l'intérieur STLLoader.js

     /** 
     * Usage:
     *  var loader = new THREE.STLLoader();
     *  loader.addEventListener( 'load', function ( event ) {
     *
     *      var geometry = event.content;
     *      scene.add( new THREE.Mesh( geometry ) );
     *
     *  } );
     *  loader.load( './models/stl/slotted_disk.stl' );
     */

OriginalL'auteur ForumLeech | 2012-10-14

  1. 10

    L'three.js des exemples sont une bonne source:

    https://github.com/mrdoob/three.js/blob/master/examples/webgl_loader_stl.html

    Ici est une version simplifiée:

    <!DOCTYPE html>
<html lang="en">
    <head>
        <title>three.js webgl - STL</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <style>
            body {
                font-family: Monospace;
                background-color: #000000;
                margin: 0px;
                overflow: hidden;
            }

            #info {
                color: #fff;
                position: absolute;
                top: 10px;
                width: 100%;
                text-align: center;
                z-index: 100;
                display:block;

            }

            a { color: skyblue }
        </style>
    </head>
    <body>
        <div id="info">
            STL loader test
        </div>

        <script src="http://threejs.org/build/three.min.js"></script>

        <script src="http://threejs.org/examples/js/loaders/STLLoader.js"></script>

        <script>

            var container, camera, scene, renderer;

            init();
            animate();

            function init() {

                container = document.createElement( 'div' );
                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

                //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( 'slotted_disk.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 ) * 5;
                camera.position.z = Math.sin( timer ) * 5;

                camera.lookAt( scene.position );

                renderer.render( scene, camera );

            }

        </script>
    </body>
</html>

    three.js r.70

    Que webgl_loader_stl.html page n'est pas au courant de Chrome et de Firefox quand j'ai soigneusement répliquer .js et .stl fichiers sur mon serveur web. La Page était principalement noir avec un peu d'info au top. Autres 3D .js pages sur le web quand elles sont transplantées dans mon environnement de test, mais je ne sais pas assez pour déclarer un bug dans l' webgl_loader_stl.html.
    J'ai simplifié l'exemple pour vous. Vous ne pouvez pas obtenir beaucoup plus simple que cela. Si vous avez d'autres questions, merci de faire un nouveau poste et de fournir un lien direct si possible.
    Est-il possible d'obtenir le stl modèle rendus dans IE(9)?? Il n'est pas de travail et m d'erreur SCRIPT5009: 'DataView' is undefined STLLoader.js, line 82 character 3
    Vous avez besoin de faire un nouveau post.
    mise à jour de three.js r.70

    OriginalL'auteur WestLangley