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>
three.js 加载STL文件的更多相关文章
- 通过JS加载XML文件,跨浏览器兼容
引言 通过JS加载XML文件,跨多种浏览器兼容. 在Chrome中,没有load方法,需要特殊处理! 解决方案 部分代码 try //Internet Explorer { xmlDoc=new Ac ...
- .net使用pdfobject.js加载pdf文件
1.下载pdfobject.js文件 2. <script type="text/javascript" src="<%= Application[" ...
- js加载XML文件
// XML文件 <?xml version="1.0" encoding="gb2312"?> <root> <father n ...
- js 加载 xml 及遍历属性及内容 整理
本文旨在: js加载xml文件并读取节点信息 1 加载xml文件 var xmlDoc = loadXMLDoc("negativeData.xml"); function loa ...
- 使用js加载器动态加载外部Javascript文件
原文:http://www.cnblogs.com/xdp-gacl/p/3927417.html 今天在网上找到了一个可以动态加载js文件的js加载器,具体代码如下: JsLoader.js var ...
- js便签笔记(8)——js加载XML字符串或文件
1. 加载XML文件 方法1:ajax方式.代码如下: var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObje ...
- JavaScript学习总结(十九)——使用js加载器动态加载外部Javascript文件
今天在网上找到了一个可以动态加载js文件的js加载器,具体代码如下: JsLoader.js 1 var MiniSite=new Object(); 2 /** 3 * 判断浏览器 4 */ 5 M ...
- JS加载&解析XML文件,浏览器兼容
# JS加载XML,浏览器之间有差异,代码如下 this.createXMLDom = function() { var xmldoc; var xmlFile = "XXXXXXXXX. ...
- c#两种方式调用google地球,调用COM API以及调用GEPLUGIN 与js交互,加载kml文件,dae文件。将二维高德地图覆盖到到三维谷歌地球表面。
网络上资源很多不全面,自己在开发的时候走了不少弯路,在这里整理了最全面的google全套开发,COM交互,web端交互.封装好了各种模块功能. 直接就可以调用. 第一种方式:调用COMAPI实现调用g ...
随机推荐
- centos下java环境搭建安装
1. 购买服务器(阿里云) 2. 重置密码,重启服务器 3. 创建账号work groupadd work #创建组 mkdir /data # 创建数据文件夹 useradd -d /data/wo ...
- 19条常用的MySQL优化方法(转)
本文我们来谈谈项目中常用的MySQL优化方法,共19条,具体如下:1.EXPLAIN命令做MySQL优化,我们要善用EXPLAIN查看SQL执行计划.下面来个简单的示例,标注(1.2.3.4.5)我们 ...
- 【MySQL】MariaDB10.2新特性--Flashback
MariaDB10.2新特性--Flashback Flashback可以回滚到旧的数据,用于解决用户误删除数据的问题. 实战例子 MariaDB [zsd]> select * from te ...
- CSS之flex布局和边框阴影
flex布局 main axis:主轴:cross axis:交叉轴 容器的子元素自动成为容器成员,成为flex 项目(item) flex容器属性 flex-direction 该属性决定主轴的 ...
- 获取Url地址中参数的3种方法【华为云技术分享】
获取Url的代码如下:window.location.href; 方法一:原生js(假设已经获得了Url地址) var url = 'https://gitbook.cn/gitchat/geekbo ...
- 《即时消息技术剖析与实战》学习笔记6——IM系统如何保证消息的安全性
在消息产生.流转的各个环节中,需要保证消息传输安全性.消息存储安全性.消息内容安全性. 一.消息传输安全性 消息传输的重要防范点有两个,一是访问入口安全,二是传输链路安全. 1.HttpDNS保证访问 ...
- idea更改之前保存的git账号和密码
1.打开控制面板 2.用户账户 3.管理windows凭据 4.点击里面的git就可以修改了
- C# 常用工具方法之DataTable(一)
1.DataTable 转 泛型T的List /// <summary> /// 数据集DataTable转换成List集合 /// </summary> /// <ty ...
- 深入解析 Go 中 Slice 底层实现
原文: https://halfrost.com/go_slice/ 切片是 Go 中的一种基本的数据结构,使用这种结构可以用来管理数据集合.切片的设计想法是由动态数组概念而来,为了开发者可以更加 ...
- vue接入腾讯防水墙代码
vue接入腾讯防水墙代码 开始创建代码: 登陆调用方法代码