zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    Python Day 29 socket、scoket套接字分类、基于TCP的socket、常见错误
    Python Day 28 网络编程、OSI七层模型、三次握手和四次挥手
    Python Day 27 元类、__inti__方法、__new__方法、__call__方法、单例模式、exec与eval区别、异常处理语法
    get,post区别
    Restful API
    tcp 3次握手四次挥手
    mongodb数据库常用操作的整理
    python装饰器
    python中的*args和** kwargs区别
    Vue插件
  • 原文地址:https://www.cnblogs.com/guxingy/p/11906243.html
Copyright © 2011-2022 走看看