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. 下载flv格式视频

    我们再看flash plaer播放视频时,有些时候需要下载,无奈找不到下载的按钮.这时,我们可以用以下的方式来进行下载. 其它格式估计也是有迹可循,大家仔细看看网页源代码,看到类似于这种地址,看到有相 ...

  2. 高德js API moveAlong 函数的一个错误解决

    使用覆盖物之一:点标记,让点标记沿着固定的路线移动. API 提供了现成的函数 moveAlong() 开始以为 实现移动很简单:分两部 1.准备好经纬度数组 2.调用moveAlong()函数.按照 ...

  3. golang 热更新技巧 负载均衡才是正道啊

    golang plugin热更新尝试 - 呵大官人的鱼塘 - 开源中国 https://my.oschina.net/scgywx/blog/1796358 golang plugin热更新尝试 发布 ...

  4. Spring 框架的JDBC模板技术

    1. 概述 Spring 框架提供了很多持久层的模板类来简化编程; Spring 框架提供的JDBC模板类: JdbcTemplate 类; Spring 框架提供的整合 Hibernate 框架的模 ...

  5. 转！！CSRF攻击与防御（写得非常好）

    CSRF概念:CSRF跨站点请求伪造(Cross—Site Request Forgery),跟XSS攻击一样,存在巨大的危害性,你可以这样来理解:       攻击者盗用了你的身份,以你的名义发送恶 ...

  6. 转！！DNS域名解析使用的是TCP协议还是UDP协议？

    原文地址:https://segmentfault.com/a/1190000006100959 DNS同时占用UDP和TCP端口53是公认的,这种单个应用协议同时使用两种传输协议的情况在TCP/IP ...

  7. C#中的另类语法

    一..net中return的另类写法: 不知道是从3.5还是从4.0开始C#语法中的return有了新的写法示例如下: public string functionDemo() {       str ...

  8. vue中的项目目录assets和staitc的区别

    vue中的项目目录assets和staitc的区别 在进行发行正式版时,即为npm run build编译后, assets下的文件如(js.css)都会在dist文件夹下面的项目目录分别合并到一个文 ...

  9. 阿里、腾讯、京东、微软，各家算法&数据挖掘岗位面经大起底!

    阿里.腾讯.京东.微软,各家算法&数据挖掘岗位面经大起底! 2016-02-24 36大数据 36大数据 作者: 江少华 摘要: 从2015年8月到2015年10月,花了3个月时间找工作,先后 ...

  10. python全栈开发从入门到放弃之元组的内置应用

    1.元组的字符类型tuple t=(1,[1,3],'sss',(1,2)) print(type(t)) <class 'tuple'> 2.按索引号取值 t=(1,[1,3],'sss ...