WebGL学习

最新推荐文章于 2024-06-16 15:12:14 发布

jxjaqian

最新推荐文章于 2024-06-16 15:12:14 发布

阅读量734

点赞数

分类专栏： webgl 文章标签： webgl three.js STLLoader.js

本文链接：https://blog.csdn.net/jxjaqian/article/details/81938891

版权

webgl 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

WebGL学习（二）

依照需求，需要用webgl实现加载stl文件，只好用表情形容此刻心情

首先，stl文件哪里来？？于是去搜了一波，打印虎里有一些模型，不过不是很好看（俗话说颜值即正义），先凑合用好了。后面，忘记是在哪搜罗到一个外国网站thingiverse，里面都是一些别人分享的免费stl文件，应有尽有。
第一个问题解决了，那么，问题又来了怎么加载stl文件，这怎么下手？没人告诉我nei，于是又各种找啊找，发现一个叫STLLoader.js的玩意儿，这名字看着就很像正经加载stl的，没错，就是它了。

加载STL文件

var loader = new THREE.STLLoader();
loader.load('bengbb.stl', function (geometry) {
    var material = new THREE.MeshPhongMaterial({ color: 0x8888ff });
    var mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);
});

选了个苯环宝宝，刚开始加载成功了只能见到一小部分，各种调整相机的角度才见到全貌。

贴上完整代码

<!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;
        }
    </style>
</head>
<body>

    <script src="js/three.js"></script>

    <script src="js/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

            var fov = 80,//拍摄距离  视野角值越大，场景中的物体越小
                near = 1,//最小范围
                far = 10000;//最大范围

            camera = new THREE.PerspectiveCamera(fov, window.innerWidth / window.innerHeight, near, far);

            camera.position.set(-100, 100, 300);

            scene.add(camera);

            // lights

            scene.add(new THREE.AmbientLight(0x222222));

            var light = new THREE.PointLight(0xffffff, 1);
            camera.add(light);

            // object

            var loader = new THREE.STLLoader();
            loader.load('bengbb.stl', function (geometry) {

                var material = new THREE.MeshPhongMaterial({ color: 0x8888ff });

                var mesh = new THREE.Mesh(geometry, material);

                scene.add(mesh);

            });

        }

        function animate() {

            requestAnimationFrame(animate);

            render();

        }

        function render() {

            renderer.render(scene, camera);

        }

    </script>


</body>
</html>

jxjaqian

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WebGL学习

WebGL学习（二）依照需求，需要用webgl实现加载stl文件，只好用表情形容此刻心情首先，stl文件哪里来？？于是去搜了一波，打印虎里有一些模型，不过不是很好看（俗话说颜值即正义），先凑合用好了。后面，忘记是在哪搜罗到一个外国网站thingiverse，里面都是一些别人分享的免费stl文件，应有尽有。第一个问题解决了，那么，问题又来了怎么加载stl文件，这怎么下手？没人告诉我n...
复制链接

扫一扫