需要.js和HTML示例在网页中显示.STL 3D对象
有谁能提供一个干净的HTML“for dummies”示例，用于在网页中显示ASCII（非二进制）.stl对象文件？结果应该允许用户在当前的HTML5浏览器中操作对象，并且除了灰度对象表面和背景之外，没有任何奇特的视觉效果 STLLoader.js可能需要three.js或three.min.js的帮助，但我不知道。STLLoader.js包含以下使用示例，但未包含HTML包装。需要.js和HTML示例在网页中显示.STL 3D对象,3d,webgl,three.js,3d,Webgl,Three.js,有谁能提供一个干净的HTML“for dummies”示例，用于在网页中显示ASCII（非二进制）.stl对象文件？结果应该允许用户在当前的HTML5浏览器中操作对象，并且除了灰度对象表面和背景之外，没有任何奇特的视觉效果 STLLoader.js可能需要three.js或three.min.js的帮助，但我不知道。STLLoader.js包含以下使用示例，但未包含HTML包装。 内部使用示例 这三个.js示例是一个很好的来源： 以下是一个简化版本： <!DOCTYPE html>
内部使用示例
这三个.js示例是一个很好的来源： 以下是一个简化版本：
<!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 webgl-STL
身体{
字体系列：Monospace；
背景色：#000000；
边际：0px；
溢出：隐藏；
}
#信息{
颜色：#fff；
位置：绝对位置；
顶部：10px；
宽度：100%；
文本对齐：居中；
z指数：100；
显示：块；
}
a{color:skyblue}
装载机测试
var容器、摄影机、场景、渲染器；
init（）；
制作动画（）；
函数init（）{
container=document.createElement（'div'）；
文件.正文.附件（容器）；
//渲染器
renderer=new THREE.WebGLRenderer（{antialas:true}）；
renderer.setSize（window.innerWidth、window.innerHeight）；
container.appendChild（renderer.doElement）；
//场面
场景=新的三个。场景（）；
//摄像机
摄像头=新的三个透视摄像头（35，window.innerWidth/window.innerHeight，11000）；
摄像机位置设置（3,0.5,3）；
scene.add（camera）；//必需，因为我们正在将灯光作为摄影机的子对象添加
//灯光
添加（新的3.AmbientLight（0x22222））；
var灯=新的三点灯（0xffffff，0.8）；
相机。添加（灯光）；
//反对
var loader=new THREE.STLLoader（）；
loader.load（'slotted_disk.stl'，函数（几何）{
var material=new THREE.MeshPhongMaterial（{color:0xff5533}）；
var mesh=新的三个网格（几何体、材质）；
场景。添加（网格）；
} );
addEventListener（'resize'，onWindowResize，false）；
}
函数onWindowResize（）{
camera.aspect=window.innerWidth/window.innerHeight；
camera.updateProjectMatrix（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
}
函数animate（）{
请求动画帧（动画）；
render（）；
}
函数render（）{
var timer=Date.now（）*0.0005；
camera.position.x=数学cos（计时器）*5；
camera.position.z=数学sin（计时器）*5；
摄像机。注视（场景。位置）；
渲染器。渲染（场景、摄影机）；
}
three.js r.70当我小心地将其.js和.stl文件复制到web服务器上时，webgl_loader_stl.html页面在当前的Chrome和Firefox中失败。页面大部分为黑色，顶部有一些信息。web上的其他3D.js页面在移植到我的测试环境中时也可以工作，但我不知道如何在中声明故障。我为您简化了示例。再简单不过了。如果您有其他问题，请发表一篇新文章，并尽可能提供一个实时链接。是否可以在
IE（9）stlSCRIPT5009:“DataView”是未定义的STLLoader.js，第82行字符3<!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>