需要.js和HTML的例子，用於在網頁中顯示.STL 3D對象

任何人都可以產生一個乾淨的「傻瓜」的HTML例子，用STLLoader.js在網頁中顯示ASCII（非二進制）.stl目標文件？結果應該讓用戶在當前的HTML5瀏覽器中操作對象，並且不會在灰度對象表面和背景之外使用花哨的視覺效果。需要.js和HTML的例子，用於在網頁中顯示.STL 3D對象

STLLoader.js可能需要three.js或three.min.js的幫助，但我不知道。 STLLoader.js包含下面的用法示例，但不包含HTML包裝器。

使用例的內部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'); 
    */

來源

2012-10-14 ForumLeech

的three.js所例子是一個很好的來源：

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

下面是一個簡化的版本：

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

來源

2012-10-15 21:07:47 WestLangley

當我仔細地將其.js和.stl文件複製到我的Web服務器上時，webgl_loader_stl.html頁面在當前的Chrome和Firefox中失敗。頁面大多是黑色的，頂部有一些信息。當移植到我的測試環境中時，Web上的其他3D .js頁面可以工作，但我不知道足以在[webgl_loader_stl.html]（https://github.com/mrdoob/three.js/blob/master）中聲明一個小故障/examples/webgl_loader_stl.html）。 – ForumLeech

我簡化了你的例子。你不能比這更簡單。如果您有其他問題，請發佈新帖子，並儘可能提供實時鏈接。 – WestLangley

是否有可能獲得'IE（9）'呈現的'stl'模型？它不工作，並得到這個錯誤'SCRIPT5009：'DataView'是未定義的 STLLoader.js，第82行字符3 ' – Uttara

需要.js和HTML的例子，用於在網頁中顯示.STL 3D對象

回答

相關問題