需要.js文件和HTML例如在网页上显示.STL 3D对象 [英] Need .js and HTML example for displaying .STL 3D objects in a web page
问题描述
任何人都可以产生一个干净的傻瓜例如HTML中使用的 STLLoader.js 来显示ASCII（不是二进制）.STL在网页中目标文件？结果应该让用户操作对象目前HTML5的浏览器，并与超过灰度物体表面和背景没有华丽的视觉效果。
STLLoader.js可能需要three.js或three.min.js的帮助，但我不知道。 STLLoader.js包括下面使用的例子，但不包括HTML包装。
使用实例里面 <一个href="https://github.com/mrdoob/three.js/blob/dev/examples/js/loaders/STLLoader.js">STLLoader.js
/ **
* 用法：
* VAR装载机=新THREE.STLLoader（）;
* loader.addEventListener（'负荷'，函数（事件）{
*
* VAR几何= event.content;
* scene.add（新THREE.Mesh（几何形状））;
*
*}）;
* loader.load（'./models/stl/slotted_disk.stl'）;
* /
在three.js例子是一个很好的来源：
https://github.com/mrdoob/three。 JS / BLOB /主/例子/ webgl_loader_stl.html
下面是一个简化版本：
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML LANG =EN＆GT;
＆LT; HEAD＆GT;
＆LT;冠军＆GT; three.js的WebGL - STL＆LT; /标题＆GT;
＆LT;元字符集=utf-8＆GT;
＆LT; META NAME =视口内容=WIDTH =设备宽度，用户可扩展性=无，最小规模= 1.0，最大规模= 1.0＆GT;
＆LT;风格＆GT;
体 {
字体家庭：等宽;
背景颜色：＃000000;
保证金：0px;
溢出：隐藏;
}
＃信息 {
颜色：#FFF;
位置：绝对的;
顶：10px的;
宽度：100％;
文本对齐：中心;
的z-index：100;
显示：块;
}
A {颜色：天蓝}
＆LT; /风格＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT; DIV ID =信息＆GT;
STL装载机测试
＆LT; / DIV＆GT;
＆所述;脚本的src =http://threejs.org/build/three.min.js＆GT;＆所述; /脚本＆GT;
＆所述;脚本的src =http://threejs.org/examples/js/loaders/STLLoader.js＆GT;＆所述; /脚本＆GT;
＆LT;脚本＆GT;
VAR集装箱，摄像，场景，渲染器;
在里面（）;
动画（）;
功能的init（）{
容器= document.createElement方法（'格'）;
document.body.appendChild（容器）;
//渲染器
渲染器=新THREE.WebGLRenderer（{反锯齿：真}）;
renderer.setSize（window.innerWidth，window.innerHeight）;
container.appendChild（renderer.domElement）;
// 现场
现场=新THREE.Scene（）;
// 相机
摄像头=新THREE.PerspectiveCamera（35，window.innerWidth / window.innerHeight，1，10000）;
camera.position.set（3，0.5％，3）;
scene.add（照相机）; //必需的，因为我们加入了光作为相机的子
//灯
scene.add（新THREE.AmbientLight（0x222222））;
VAR光=新THREE.PointLight（0XFFFFFF，0.8）;
camera.add（光）;
// 目的
VAR装载机=新THREE.STLLoader（）;
loader.load（'slotted_disk.stl'，函数（几何）{
VAR材料=新THREE.MeshPhongMaterial（{颜色：0xff5533}）;
变种网状=新THREE.Mesh（几何形状，材料）;
scene.add（目）;
}）;
window.addEventListener（'调整'，onWindowResize，假）;
}
功能onWindowResize（）{
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix（）;
renderer.setSize（window.innerWidth，window.innerHeight）;
}
功能动画（）{
requestAnimationFrame（动画）;
渲染（）;
}
功能渲染（）{
VAR定时器= Date.now（）* 0.0005;
camera.position.x = Math.cos（定时器）* 5;
camera.position.z = Math.sin（定时器）* 5;
camera.lookAt（scene.position）;
renderer.render（场景，摄像头）;
}
＆LT; / SCRIPT＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
three.js R.70
Can anybody produce a clean "for dummies" example of HTML for using STLLoader.js to display ASCII (not binary) .stl object files in a web page? Result should let users manipulate object in current HTML5 browsers and with no fancy visuals beyond a grayscale object surface and background.
STLLoader.js might need the help of three.js or three.min.js but I wouldn't know. STLLoader.js contains below usage example but did not include an HTML wrapper.
Usage example inside STLLoader.js
/**
* Usage:
* var loader = new THREE.STLLoader();
* loader.addEventListener( 'load', function ( event ) {
*
* var geometry = event.content;
* scene.add( new THREE.Mesh( geometry ) );
*
* } );
* loader.load( './models/stl/slotted_disk.stl' );
*/
The three.js examples are a good source:
https://github.com/mrdoob/three.js/blob/master/examples/webgl_loader_stl.html
Here is a simplified version:
<!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;
}
#info {
color: #fff;
position: absolute;
top: 10px;
width: 100%;
text-align: center;
z-index: 100;
display:block;
}
a { color: skyblue }
</style>
</head>
<body>
<div id="info">
STL loader test
</div>
<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://threejs.org/examples/js/loaders/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
camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.set( 3, 0.5, 3 );
scene.add( camera ); // required, because we are adding a light as a child of the camera
// lights
scene.add( new THREE.AmbientLight( 0x222222 ) );
var light = new THREE.PointLight( 0xffffff, 0.8 );
camera.add( light );
// object
var loader = new THREE.STLLoader();
loader.load( 'slotted_disk.stl', function ( geometry ) {
var material = new THREE.MeshPhongMaterial( { color: 0xff5533 } );
var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
} );
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
var timer = Date.now() * 0.0005;
camera.position.x = Math.cos( timer ) * 5;
camera.position.z = Math.sin( timer ) * 5;
camera.lookAt( scene.position );
renderer.render( scene, camera );
}
</script>
</body>
</html>
three.js r.70
这篇关于需要.js文件和HTML例如在网页上显示.STL 3D对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
