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. BZOJ 1877 晨跑 拆点费用流

    题目链接: https://www.lydsy.com/JudgeOnline/problem.php?id=1877 题目大意: Elaxia最近迷恋上了空手道,他为自己设定了一套健身计划,比如俯卧 ...

  2. NSKeyValueObserving.m

    https://github.com/farcaller/cocotron/blob/af740de86c9bee84c59ffc74d27e5df9e22e1391/Foundation/NSKey ...

  3. VM下，装centos7系统，配置nginx的问题

    一.流程 1.先安装nginx依赖的包 (1)yum install gcc-c++ (2)yum install -y pcre pcre-devel (3)yum install -y zlib ...

  4. 4698. [SDOI2008]Sandy的卡片【后缀数组】

    Description Sandy和Sue的热衷于收集干脆面中的卡片.然而,Sue收集卡片是因为卡片上漂亮的人物形象,而Sandy则是为了积 攒卡片兑换超炫的人物模型.每一张卡片都由一些数字进行标记, ...

  5. Java并发编程--3.Lock

    Lock接口 它提供3个常用的锁 lock() : 获不到锁就就一直阻塞 trylock() :获不到锁就立刻放回 或者 定时的,轮询的获取锁 lockInterruptibly() : 获不到锁时阻 ...

  6. 最长公共子序列&最长公共子串

    首先区别最长公共子串和最长公共子序列  LCS(计算机科学算法:最长公共子序列)_百度百科 最长公共子串,这个子串要求在原字符串中是连续的.而最长公共子序列则并不要求连续. 最长公共子序列: http ...

  7. k8s存储 pv pvc ,storageclass

    1.  pv  pvc 现在测试 glusterfs  nfs  可读可写, 多个pod绑定到同一个pvc上,可读可写. 2. storageclass  分成两种 (1)  建立pvc, 相当于多个 ...

  8. 创建JDBCUtils工具类

    JDBCUtils工具类 私有化构造函数,外界无法直接创建对象 提供公共的,静态的,getConnection 方法,用来给外界提供数据库连接 提供公共的,静态的,close方法,用来释放资源 pac ...

  9. 20145203盖泽双 《Java程序设计》第四周学习总结

    20145203盖泽双 <Java程序设计>第四周学习总结 教材学习内容总结 1.多个类中存在相同属性和行为时,将这些内容抽取到单独一个类中,那么多个类无需再定义这些属性和行为,只要继承单 ...

  10. mongodb的学习-5-概念解析

    http://www.runoob.com/mongodb/mongodb-databases-documents-collections.html mongodb中基本的概念是文档.集合.数据库 S ...