Cần .js và HTML ví dụ để hiển thị các đối tượng 3D .STL trong một trang web

Ai đó có thể tạo ra một ví dụ "cho núm vú" sạch cho việc sử dụng STLLoader.js để hiển thị các tệp đối tượng .stl ASCII (không phải nhị phân) trong một trang web? Kết quả sẽ cho phép người dùng thao tác đối tượng trong các trình duyệt HTML5 hiện tại và không có hình ảnh lạ mắt nào ngoài bề mặt và nền đối tượng màu xám.Cần .js và HTML ví dụ để hiển thị các đối tượng 3D .STL trong một trang web

STLLoader.js có thể cần sự trợ giúp của ba.js hoặc three.min.js nhưng tôi không biết. STLLoader.js chứa dưới đây ví dụ sử dụng nhưng không bao gồm một trình bao bọc HTML.

dụ Cách sử dụng bên trongSTLLoader.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'); 
    */

Nguồn

2012-10-14 ForumLeech

Các three.js ví dụ là một nguồn tốt:

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

Đây là một phiên bản đơn giản:

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

Nguồn

2012-10-15 21:07:47 WestLangley

Trang webgl_loader_stl.html không thành công trong Chrome và Firefox hiện tại khi tôi sao chép cẩn thận các tệp .js và .stl của nó lên máy chủ web của tôi. Trang chủ yếu là màu đen với một số thông tin ở trên cùng. Các trang .js 3D khác trên web hoạt động khi được cấy vào môi trường thử nghiệm của tôi nhưng tôi không biết đủ để khai báo sự cố trong [webgl_loader_stl.html] (https://github.com/mrdoob/three.js/blob/master /examples/webgl_loader_stl.html). – ForumLeech

Tôi đã đơn giản hóa ví dụ cho bạn. Bạn không thể đơn giản hơn thế nhiều. Nếu bạn gặp sự cố khác, vui lòng tạo một bài đăng mới và cung cấp liên kết trực tiếp nếu có thể. – WestLangley

Có thể lấy mô hình 'stl' được hiển thị trong' IE (9) 'không? Nó không hoạt động và m nhận được lỗi này 'SCRIPT5009: 'DataView' là không xác định STLLoader.js, dòng 82 ký tự 3 ' – Uttara

Cần .js và HTML ví dụ để hiển thị các đối tượng 3D .STL trong một trang web

Trả lời

Các vấn đề liên quan