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. event chrome firefox 获取点击对象的 id 类

    <!doctype html><html lang="en"><head> <meta charset="UTF-8" ...

  2. 传说中的MATLAB1.0（1984年DOS界面182K、运行良好）附下载

    传说中的MATLAB1.0(1984年DOS界面182K.运行良好)附下载 你见过 MATLAB 最早的版本吗?下载一份 MATLAB 1.0,(只有182K, 只有20来个函数) 体会一下吧.MAT ...

  3. Grunt-Less批量编译为css

    Grunt批量编译less module.exports = function (grunt) { grunt.initConfig({ less: { main: { expand: true, s ...

  4. 对比MySQL，你究竟在什么时候更需要MongoDB（转）

    译文:对比MySQL,你究竟在什么时候更需要MongoDB 原文链接: When Should I Use MongoDB rather than MySQL (or other RDBMS): Th ...

  5. Linux（4）- centos7安装python3、Linux下安装、配置virtualenv、确保开发环境的一致性、虚拟环境之virtualenvwrapper、vim

    一.centos7安装python3 1.下载python3的源码包 下载地址:https://www.python.org/ftp/python/3.6.2/Python-3.6.2.tgz cd ...

  6. Leetcode 之 Combination Sum系列

    39. Combination Sum 1.Problem Find all possible combinations of k numbers that add up to a number n, ...

  7. Android Studio java和XML快速切换技巧

    今天又发现了一个Android Studio强大的功能,非常惊叹! 我们开发Android应用程序时,Activity或者Fragment会有一个相对应的布局.在Eclipse中或者一般的做法,我们会 ...

  8. 《深度学习》Textbook第十章学习笔记

    深度学习 第10章 序列建模:循环和递归网络 1.循环神经网络介绍 相比卷积神经网络:专门用于处理网格化的数据(如图像),可以很容易扩展到更具有很大宽度和高度的图像,以及处理大小可变的图像: 循环神经 ...

  9. mysql的两种常用的引擎

    MyISAM引擎特点1.不支持事务(事务是指逻辑上的一组操作,组成这组操作的各个单元,要么全成功,要么全失败)2.表级锁定(数据更新时锁整个表):其锁定机制是表级锁定,这虽然可以让锁定的实现成本很小但 ...

  10. 数据库权限分配(远程共享数据库)(mysql)

    1. 数据库远程权限 mysql -uroot -proot grant all privileges on formal.* to root@'192.168.3.40' identified by ...