1.使用Three.js渲染导出的DAE

在Three.js中使用Collada(即.dae)文件的话，首先得要用到 ColladaLoader.js。

但是这个ColladaLoader.js并不包含在three.js文件里面，需要你自己下载然后添加进来。

这个文件中three.js的repo里面的examples/js/loaders/ColladaLoader.js

如果你检出了three.js的源代码的话，在上面的位置就可以找到这个文件了。

然后在你的html里面载入这个文件就可以了。

其实一开始照着官方的文档去加载和展示dae是显示不出来的，

搜索了很多相关知识后才找到如下方式可以显示出来，

可能是camera视角原因和光照原因。

最后可以正常显示的页面主文件如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <title>Roulette</title>

    <style type="text/css">

        body {

            margin: 0;

        }

        canvas { width: 100%; height: 100% }

    </style>

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

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

    <script src="js/OrbitControls.js"></script>

    <script src="js/pumpStation1.js"></script>

</head>

<body onload="startGame();">

</body>

</html>

Js文件

var scene, camera, renderer, daeModel;

//初始化场景

function initScene() {

    scene = new THREE.Scene();

}

//初始化摄像机

function initcamera(){

    aspect = 980/ 490;

    D = 8;

    camera = new THREE.OrthographicCamera(-D*aspect, D*aspect, D, -D, 1, 1000);

    //camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight,0.1,200)

    camera.position.set( 300, -300, 300 );

    camera.lookAt( new THREE.Vector3( 0, 0, 0 ) );

    camera.up.x = 0;

    camera.up.y = 0;

    camera.up.z = 1;

    //camera.rotation.z = 1 / 6 * Math.PI;

    //camera.rotation.z = 5/6*Math.PI;

}

function initthree() {

    renderer = new THREE.WebGLRenderer();

    renderer.setSize( 980, 490 );

    renderer.setClearColor( 0xffffff );

    document.body.appendChild( renderer.domElement );

    /*

        var spotLight = new THREE.SpotLight( 0xffffff );

        spotLight.position.set( 100, 1000, 100 );

        spotLight.castShadow = true;

        spotLight.shadow.mapSize.width = 1024;

        spotLight.shadow.mapSize.height = 1024;

        spotLight.shadow.camera.near = 500;

        spotLight.shadow.camera.far = 4000;

        spotLight.shadow.camera.fov = 30;

        scene.add( spotLight );

    */

}

function initlight() {

    var light = new THREE.DirectionalLight( 0xffffff, 2 );

    light.position.set( 300, -300, 200 );

    scene.add( light );

}

function LoadModel() {

    var loader = new THREE.ColladaLoader();

    loader.load( "./model/pumpStation1.dae", function ( collada ) {

        daeModel = collada.scene;

        daeModel.scale.set( 0.1, 0.1, 0.1 );

        daeModel.position.set( -6, 0, 0 );

        scene.add( daeModel );

        //参考坐标轴

        var axisHelper = new THREE.AxisHelper(500);

        scene.add(axisHelper);

    },

    function ( xhr ) {

        console.log(( xhr.loaded / xhr.total * 100 ) + "% loaded" );

    } );

}

//初始化渲染器

function render() {

    requestAnimationFrame( render );

    renderer.clear();

    renderer.render( scene, camera );

    //if( daeModel ){

    //    daeModel.rotation.z++;

    //}

}

var Controls;

// 初始化控制器

function initControls() {

    Controls = new THREE.OrbitControls( camera );

}

function startGame(){

    console.log('Load Model started...');

    initScene();

    initcamera();

    initthree();

    initlight();

    LoadModel();

    render();

    initControls();

}

图片显示效果如下图所示

其中的这一段代码是用来控制鼠标拖动模型旋转的

var Controls;

// 初始化控制器

function initControls() {

    Controls = new THREE.OrbitControls( camera );

}

必须在主页中引用这个脚本

<script src="js/OrbitControls.js"></script>

6.把建模工具导出的dea文件导入到three.js程序中的更多相关文章

  1. [转载]将别人的项目或JAVA文件导入到自己的Eclipse中时，常常会出现JAVA文件的中文注释变成乱码的情况，解决办法

    eclipse 代码中文注释乱码 求解决 将别人的项目或JAVA文件导入到自己的Eclipse中时,常常会出现JAVA文件的中文注释变成乱码的情况,主要原因就是别人的IDE编码格式和自己的Eclips ...

  2. Win7-其中的文件夹或文件已在另一个程序中打开

    Win7-其中的文件夹或文件已在另一个程序中打开 如何解决Win7系统在删除或移动文件时提示,“操作无法完成,因为其中的文件夹或文件已在另一个程序中打开,请关闭该文件夹或文件,然后重试”.   步骤阅 ...

  3. Core在IIS的热发布问题或者报错文件已在另一个程序中打开

    关于Core发布到IIS的热发布问题,或者覆盖dll文件的时候会报错"文件已在另一个程序中打开",也就是无法覆盖程序的问题,经过百度和分析总结以下几种方案: 一.使用app_off ...

  4. SQL Server:把CSV文件导入到SQL Server表中

    有时候我们可能会把CSV中的数据导入到某个数据库的表中,比如做报表分析的时候. 对于这个问题,我想一点也难不倒程序人员吧!但是要是SQL Server能够完成这个任务,岂不是更好! 对,SQL Ser ...

  5. 把CSV文件导入到SQL Server表中

    保存数据库数据直接查询select * from tableName 在数据表格的左上角右击——将结果另存为选择路劲保存好的就是.csv格式的数据 有时候我们可能会把CSV中的数据导入到某个数据库的表 ...

  6. win10文件夹或文件已在另一程序中打开

    我们在对文件或文件夹进行删除.移动.重命名等操作时,系统可能提示“操作无法完成,因为其中的文件夹已在另一程序中打开,请关闭该文件或文件夹,然后重试.”,遇到这种情况我们应该怎么办呢?请看下文. 方法/ ...

  7. powerdesigner 使用技巧 建模工具 导出sql 导出实体类 导出word

    显示comment列 Table Properties(表属性)=>Columns(列)=>Customize Columns and Filter(自定义列过滤) 勾上 comment ...

  8. 利用PL/SQL Developer工具导出数据到excel,导入excel数据到表

    使用PL/SQL Developer工具. 导出: 1.执行select 语句查询出需要导出的数据. 2.在数据列表中右键,选择save results.保存为.csv文件,然后已excel方式打开就 ...

  9. 如何将CAD文件导入到Protel和PADS中

    一. 如何把CAD中的板框图纸导入到Protel中? a. 在CAD中单位设置为“毫米”,并做简单的处理,板框图是有合并还是分解都无所谓,另存为R12(*dxf)格式文件. b. 打开DXP,新建PC ...

随机推荐

  1. linux下ab网站压力测试命令

    http://domain:代表压测域名.   get方法压测:        1)一般get方法压测简单,直接后缀url就ok了,参数直接挂在url后面的?a=1&b=2,         ...

  2. Jmeter新手频犯错误之一（登录）

    昨天被人问了一个问题:为什么我用Jmeter先创建一个登录请求,然后创建一个操作(比如计算账单)请求,运行之后结果树中却是status_code=401(即登录失败),我明明登录了啊.... emmm ...

  3. Manifest XML signature is not valid(安装ClickOnce签名未通过验证)

    转载:http://stackoverflow.com/questions/12826798/manifest-xml-signature-is-not-valid 安装时,我的问题:  PLATFO ...

  4. 【C++0x】表达式之类型（decltype）

      C++0x引入了新的关键字decltype,它是一个操作符,用来取得表达式的类型,主要在泛型编程中使用.这里,简单介绍一下语法规则. 语法形式:decltype (expression)其中,这里 ...

  5. where语句中不能直接使用聚合函数

    1.问题描述 select deptno ,avg(sal) from emp where count(*)>3 group by deptno; 在where 句中使用聚合函数count(*) ...

  6. [外观] Firemonkey Windows Hint 气球样式

    Firemonkey 在 Windows 平台下的 Hint 默认为距形,有些单调,现在只要加入一行代码,就可以有气球箭头样式的 Hint. 修改代码: 请将 FMX.Controls.Win.pas ...

  7. 小米路由器设置端口转发远程登录WEB管理页及安装MT工具箱

    1. 将小米路由器ROM升级到开发版 这一点是必须的,如果是稳定版是不行的 2. 获取高级管理权限 再次确认当前使用的是开发版ROM 到这个网址http://d.miwifi.com/rom/ssh ...

  8. ruby puts, print, p方法比较

    1.puts([obj[, obj2[, ....]]] ) 依次将obj和换行符输出到$>.若没有参数的话则只会输出换行符. 若参数是数组,则依次输出数组元素和换行符.若将既非数组又非字符串的 ...

  9. filebeat 插件开发

      filebeat是一个轻量的日志收集工具,全套使用go语言开发.   我目前遇到的问题是,在收集的时候需要对数据进行采样,采样比和采样形式要灵活,因为可能在多个项目会使用到这个日志收集功能.刚开始 ...

  10. 大数据入门第五天——离线计算之hadoop（下）hadoop-shell与HDFS的JavaAPI入门

    一.Hadoop Shell命令 既然有官方文档,那当然先找到官方文档的参考:http://hadoop.apache.org/docs/current/hadoop-project-dist/had ...