首页 > 其他分享 >simpread-(132 条消息) three.js 加载 stl 文件并解析_攻城狮 plus 的博客 - CSDN 博客

simpread-(132 条消息) three.js 加载 stl 文件并解析_攻城狮 plus 的博客 - CSDN 博客

时间:2022-11-18 22:48:42浏览次数:86  
标签:200 scene stl three 博客 THREE var new 加载

threejs加载STL文件

效果:

加载 stl 格式的文件需要设置材质 material;

stl、obj 都是静态模型,不可以包含动画,

fbx 除了包含几何、材质信息,可以存储骨骼动画等数据。

代码:

  1. 加载STL文件

image-20221118221614521

  1. requestAnimationFrame()

    image-20221118221731550

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta >
  <title>.stl格式模型加载</title>
  <script src="../three.js"></script>
  <script src="../OrbitControls.js"></script>
  <script src="../STLLoader.js"></script>
</head>
 
<body>
  <script>
    let N = 128;
    let analyser = null;
    // 1,创建场景
    var scene = new THREE.Scene();
    // 创建STL加载器
    var stlLoader = new THREE.STLLoader();
    stlLoader.load('./LH1223链条组装 - 短链条螺栓.STL',geometry => {
      var material = new THREE.MeshPhongMaterial({color:0xDDDADA});
      var mesh = new THREE.Mesh(geometry,material);
      scene.add(mesh);
    })
    // 3,创建灯光
    var point = new THREE.PointLight(0xffffff);
    point.position.set(200,200,200);
    scene.add(point);
    var point2 = new THREE.PointLight(0xffffff);
    point2.position.set(200,200,-200);
    scene.add(point2);
    // 4,创建相机对象
    var width = window.innerWidth;
    var height = window.innerHeight;
    var k = width / height;
    var s = 200;
    var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, -2000, 2000);
    camera.position.set(100, 100, 120);
    camera.lookAt(scene.position);
    // 5,创建渲染器
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height);
    document.body.appendChild(renderer.domElement);
 
    function render() {
      renderer.render(scene, camera);
      requestAnimationFrame(render);
    }
    var controls = new THREE.OrbitControls(camera, renderer.domElement);
    var axes = new THREE.AxesHelper(500);
    scene.add(axes);
    render();
  </script>
</body>
 
</html>

原文地址 blog.csdn.net

标签:200,scene,stl,three,博客,THREE,var,new,加载
From: https://www.cnblogs.com/zhuoss/p/16905055.html

相关文章

  • STL介绍(容器、迭代器)
    STL全名标准模版库(StandardTemplateLibrary),是一群以template为根基的C++程序库目的在提供一些基本的容器类别(containerclass)与高效的算法(algorithm)一般来说程......
  • 使用博客园初衷
    在博客园上发表一些自己觉得有意思的题或者自己的解题方法,并且希望可以认识到更多的志同道合的朋友。本人大概对基础数学更感兴趣一点,欢迎大家一起学习,一起讨论。当然,我......
  • whistle根据post请求入参不同进行代理
    1、首先保证whistle更新到最新的版本,我用的是:2.9.22 版本;如需更新,跳转:http://wproxy.org/whistle/update.html2、找到网站上的post请求:http://watchtower.jd.com/api/eve......
  • 《STL 源码剖析》 deque 实现原理
    目录deque概述deque中控器deque迭代器和数据结构deque操作原理deque随机存储deque插入deque删除deque和stack、queue的关系deque概述deque是双向开口的连续线性空间......
  • 在微信小程序上做一个「博客园年度总结」:使用redis存储数据
    前面写过一篇博客:在微信小程序上做一个「博客园年度总结」:解决前端获取接口数据太慢的一种思路当时是从博客园接口获取数据比较慢,所以从博客园拿到数据后,先把数据存到一个......
  • Ubutu下 vim 的.vimrc配置以及YourCompletedMe无法stl代码提示的解决办法
    我的vim效果预览主题颜色是desertEx有目录树,和函数显示器,以及代码提示,根据文件类型自动生成文件头下面是我的.vimrc配置!请全屏观看点击查看代码setnocompatible......
  • c++STL
    C++11常用特性的使用经验总结std::unordered_map与std::map用法基本差不多,std::map使用的数据结构为二叉树,而std::unordered_map内部是哈希表的实现方式;//std::uno......
  • 将博客园的 谷歌搜索改为 必应搜索
    1.开通js权限(联系博客园工作人员)2.在博客后台管理的页首Html代码中添加如下代码<scriptsrc="https://files.cnblogs.com/files/wintertone/js02.js"type="text/javas......
  • <原文转载> 自定义博客园博客页面标签页的icon图标
    有没有发现大多数的博客园标签右上角都是一个小矿工,千篇一律没有什么特色,想不想设置一个像我一样的个性化icon图标呢?按照以下四步你也可以实现自定义标签图标。FromTo......
  • STL 源码剖析:sort
    概览我大抵是太闲了。此文章同步发表于我的知乎。sort作为最常用的STL之一,大多数人对于其了解仅限于快速排序。听说其内部实现还包括插入排序和堆排序,于是很好奇,决......