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. css背景精华所在+前端页面开发流程

    background属性 background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图片和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项: ...

  2. rimraf命令 递归删除目录所有文件

    使用webpack build文件项目时每次都会生成一个dist目录,有时需要把dist目录里的所以旧文件全部删掉, 除了可以使用rm -rf /dist/命令删除外,还可以使用rimraf /dis ...

  3. [SDOI2010]Hide and Seek

    题目 非常显然就是求一下距离每一个点曼哈顿距离最近的点和最远的点就好了 最远点非常好算,我们建完\(kd-tree\)之后直接暴力就好了 找最近点的时候会有这样一个问题,就是自己找到了自己 所以我们需 ...

  4. Golang - 数据库操作

    1. 下载安装包 go get github.com/Go-SQL-Driver/MySQL go install github.com/Go-SQL-Driver/MySQL 2. 连接池 This ...

  5. 【转】Android SDK,ADT,API 版本的对应关系

    写对应关系之前,先了解一下几个名字的含义. 一. Android ADT: 按照官方网站的开发介绍:Android Development Tools (ADT) is a plugin for th ...

  6. jQuery页面滚动数字增长插件

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. 第三部分 OpenStack镜像管理

    一.简介 很多源都有为OpenStack已经编译好的各种镜像了,您可以直接下载并通过使用这些镜像来熟悉OpenStack. 不过如果是为生产环境进行部署的话,您一定需要构建含有定制软件或配置的镜像文件 ...

  8. 内存，缓存，cpu，硬盘关系

    RAM(random access memory)即随机存储内存,这种存储器在断电时将丢失其存储内容,故主要用于存储短时间使用的程序.我把它叫耗电存储器 ROM(Read-Only Memory)即只 ...

  9. python为什么叫胶水语言？python为什么是系统脚本？

    python为什么叫胶水语言?python为什么是系统脚本?   特点是什么? python现在最广为闻名的形容大概有这些: 他是很好的胶水语言.什么是胶水语言?反正当时的我不知道. 他是新一代的系统 ...

  10. Kafka集群配置

    kafka_2.11-0.9.0.1.tgz 1.进入项目前的目录 cd /home/dongshanxia mkdir kafka #创建项目目录 cd kafka #进入项目目录 mkdir ka ...