stlloadertest.html：

 <!DOCTYPE html>

 <html lang="en">

     <head>

         <title>three.js webgl - STL</title>

         <script src="build/three.js"></script>

         <script src="js/loaders/STLLoader.js"></script>

         <script type="text/javascript" src="js/controls/OrbitControls.js"></script>

         <script type="text/javascript" src="stlloadertest.js"></script>

     </head>

     <body onload="init()">

         <div>

             <canvas id="mainCanvas" width="1000px" height="600px" ></canvas>

         </div>

     </body>

 </html>

stlloadertest.js：

 var camera, cameraTarget, scene, renderer,controlls,loader,material,mesh;

 function init() {

     //camera

     camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 1000 );

     camera.position.set( 0, 0, 500 );

     cameraTarget = new THREE.Vector3( 0, 0, 0 );

     camera.lookAt( cameraTarget );

     //scene

     scene = new THREE.Scene();

     scene.background = new THREE.Color( 0x72645b );

     scene.add(camera);

     // renderer

     renderer = new THREE.WebGLRenderer({

         canvas: document.getElementById('mainCanvas')

     });

     renderer.setSize( window.innerWidth, window.innerHeight );

     // a cube in the scene

     cube = new THREE.Mesh(new THREE.CubeGeometry(50, 50, 50),

             new THREE.MeshBasicMaterial({

                 color: 0xff0000 //red

             })

     );

     cube.position.set(50,0,0);

     scene.add(cube);

     // ASCII file

     //导入dayan.stl

     loader = new THREE.STLLoader();

     loader.load( 'stl/ascii/dayan.stl', function ( geometry ) {

         material = new THREE.MeshPhongMaterial( { color: 0xff5533, specular: 0x111111, shininess: 200 } );

         mesh = new THREE.Mesh( geometry, material );

         mesh.position.set( 1, 0, 0 );

         mesh.rotation.set( -Math.PI/2,  0, 0 );

         //Math.PI

         mesh.scale.set( 1, 1, 1 );

         mesh.castShadow = true;

         mesh.receiveShadow = true;

         scene.add( mesh );

         render();

     } );

     // Lights

     scene.add( new THREE.HemisphereLight( 0x443333, 0x111122 ) );

     addShadowedLight( 1, 1, 1, 0xffffff, 1.35 );

     //controlls

     controls = new THREE.OrbitControls( camera ,renderer.domElement );

     controls.addEventListener( 'change', render );    

 }

 function addShadowedLight( x, y, z, color, intensity ) {

     var directionalLight = new THREE.DirectionalLight( color, intensity );

     directionalLight.position.set( x, y, z );

     scene.add( directionalLight );

     directionalLight.castShadow = true;

     var d = 1;

     directionalLight.shadow.camera.left = -d;

     directionalLight.shadow.camera.right = d;

     directionalLight.shadow.camera.top = d;

     directionalLight.shadow.camera.bottom = -d;

     directionalLight.shadow.camera.near = 1;

     directionalLight.shadow.camera.far = 4;

     directionalLight.shadow.mapSize.width = 1024;

     directionalLight.shadow.mapSize.height = 1024;

     directionalLight.shadow.bias = -0.005;

 }

 function render() {

     renderer.render( scene, camera );

 }

Three.js基础：导入STL模型文件的更多相关文章

  1. tensorflow 导入gfile模型文件

    with tf.gfile.GFile(os.path.join(self.model_dir, 'ner_model.pb'), 'rb') as f: graph_def = self.tf.Gr ...

  2. 【带着canvas去流浪（14）】Three.js中凹浮雕模型的生成方式

    目录 一. 方案1:ThreeBSP.js或ThreeCSG.js扩展库 二. 方案2:平面镂空模型拉伸 三. 方案3:Cinema 4D建模后输出模型文件 示例代码托管在:http://www.gi ...

  3. 读取STL模型

    读取二进制格式的STL模型文件 std::ifstream fin;fin.open(stlFilePath, std::ios::in | std::ios::binary);bool isBina ...

  4. js导入外部脚本文件

    JS 语言没找到导入外部脚本文件的功能,只能通知宿主程序来处理. function include(path){ var a=document.createElement("script&q ...

  5. Web3D编程入门总结——WebGL与Three.js基础介绍

    /*在这里对这段时间学习的3D编程知识做个总结,以备再次出发.计划分成“webgl与three.js基础介绍”.“面向对象的基础3D场景框架编写”.“模型导入与简单3D游戏编写”三个部分,其他零散知识 ...

  6. 前端工程师面试问题归纳（一、问答类html/css/js基础）

    一.参考资源 1.前端面试题及答案整理(一) 2.2017年前端面试题整理汇总100题 3.2018最新Web前端经典面试试题及答案 4.[javascript常见面试题]常见前端面试题及答案 5.W ...

  7. Node.js基础与实战

    Node.js基础与实战 Node.jsJS高级进阶 NODE原理与解析 REPL交互环境 模块与NPM Buffer缓存区 fs文件操作 Stream流 TCP&UDP 异步编程 HTTP& ...

  8. Unity3D游戏开发从零单排(五) - 导入CS模型到Unity3D

    游戏动画基础 Animation组件 Animation组件是对于老的动画系统来说的. 老的动画形同相应的动画就是clip,每一个运动都是一段单独的动画,使用Play()或CrossFade(),直接 ...

  9. JS基础--函数与BOM、DOM操作、JS中的事件以及内置对象

       前   言 絮叨絮叨 这里是JS基础知识集中讲解的第三篇,也是最后一篇,三篇JS的基础,大多是知识的罗列,并没有涉及更难得东西,干货满满!看完这一篇后,相信许多正在像我一样正处于初级阶段的同学, ...

随机推荐

  1. REDO 的内容：改变向量

    REDO 的内容 ---改变向量 redo的内容并不是sql语句,他是放的一些改变,叫改变向量. 数据库恢复的时候并不是执行sql语句,而是一个物理的过程,是一个数据块的覆盖.是改变数据块的大小. 可 ...

  2. ZooKeeper 基本介绍

    Zookeeper 作为一个分布式的服务框架,主要用来解决分布式集群中应用系统的一致性问题,它能提供基于类似于文件系统的目录节点树方式的数据存储, Zookeeper 作用主要是用来维护和监控存储的数 ...

  3. html常见兼容性问题

    html常见兼容性问题? 1.双边距BUG float引起的  使用display 2.3像素问题 使用float引起的 使用dislpay:inline -3px 3.超链接hover 点击后失效 ...

  4. Selenium定位不到指定元素原因之iframe（unable to locate element）

    浏览过程中,图片中的内容可能太小,无法看清,可以>右键>在新标签中打开 Outline 项目原因,需要用selenium实现模拟登陆.模拟上传文件,自然就需要模拟点击[上传]按钮: 模拟点 ...

  5. 自动更新SVN项目

    @echo off@echo =================================@echo 定时在SVN上自动更新项目内容,可用于项目放在web服务器没有hudson的时候@echo ...

  6. *.hbm.xml映射文件的元素及属性

    1. 每个持久化对象都需要提供一个以类名命名的映射文件,映射文件需要放在和po类同一目录下. 2. 如下是wefepo的映射文件: <hibernate-mapping> <clas ...

  7. keras 学习文档

    https://github.com/fchollet/keras-resources https://keras.io/

  8. C#设置当前程序通过IE代理服务器上网

    注意:以下设置只在当前程序中有效,对IE浏览器无效,且关闭程序后,自动释放代码. using System; using System.Collections.Generic; using Syste ...

  9. CKEditor的下载、配置与使用

    CKEditor简介: CKEditor 是一款功能强大的开源在线文本编辑器.它所见即所得的特点,使你在编辑时所看到的内容和格式,能够与发布后看到的效果完全一致.CKEditor 完全是基于 Java ...

  10. Flash本地共享对象 SharedObject

    以下内容是对网上一些资料的总结 Flex SharedObject 介绍(转自http://www.eb163.com/club/thread-3235-1-1.html): Flash的本地共享对象 ...