• three.js 加载STL文件


    注意:
      TrackballControls.js 和 TDSLoader.js 都引用了 three.module.js,特别注意引用的路径

    比如:

    直接代码咯

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>three.js webgl - loaders - 3DS loader</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <link type="text/css" rel="stylesheet" href="/three.js/main.css">
    </head>
    
    <body>
        <div id="info">
            <a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - 3DS loader
        </div>
    
    
        <script type="module">
    
    
            //注意:
            //TrackballControls.js 和 TDSLoader.js 都引用了 three.module.js,特别注意引用的路径
    
    
            import * as THREE from '/three.js/build/three.module.js';
            import { TrackballControls } from '/three.js/jsm/controls/TrackballControls.js';
            import { STLLoader } from '/three.js/jsm/loaders/STLLoader.js';
    
    
    
            var container, controls;
            var camera, scene, renderer;
            init();
            animate();
    
    
            function resize() {
                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();
                renderer.setSize(window.innerWidth, window.innerHeight);
            }
    
            function animate() {
                controls.update();
                renderer.render(scene, camera);
                requestAnimationFrame(animate);
            }
    
            function init() {
                container = document.createElement('div');
                document.body.appendChild(container);
                camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 10);
                camera.position.z = 2;
                scene = new THREE.Scene();
                scene.add(new THREE.HemisphereLight());
                var directionalLight = new THREE.DirectionalLight(0xffeedd);
                directionalLight.position.set(0, 0, 2);
                scene.add(directionalLight);
    
    
                // ASCII file
                var loader = new STLLoader();
                loader.load('/model1/面.stl', function (geometry) {
                    var mat = new THREE.MeshLambertMaterial({ color: 'red' });//{ color: 0x00ffff }
                    var mesh = new THREE.Mesh(geometry, mat);
                    mesh.rotation.x = -0.5 * Math.PI; //将模型摆正
                    mesh.scale.set(0.1, 0.1, 0.1); //缩放
                    geometry.center(); //居中显示
                    scene.add(mesh);
                });
    
                
                renderer = new THREE.WebGLRenderer();
                renderer.setPixelRatio(window.devicePixelRatio);
                renderer.setSize(window.innerWidth, window.innerHeight);
                container.appendChild(renderer.domElement);
                controls = new TrackballControls(camera, renderer.domElement);
                window.addEventListener('resize', resize, false);
            }
    
        </script>
    
    </body>
    </html>
  • 相关阅读:
    JAVA 解压压缩包中指定文件或实现压缩文件的预览及下载单个或多个指定的文件
    java 解压zip java.lang.IllegalArgumentException: MALFORMED 错误
    Java文件管理系统
    Java实现用汉明距离进行图片相似度检测的
    url 编码(percentcode 百分号编码)
    nodejs进程管理
    nodejs网络编程
    nodejs内存溢出 FATAL ERROR: CALL_AND_RETRY_0 Allocation failed – process out of memory
    connect ECONNREFUSED 127.0.0.1:80错误解决
    nuxtjs如何在单独的js文件中引入store和router
  • 原文地址:https://www.cnblogs.com/guxingy/p/11906243.html
Copyright © 2020-2023  润新知