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. 在.NET中操作数字证书(新手教程)

    .NET为我们提供了操作数字证书的两个主要的类,分为为: System.Security.Cryptography.X509Certificates.X509Certificate2类, 每个这个类的 ...

  2. OSSpinLockLock加锁机制，保证线程安全并且性能高

    在aspect_add.aspect_remove方法里面用了aspect_performLocked, 而aspect_performLocked方法用了OSSpinLockLock加锁机制,保证线 ...

  3. 20165318 2017-2018-2 《Java程序设计》第二周学习总结

    20165318 2017-2018-2 <Java程序设计>第二周学习总结 教材学习内容总结 本周学习了第二章和第三章的内容,掌握了Java中基本数据类型.数组.运算符.表达式和语句等方 ...

  4. 1834. [ZJOI2010]网络扩容【费用流】

    Description 给定一张有向图,每条边都有一个容量C和一个扩容费用W.这里扩容费用是指将容量扩大1所需的费用. 求:  1.在不扩容的情况下,1到N的最大流:  2.将1到N的最大流增加K所需 ...

  5. Odoo的@api.装饰器

    转载请注明原文地址:https://www.cnblogs.com/cnodoo/p/9281437.html Odoo自带的api装饰器主要有:model,multi,one,constrains, ...

  6. Python之Cubes框架使用

    本文主要内容包含Cubes框架的介绍和简单使用. 一. 介绍和安装 Cubes是一个轻量级的Python框架和一套工具,用于开发报告和分析应用程序,在线分析处理(OLAP),多维分析和聚合数据的浏览. ...

  7. 初次接触ARM开发，理清这四个开发思路很重要！

    初次接触ARM开发,理清这四个开发思路很重要! 由于涉及编程,学习ARM单片机系统对于从事电子电路的设计者来说是有些困难的,学习知识不难,难的是理清其中的开发思路,找到一个好的起点.本文就将从这一步入 ...

  8. 01_Docker概念简介、组件介绍、使用场景和命名空间

    一.简介 Docker是一个能够把开发的应用程序自动部署到容器的开源引擎.Docker在虚拟化的容器执行环境中增加了一个应用程序部署引擎.该引擎的目标就是提供一个轻量.快速的环境,能够运行开发者的程序 ...

  9. 在线调整InnoDB Buffer Pool Size

    InnoDB Buffer Pool主要是用来缓存数据表和索引数据的内存区域,它的默认值为134217728字节(128MB).最大值取决于CPU架构;32位系统上的最大值为4294967295(23 ...

  10. Memcached 集群架构问题归纳

    集群架构方面的问题o memcached是怎么工作的?o memcached最大的优势是什么?o memcached和MySQL的query cache相比,有什么优缺点?o memcached和服务 ...