6.把建模工具导出的dea文件导入到three.js程序中
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程序中的更多相关文章
- [转载]将别人的项目或JAVA文件导入到自己的Eclipse中时,常常会出现JAVA文件的中文注释变成乱码的情况,解决办法
eclipse 代码中文注释乱码 求解决 将别人的项目或JAVA文件导入到自己的Eclipse中时,常常会出现JAVA文件的中文注释变成乱码的情况,主要原因就是别人的IDE编码格式和自己的Eclips ...
- Win7-其中的文件夹或文件已在另一个程序中打开
Win7-其中的文件夹或文件已在另一个程序中打开 如何解决Win7系统在删除或移动文件时提示,“操作无法完成,因为其中的文件夹或文件已在另一个程序中打开,请关闭该文件夹或文件,然后重试”. 步骤阅 ...
- Core在IIS的热发布问题或者报错文件已在另一个程序中打开
关于Core发布到IIS的热发布问题,或者覆盖dll文件的时候会报错"文件已在另一个程序中打开",也就是无法覆盖程序的问题,经过百度和分析总结以下几种方案: 一.使用app_off ...
- SQL Server:把CSV文件导入到SQL Server表中
有时候我们可能会把CSV中的数据导入到某个数据库的表中,比如做报表分析的时候. 对于这个问题,我想一点也难不倒程序人员吧!但是要是SQL Server能够完成这个任务,岂不是更好! 对,SQL Ser ...
- 把CSV文件导入到SQL Server表中
保存数据库数据直接查询select * from tableName 在数据表格的左上角右击——将结果另存为选择路劲保存好的就是.csv格式的数据 有时候我们可能会把CSV中的数据导入到某个数据库的表 ...
- win10文件夹或文件已在另一程序中打开
我们在对文件或文件夹进行删除.移动.重命名等操作时,系统可能提示“操作无法完成,因为其中的文件夹已在另一程序中打开,请关闭该文件或文件夹,然后重试.”,遇到这种情况我们应该怎么办呢?请看下文. 方法/ ...
- powerdesigner 使用技巧 建模工具 导出sql 导出实体类 导出word
显示comment列 Table Properties(表属性)=>Columns(列)=>Customize Columns and Filter(自定义列过滤) 勾上 comment ...
- 利用PL/SQL Developer工具导出数据到excel,导入excel数据到表
使用PL/SQL Developer工具. 导出: 1.执行select 语句查询出需要导出的数据. 2.在数据列表中右键,选择save results.保存为.csv文件,然后已excel方式打开就 ...
- 如何将CAD文件导入到Protel和PADS中
一. 如何把CAD中的板框图纸导入到Protel中? a. 在CAD中单位设置为“毫米”,并做简单的处理,板框图是有合并还是分解都无所谓,另存为R12(*dxf)格式文件. b. 打开DXP,新建PC ...
随机推荐
- BZOJ 1877 晨跑 拆点费用流
题目链接: https://www.lydsy.com/JudgeOnline/problem.php?id=1877 题目大意: Elaxia最近迷恋上了空手道,他为自己设定了一套健身计划,比如俯卧 ...
- NSKeyValueObserving.m
https://github.com/farcaller/cocotron/blob/af740de86c9bee84c59ffc74d27e5df9e22e1391/Foundation/NSKey ...
- VM下,装centos7系统,配置nginx的问题
一.流程 1.先安装nginx依赖的包 (1)yum install gcc-c++ (2)yum install -y pcre pcre-devel (3)yum install -y zlib ...
- 4698. [SDOI2008]Sandy的卡片【后缀数组】
Description Sandy和Sue的热衷于收集干脆面中的卡片.然而,Sue收集卡片是因为卡片上漂亮的人物形象,而Sandy则是为了积 攒卡片兑换超炫的人物模型.每一张卡片都由一些数字进行标记, ...
- Java并发编程--3.Lock
Lock接口 它提供3个常用的锁 lock() : 获不到锁就就一直阻塞 trylock() :获不到锁就立刻放回 或者 定时的,轮询的获取锁 lockInterruptibly() : 获不到锁时阻 ...
- 最长公共子序列&最长公共子串
首先区别最长公共子串和最长公共子序列 LCS(计算机科学算法:最长公共子序列)_百度百科 最长公共子串,这个子串要求在原字符串中是连续的.而最长公共子序列则并不要求连续. 最长公共子序列: http ...
- k8s存储 pv pvc ,storageclass
1. pv pvc 现在测试 glusterfs nfs 可读可写, 多个pod绑定到同一个pvc上,可读可写. 2. storageclass 分成两种 (1) 建立pvc, 相当于多个 ...
- 创建JDBCUtils工具类
JDBCUtils工具类 私有化构造函数,外界无法直接创建对象 提供公共的,静态的,getConnection 方法,用来给外界提供数据库连接 提供公共的,静态的,close方法,用来释放资源 pac ...
- 20145203盖泽双 《Java程序设计》第四周学习总结
20145203盖泽双 <Java程序设计>第四周学习总结 教材学习内容总结 1.多个类中存在相同属性和行为时,将这些内容抽取到单独一个类中,那么多个类无需再定义这些属性和行为,只要继承单 ...
- mongodb的学习-5-概念解析
http://www.runoob.com/mongodb/mongodb-databases-documents-collections.html mongodb中基本的概念是文档.集合.数据库 S ...