Potrzebujesz plików .js i HTML do wyświetlania obiektów 3D .STL na stronie internetowej

Czy ktoś może wytworzyć czysty przykład "do manekinów" HTML do używania STLLoader.js do wyświetlania plików obiektów ASCII (nie binarnych) .stl na stronie internetowej? Wynik powinien pozwolić użytkownikom na manipulowanie obiektem w obecnych przeglądarkach HTML5 i bez wyobraźni wizualnej poza powierzchnią i tłem obiektu w skali szarości.Potrzebujesz plików .js i HTML do wyświetlania obiektów 3D .STL na stronie internetowej

Program STLLoader.js może potrzebować pomocy pliku three.js lub three.min.js, ale nie wiem. Plik STLLoader.js zawiera poniższy przykład użycia, ale nie zawiera opakowania HTML.

Przykład zastosowania wewnątrzSTLLoader.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'); 
    */

Źródło

2012-10-14 ForumLeech

The three.js przykłady stanowią dobre źródło:

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

Tutaj jest to uproszczona wersja:

<!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

Źródło

2012-10-15 21:07:47 WestLangley

Strona webgl_loader_stl.html kończy się niepowodzeniem w obecnych przeglądarkach Chrome i Firefox, gdy starannie replikuję pliki .js i .stl na moim serwerze internetowym. Strona była w większości czarna, a niektóre informacje znajdowały się na górze. Inne strony 3D .js w sieci działają po przeniesieniu do mojego środowiska testowego, ale nie wiem wystarczająco dużo, aby zadeklarować błąd w witrynie [webgl_loader_stl.html] (https://github.com/mrdoob/three.js/blob/master /examples/webgl_loader_stl.html). – ForumLeech

Uprościliśmy dla ciebie przykład. Nie można uzyskać o wiele prostsze niż to. Jeśli masz inne problemy, proszę napisać nowy post i podać link na żywo, jeśli to możliwe. – WestLangley

Czy można uzyskać model 'stl' renderowane w' IE (9) '?? To nie działa i otrzymuję ten błąd 'SCRIPT5009: 'DataView' jest niezdefiniowany STLLoader.js, linia 82 znaków 3 ' – Uttara

Potrzebujesz plików .js i HTML do wyświetlania obiektów 3D .STL na stronie internetowej

Odpowiedz

Powiązane problemy