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. Open System Interconnection

    https://zh.wikipedia.org/wiki/Secure_Shell Secure Shell(缩写为SSH),由IETF的网络工作小组(Network Working Group)所 ...

  2. 关于session的常用用法

    (一)django有四中session实现方式 1.数据库(database-backed sessions) 2.缓存(cached sessions) 3.文件系统(file-based sess ...

  3. Linux运维工程师：30道面试题整理

    1.linux 如何挂在 windows 下的共享目录 mount.cifs //192.168.1.3/server /mnt/server -o user=administrator,pass=1 ...

  4. 005-JSX简介以及使用

    一.概述 考虑这个变量声明: const element = <h1>Hello, world!</h1>; 标签语法既不是字符串也不是HTML. 它被称为JSX,它是Java ...

  5. Cannot format given Object as a Date

    这个小错挺有意思的,记录一下 导出Excel的时候,同事直接用 format …… 前提:数据库中该字段是 Timestamp ---- 2016-06-20 22:49:02.967 写个测试说明一 ...

  6. s5_day12作业

    # day12作业: # 功能实现: # 一个文件夹中,存在多个文件,包括图片,视频,文本等等, # 遍历出时间在2017-06-05至2017-06-09这段时间内创建的所有文件.具体文件夹,自己创 ...

  7. Windows Live Writer 网易博客配置

    一.去官网下载 Windows Live Write 组件 二.配置,选中其它服务,然后会到如下界面 主要是这里经常不知道选择什么,容易忘记. 下拉框选中metaweblog API 类型,把这个地址 ...

  8. python入门三：文件操作

    一.文件操作 1.文件对象:和c一样,要想对一个文件进行操作,需要获取该文件的对象 f = open("xxx") # 打开文件并获取文件对象 f.xxx # 对文件进行某些操作 ...

  9. $用ConfigParser模块读写conf配置文件

    ConfigParser是Python内置的一个读取配置文件的模块,用它来读取和修改配置文件非常方便,本文介绍一下它的基本用法. 数据准备 假设当前目录下有一个名为sys.conf的配置文件,其内容如 ...

  10. 使用Socket&反射&Java流操作进行方法的远程调用(模拟RPC远程调用)

    写在前面 阅读本文首先得具备基本的Socket.反射.Java流操作的基本API使用知识:否则本文你可能看不懂... 服务端的端口监听 进行远程调用,那就必须得有客户端和服务端.服务端负责提供服务,客 ...