注意:
  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>

three.js 加载STL文件的更多相关文章

  1. 通过JS加载XML文件,跨浏览器兼容

    引言 通过JS加载XML文件,跨多种浏览器兼容. 在Chrome中,没有load方法,需要特殊处理! 解决方案 部分代码 try //Internet Explorer { xmlDoc=new Ac ...

  2. .net使用pdfobject.js加载pdf文件

    1.下载pdfobject.js文件 2. <script type="text/javascript" src="<%= Application[" ...

  3. js加载XML文件

    // XML文件 <?xml version="1.0" encoding="gb2312"?> <root> <father n ...

  4. js 加载 xml 及遍历属性及内容 整理

    本文旨在: js加载xml文件并读取节点信息 1 加载xml文件 var xmlDoc = loadXMLDoc("negativeData.xml"); function loa ...

  5. 使用js加载器动态加载外部Javascript文件

    原文:http://www.cnblogs.com/xdp-gacl/p/3927417.html 今天在网上找到了一个可以动态加载js文件的js加载器,具体代码如下: JsLoader.js var ...

  6. js便签笔记(8)——js加载XML字符串或文件

    1. 加载XML文件 方法1:ajax方式.代码如下: var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObje ...

  7. JavaScript学习总结(十九)——使用js加载器动态加载外部Javascript文件

    今天在网上找到了一个可以动态加载js文件的js加载器,具体代码如下: JsLoader.js 1 var MiniSite=new Object(); 2 /** 3 * 判断浏览器 4 */ 5 M ...

  8. JS加载&解析XML文件,浏览器兼容

    #  JS加载XML,浏览器之间有差异,代码如下 this.createXMLDom = function() { var xmldoc; var xmlFile = "XXXXXXXXX. ...

  9. c#两种方式调用google地球,调用COM API以及调用GEPLUGIN 与js交互,加载kml文件,dae文件。将二维高德地图覆盖到到三维谷歌地球表面。

    网络上资源很多不全面,自己在开发的时候走了不少弯路,在这里整理了最全面的google全套开发,COM交互,web端交互.封装好了各种模块功能. 直接就可以调用. 第一种方式:调用COMAPI实现调用g ...

随机推荐

  1. SpringBoot第八篇:整合MyBatis-Generator

    作者:追梦1819 原文:https://www.cnblogs.com/yanfei1819/p/10894278.html 版权声明:本文为博主原创文章,转载请附上博文链接! 注意:本章有大量代码 ...

  2. talk about string,char

    [1].关于sprintf和snprintf的正确使用 考虑以下有缺陷的例子:void f(const char *p){ char buf[11]={0}; sprintf(buf,"%1 ...

  3. 在linux上安装taiga

    # taiga 安装配置 1.简介 本文档介绍了如何部署完整的Taiga服务(每个模块都是Taiga平台的一部分). Taiga平台由三个主要组件组成,每个组件在编译时和运行时都有自己的依赖关系: t ...

  4. 详解XOR(异或)运算加密

    逻辑运算之中,除了 AND 和 OR,还有一种 XOR 运算,中文称为"异或运算".它的定义是:两个值相同时,返回false,否则返回true.也就是说,XOR可以用来判断两个值是 ...

  5. SpringCloud 别人的主页

    https://www.cnblogs.com/xuwujing/ java(28) springBoot(14) 设计模式(14) springcloud(7) hadoop(7) hive(5) ...

  6. C# 通过反射获取winform上的控件

    比如获取Button按钮: System.Reflection.FieldInfo[] fieldInfo = form.GetType().GetFields(System.Reflection.B ...

  7. SQL Date 时间类型处理

    SQL 日期(Dates)   2019-10-17 22:17:26 当我们处理日期时,最难的任务恐怕是确保插入的日期的格式,与数据库中日期列的格式相匹配. 保存的如果是日期部分,查询不会有太大问题 ...

  8. Markdown温故知新(0):导航目录

    Markdown温故知新(0):导航目录 Markdown温故知新(1):Markdown面面观 Markdown温故知新(2):详解七大标准语法 Markdown温故知新(3):六个实用扩展语法 M ...

  9. W3C推进SVG规范Ver1.1(中文译稿)—Part I

    转自:http://www.gispark.com/html/GISarticle/2006/1215/826.html Scalable Vector Graphics (SVG) 1.1 Spec ...

  10. web-api POST body object always null

      If the any of values of the request's JSON object are not the same type as expected by the service ...