&>&&>&&>&&>&three.js加载坦克3D模型源码实例
three.js加载坦克3D模型源码实例
上传大小：1.29MB
three.js加载坦克3D模型obj文件，并实现光照，旋转等功能。含所有必须的js文件及坦克obj模型文件。
综合评分：3.9（47位用户评分）
所需积分：1
下载次数：710
审核通过送C币
创建者：asiacren
创建者：guo8ke
创建者：guo8ke
课程推荐相关知识库
上传者其他资源上传者专辑
开发技术热门标签
VIP会员动态
您因违反CSDN下载频道规则而被锁定帐户，如有疑问，请联络:!
android服务器底层网络模块的设计方法
所需积分：0
剩余积分：720
您当前C币：0
可兑换下载积分：0
兑换下载分：
兑换失败，您当前C币不够，请先充值C币
消耗C币：0
你当前的下载分为234。
three.js加载坦克3D模型源码实例
会员到期时间：剩余下载次数：
你还不是VIP会员
开通VIP会员权限，免积分下载
你下载资源过于频繁，请输入验证码
您因违反CSDN下载频道规则而被锁定帐户，如有疑问，请联络:!
若举报审核通过，可奖励20下载分
被举报人：
举报的资源分：
请选择类型
资源无法下载
资源无法使用
标题与实际内容不符
含有危害国家安全内容
含有反动色情等内容
含广告内容
版权问题，侵犯个人或公司的版权
*详细原因：> 运用Three.js 绘制3D模型
运用Three.js 绘制3D模型
ihwkqq & &
发布时间： & &
浏览：15 & &
回复：0 & &
悬赏：0.0希赛币
使用Three.js 绘制3D模型
关于Three.js
一. 获取THREE.js
three.js的代码托管在github上面，
我们可以用git来获取代码，闲麻烦的话也可以直接下载zip文件。
二. 目录结构
拿到代码后先看下three.js的目录结构
|-build
|-custom
|-Three.js
|-examples
|-cameras
|-core
|-extras
|-lights
|-materials
|-objects
|-renderers
|-scenes
|-textures
|-Three.js
|-utils
|-compiler
|-exporters
|-build.bat
|-build.sh
|-build.xml
|-build_all.bat
|-build_all.sh
build目录下是源代码连接压缩过后的js文件，而连接和压缩源代码的工具放在utils目录下，在utils目录下还有一个exporters目录，是各种模型导出工具，插件，有blender和max的导出插件，还有把fbx转成THREE.js场景文件的python脚本。
examples目录下都是three.js的示例，值得一提的是，里面有很多实用的shader脚本和js脚本可以拿来在自己的项目里用，比如js/ShaderExtra.js提供了很多现成的shader代码，js/postprocessing下提供了封装起来的几种常用的后处理的接口
gui下面是一些封装后的ui接口
src当然就是重头戏了，three.js的源代码都在这个目录下，src里下的各个子目录也很好的体现了three.js的构成，像camera，light，object这些都是一个场景（scene）的基础对象，而scenes下面则是对整个场景的管理代码，像scene graph的实现，renderers下是核心渲染器的实现，three.js对于场景和渲染器分离的还不错，可以用不同的renderer渲染同一个场景，当然对于一些WebGL支持的高级特性，使用其它的renderer肯定是不行的。还有一个extras目录是在核心代码之上的一些未程序提供便利的接口，比如提供了一些常用的camera，material，light。
utils目录上面已提过
三. example分析 - webgl trackballcamera earth
在线地址：
examples目录下也有该示例
在这个example里我们能够看到：
一个最基本的three.js应用需要有的东西
camera的创建以及camera control的添加
基本形体的创建，材质的创建
粒子系统的创建，这个会后面讲。
这里不会逐行逐行代码的分析，而是对于每个特性挑出代码来讲。
一个three.js应用的基本结构。
不管用什么写3d应用，c++的ogre，flash的pv3d，js的o3d，又或者使用场景编辑器，一个3d场景所需要的最基本的东西都是一样的，一个主要的camera，一个主要的scene。
当然一般的场景里都会有物体，有灯光，每个物体都有材质。我们在three.js中可以一个个手动创建，也可以直接加载一个记录场景数据的json文件。
创建一个scene
scene = new THREE.Scene();
创建一个摄像机
camera = new THREE.PerspectiveCamera( 25, width / height, 50, 1e7 );
camera.position.z = radius * 7;
这段代码确定了一个摄像机的视锥，四个参数分别是摄像机的视锥角度，视口的长宽比，摄像机的近切面(Front Clipping Plane)和远切面(Back Clipping Plane)，为什么要四个参数？其实摄像机本质上就是一个投影矩阵，而建立一个透视投影的矩阵（还有正交投影）需要这四个参数，形象点可以看下图
从图中可以看到，要唯一确定一个透视的视锥(Viewing Frustum)至少需要上述的四个参数。
调整摄像机的位置和朝向
创建一个摄像机还需要摆好这个摄像机的位置和朝向，three.js里可以用camera.lookAt函数来设置摄像机的朝向，用camera.position设置摄像机的位置
这个demo里由于创建了一个实现轨迹球控制效果的TrackballControls，因此camera的变换都被封装在这里面了。
如果看lookAt的代码，其实这些操作都是矩阵的操作，摄像机本质上和一个场景中的实体无异，都是使用变换矩阵来做变换。
下面要为场景中添加一些东西了
我们可以在演示中大概看到这个场景中有一个地球，一个月球，周围的太空，还有一个一直照着地球模拟太阳的光照，如果看得仔细点，我们还会发现其实地球外面还包着一层大气层。
下面要一一在场景中添加进入这些东西
1. 首先是地球
在WebGL里创建一个object，我们需要的最基本的数据就是这个object的顶点位置，当然，如果需要这个物体能够入眼的话，我们还需要为它编写shader，需要传入顶点的法线数据，需要传入texcoord来完成纹理映射。
说到shader，我们先看下WebGL中渲染一个物体的基本顺序：
程序会先载入，编译和绑定shader代码，每个渲染批次，显卡都会将这些顶点数据传入流水线，在流水线中会通过Vertex Shader进行顶点位置的变换，光栅化，Fragment Shader中对每个像素计算颜色，最后深度测试等等后输出到屏幕。
THREE.js中将物体顶点数据的管理封装成为geometry接口，将shader和shader中参数的管理封装成为material接口，每次编译加载绑定shader，传入顶点数据都会在WebGLRenderer中统一处理。
var materialNormalMap = new THREE.ShaderMaterial({
fragmentShader: shader.fragmentShader,
vertexShader: shader.vertexShader,
uniforms: uniforms,
lights: true });
这里便是创建了一个材质,传入了fragmentShader和vertexShader的代码，uniforms是这两个shader里的参数。
这两个都是可以拿来主义的
var shader = THREE.ShaderUtils.lib[ "normal" ],
uniforms = THREE.UniformsUtils.clone( shader.uniforms );
uniforms[ "tNormal" ].texture = normalT
uniforms[ "uNormalScale" ].value = 0.85;
uniforms[ "tDiffuse" ].texture = planetT
uniforms[ "tSpecular" ].texture = specularT
uniforms[ "enableAO" ].value =
uniforms[ "enableDiffuse" ].value =
uniforms[ "enableSpecular" ].value =
uniforms[ "uDiffuseColor" ].value.setHex( 0xffffff );
uniforms[ "uSpecularColor" ].value.setHex( 0x333333 );
uniforms[ "uAmbientColor" ].value.setHex( 0x000000 );
uniforms[ "uShininess" ].value = 15;
于是这里创建了一个法线贴图的材质（关于法线贴图的原理，这里先不多讲），并且设置好了它的各个参数，其中tNnormal是法线纹理，tDiffuse是漫反射纹理，tSpecular是高光纹理，
tDiffuse，tSpecular和tNormal
uDiffuseColor, uSpecularColor, uAmbientColor, uShininess这四个是Phong模型光照的参数，
uDiffuseColor：漫反射颜色
uSpecularColor：高光颜色
uAmbientColor:环境光颜色
uShininess：物体表面光滑度
下面这段便是创建这个地球本身了，并且加入到场景里面
geometry = new THREE.SphereGeometry( radius, 100, 50 );
puteTangents();
meshPlanet = new THREE.Mesh( geometry, materialNormalMap );
meshPlanet.rotation.y = 1.3;
meshPlanet.rotation.z =
scene.add( meshPlanet );
最后看一下这个添加到scene里的Mesh的组成图
2. 建月球和云层也是依法炮制，云层因为是png格式所以有半透明效果。
3. 创建平行光
创建一个光照是很简单的，tree.js的灯光对象主要就是保存灯光参数的作用，而光照的实际计算是放在shader里，我们暂时不用关心
dirLight = new THREE.DirectionalLight( 0xFFFFFF );
dirLight.position.set( -1, 0, 1 ).normalize();
scene.add( dirLight );
场景的互动
sample中我们可以使用鼠标控制摄像机的旋转，three.js为我们提供一些常用的摄像机控制接口，这个sample里用的是轨迹球
controls = new THREE.TrackballControls( camera, renderer.domElement );
controls.rotateSpeed = 1.0;
controls.zoomSpeed = 1.2;
controls.panSpeed = 0.2;
controls.noZoom =
controls.noPan =
controls.staticMoving =
controls.dynamicDampingFactor = 0.3;
controls.minDistance = radius * 1.1;
controls.maxDistance = radius * 100;
我们可以在src/extras/controls下面看到几个常用的摄像机控制
我们最后来看看render函数里的代码
var t = new Date().getTime(),
dt = ( t - time ) / 1000;
meshPlanet.rotation.y += rotationSpeed *
meshClouds.rotation.y += 1.25 * rotationSpeed *var angle = dt * rotationS
meshMoon.position = new THREE.Vector3(
Math.cos( angle ) * meshMoon.position.x - Math.sin( angle ) * meshMoon.position.z,
Math.sin( angle ) * meshMoon.position.x + Math.cos( angle ) * meshMoon.position.z
meshMoon.rotation.y -=
controls.update();
renderer.clear();
renderer.render( scene, camera );
这个函数主要做了每一帧都要做的几件事：
计算这一帧的时间
计算月球位置
更新摄像机控制
最后render函数里需要两个参数，scene和camera，我们如果看下render里的代码话就可以知道，每次render的时候，都需要遍历一遍scene graph，渲染里面每个需要渲染的对象，而摄像机的作用就只是提供一个视角变换矩阵和投影矩阵。这个以后看WebGLRenderer里的代码的时候会继续深入。
这个函数会使用setInterval定时调用，来实现动画的效果。
--------------------------------------------------------------------
在我们目前的3D世界当中至少包括以下几点基础的东西。一： 一个场景二： 一个渲染器
三： 一个摄像机四： 一个对象或者至少两个材质当然你也可以做很多的东西，很多非常疯狂的东西，只要很有足够的想象力，那么就开始你的3D开发，做出很多很炫的WebGL作品吧。2： 支持开发WebGL需要浏览器的大力支持，google的chrome是我在做demo的时候常用的浏览器，个人感觉还是不错的。支持webgl的渲染并且在javascript上速度还是不错的还有一些潜在的javascript引擎。Chrome全部支持canvas，webgl，svg这一块。火狐个人觉得排名第二那么google就肯定第一了，并且是火狐4的版本。火狐的javascript引擎似乎还是比google的chrome慢些，但是在渲染的支持上还是很强的。Opear和Safari也支持webgl，但是他们当前的版本只支持canvas渲染，IE9也只支持canvas渲染，到目前为止还没有听到微软说全面支持webgl的消息，担忧啊。3：设置场景（Scene）这一步我想你肯定已经选好了一个可以渲染WebGL的浏览器了，并且选好了你要使用的渲染方式了canvas，因为canvas还是比较标准些。Canvas不只是支持WebGL，还有更多的支持。不过，WebGL运行在你cpu的图形卡上，这样就意味着你的cpu可以专心的做别的事，而不需要为webgl渲染而担心，这就叫做硬件加速渲染。无论你选择什么样的渲染机制，但是你需要记住的就是javascript需要很好的优化性能，因为3D对于浏览器来说还是很大的渲染，所以在你的javascript代码中尽量减少浏览器的压力，优化优化再优化你的javascript代码。那么这样的话，你可以下载you have downloadedThreeJS的多有js文件在你的电脑中，那么先看看如何着手建立一个Threejs的场景，看下面代码行：// set the scene sizevar WIDTH = 400,
HEIGHT = 300;// 设置相机的属性svar VIEW_ANGLE = 45,
ASPECT = WIDTH / HEIGHT,
NEAR = 0.1,
FAR = 10000;// 得到dom的元素// - 假设我们有jquery的开发经验var $container = $('#container');// 创建一个WebGL的渲染器和摄像机和一个场景var renderer = new THREE.WebGLRenderer();var camera = new THREE.Camera( VIEW_ANGLE,
ASPECT,
NEAR,
FAR );var scene = new THREE.Scene();// 摄像机从 0,0,0开始 ，因此默认原点，需要时回滚//设置摄像机z坐标位置距离原点向外300camera.position.z = 300;// 开始渲染renderer.setSize(WIDTH, HEIGHT);// 加载dom的元素$container.append(renderer.domElement);看起来挺简单的，不是很难。4：做一个网格模型
现在我们有一个场景，一个摄像机，一个渲染器，但是我们需要画一个实体。实际上Three.js可以加载很多格式的3D文件，你的模型文件可以来自Blender，Maya，Chinema4D，3DMax等等。现在我们要做的是一个网格的元素，相对比较基础的东西(球体)Spheres, (平面)Planes,(立方体) Cubes ， (圆柱体)Cylinders。Three.js创建这些物体会非常的容易。//定义球体var radius = 50, segments = 16, rings = 16;// 创建一个新的网格球体几何学 -// 在下一节我们将要涉及到sphereMaterial var sphere = new THREE.Mesh(
new Sphere(radius, segments, rings),
sphereMaterial);// 添加球体到场景scene.addChild(sphere);好了！但是我们的这个球体没有材质。在代码中我们使用了一个变量sphereMaterial，但是我们还没有对他进行定义。首先我们需要做的是对球体的材质进行描述。5：材质（Materials）毫无疑问这在Three.Js中是很重要的一部分，因为Three.js可以让你很方便的实现你的网格效果。
3：多面还有很多很多，现在我只介绍这些，剩下的由你自己去发现。但是你必须写在WebGL的着色器上，着色器是一个很庞大的东西，但是你可以使用GLSL(OpenGL的着色语言)。这就需要你用数学来实现模拟的灯光，这样会很复杂。但是多亏了Three.js，你可以不需要在做那样的数学计算了，如果你想写关于阴影的那么你可以使用MeshShaderMaterial来实现，所以这是一个很活泛的设置。// 创建一个球体的材质var sphereMaterial = new THREE.MeshLambertMaterial({
color: 0xCC0000});你也可以创建一个其他的材质，除了颜色，比如平滑或者环境的地图。你可以看看这个页面check out the Wiki page，看看你还可以创建什么材质，实际上任何一个引擎都会提供给你的。6：灯(Lights)如果你按照上面的实现，那么你现在可以看到一个空色的圆球。但是我们现在有材质却没有光，Three.js默认的是全环境的光，那么我们需要把这些光修理的好点。// 创建一个光的源点var pointLight = new THREE.PointLight( 0xFFFFFF );// 设置光源点位置pointLight.position.x = 10;pointLight.position.y = 50;pointLight.position.z = 130;// 添加到场景scene.addLight(pointLight);7：循环渲染现在我们大概算是有一些渲染了，但是我们需要这样做：// 绘画!renderer.render(scene, camera);我们渲染但不一定只是一次，所以如果你想循环渲染，那么你就需要好好的利用requestAnimationFrame这个js类，这是在浏览器中处理动画迄今为止最先进的js代码，但是到目前为止还不是完全支持，所以推介你看看 Paul Irish's shim.。
// 设置回滚时间
window.requestAnimFrame = (function(){
return window.requestAnimationFrame
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame
window.oRequestAnimationFrame
window.msRequestAnimationFrame
function(/* function */ callback, /* DOMElement */ element){
window.setTimeout(callback, 1000 / 60);
};
// 插入setInterval(render, 16) ....
(function animloop(){
requestAnimFrame(animloop, element);
})();效果：代码：// requestAnim shim layer by Paul Irish
window.requestAnimFrame = (function(){
return window.requestAnimationFrame
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame
window.oRequestAnimationFrame
window.msRequestAnimationFrame
function(/* function */ callback, /* DOMElement */ element){
window.setTimeout(callback, 1000 / 60);
};
})();// example code from mr doob : var canvas,init();animate();function init() {
canvas = document.createElement( 'canvas' );
canvas.width = 256;
canvas.height = 256;
context = canvas.getContext( '2d' );
document.body.appendChild( canvas );}function animate() {
requestAnimFrame( animate );
draw();}function draw() {
var time = new Date().getTime() * 0.002;
var x = Math.sin( time ) * 96 + 128;
var y = Math.cos( time * 0.9 ) * 96 + 128;
context.fillStyle = 'rgb(245,245,245)';
context.fillRect( 0, 0, 255, 255 );
context.fillStyle = 'rgb(255,0,0)';
context.beginPath();
context.arc( x, y, 10, 0, Math.PI * 2, true );
context.closePath();
context.fill();}8常见的对象的特性如果你花时间看代码的话，你会看到很多Three.js继承的Object3D的对象，这是一个很基础的对象，包含很多非常有用的特征，位置，旋转，大小的信息。特别的是我们的网格也是继承与Object3D，他加了自己的一些特性：材质和几何。你想知道为什么我会说到这里，那么你想画一个球体在你的web上什么都不做吗？这些特征的存在值得你去研究，因为他们允许你去操作潜在的材质和网格划分。// 几何球面sphere.geometry// 包含顶点和面sphere.geometry.vertices // 数组sphere.geometry.faces // 以数组形式// 位置sphere.position // 包括x，y，z三个属性sphere.rotation // 包括x，y，z三个属性sphere.scale // 包括x，y，z三个属性9：一个小的更改在顶点这里我们需要做个更改，你尝试更改你的顶点数据，但是你会发现你的渲染一点没有改变，这是为什么呢 因为Three.js是一向很复杂的优化，你只需要更换其中的一个方法就可以，// 改变顶点sphere.geometry.__dirtyVertices =// 改变法线sphere.geometry.__dirtyNormals =
--------------------------------------
&a $>$/a&
本问题标题：
本问题地址：
温馨提示：本问题已经关闭，不能解答。
暂无合适的专家
&&&&&&&&&&&&&&&
希赛网 版权所有 & &&6016人阅读
javaWeb（9）
开源框架（12）
javascript
最近项目中用到室外三维模型与室内三维地图交互，室外三维模型的加载我们采用了cesium js来实现,在使用的过程中遇到了许多的问题，闲暇之余将其实现及遇到的问题记录下来，以备将来再用到时少走弯路。
一、开发环境准备
1、下载cesium js
cesium js 下载地址
下载完成解压后的目录如下图
2.打开cmd命令行进入到cesium的安装目录，执行npm install(需要安装nodejs及npm),该命令执行完会在cesium根目录下创建node_modules目录，如下图
安装gulp作为项目开发的依赖，如下图
gulp安装之后会在node_modules目录中创建执行gulp命令所需要的依赖包，如下图
3.下载mds max插件OpenCOLLADA Tools,下载地址
(根据系统要求下载32位或64位)。
4.下载collada2gltf 工具,下载地址，此工具用来将dae格式文件转换为gltf格式，下载完解压后的目录如下图
二、编译cesiumjs
在cesium根目录执行gulp default命令，将会在cesiumjs安装的根目录创建一个Build文件夹，里面包含的是编译后生成的cesium.js文件及相关组件。
编译后的Build目录包含小部件、第三方依赖库及离线地图数据等
三、用cesium js库开发，加载三维模型
1.将Build目录中的所有文件及目录拷贝到项目中
2.将3ds max中的三维模型数据导出成dae格式，如图
导出的类型需要选择OpenCollada(*.dae)，如果导出的模型存在透明贴图，导出时不要勾选相对路径，导出后会生成一个images目录，该目录中的图片是模型中所需要的贴图及纹理图。
3.将dae格式文件转换成gltf文件，打CMD命令行，进入到collada2gltf的根目录，执行collada2gltf.exe -f
E:\xykjc\Model\zhulou.dae -e，
-f表示dae文件的完成路径，collada2gltf支持两种转换方式，-e及-o，-e转换后只生成一个文件(gltf文件)，在模型比较大时我们可将模型与纹理贴图分开加载，这时可用-o命令进行转换，转换后会生成.gltf、.bin及.glsl三种格式的文件(注意：在max中导出模型时不能选择相对路径，如果选中了相对路径，-o转换的gltf模型文件加载出来会变成黑色)
4.将生成gltf文件及纹理贴图拷贝到项目中
5.导入cesium.js及widgets.css
//创建cesium Viewer
viewer = new Cesium.Viewer(‘cesiumContainer’,{
//是否创建动画小器件，左下角仪表
animation:false,
//是否显示图层选择器
baseLayerPicker:false,
//是否显示全屏按钮
fullscreenButton:false,
//是否显示geocoder小器件，右上角查询按钮
geocoder:false,
//是否显示Home按钮
homeButton:false,
//是否显示信息框
infoBox : false,
//是否显示3D/2D选择器
sceneModePicker:false,
//是否显示选取指示器组件
selectionIndicator : false ,
//是否显示时间轴
timeline:false,
//是否显示右上角的帮助按钮
navigationHelpButton:false,
//如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
scene3DOnly : true,
navigationInstructionsInitiallyVisible:false,
showRenderLoopErrors:false,
//加载自定义地图瓦片需要指定一个自定义图片服务器 例如指定OpenStreetMapImagerProvider
//URL 为瓦片数据服务器地址
imageryProvider : new Cesium.OpenStreetMapImageryProvider({
url : ‘//a.tile.openstreetmap.org/’
/* targetFrameRate:1,sceneMode:Cesium.SceneMode.SCENE2D,
imageryProvider:new Cesium.WebMapServiceImageryProvider(),
mapProjection : new Cesium.WebMercatorProjection() */
*创建模型entity,加载gltf文件
*@id 模型ID
*@url 3d模型URL路径
*@height 高度
*@lon 模型所在经度
*@lat 模型所在纬度
function createModel(id,url,height,lon,lat){
//删除视图上所有的实体
//viewer.entities.removeAll();
//实体的位置(经度、纬度、)
var position = Cesium.Cartesian3.fromDegrees(lon, lat, height);
var heading = Cesium.Math.toRadians(0);
var pitch = Cesium.Math.toRadians(0.0);
var roll = 0.0;
var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, heading, pitch, roll);
var entity = viewer.entities.add({
//coordinates : rectangle,
fill : false,
outline : true,
outlineColor : Cesium.Color.WHITE,
name : url,
position : position,
orientation : orientation,
uri : url,
//minimumPixelSize : 100,
maximumScale : 20000
//viewer.trackedEntity =
viewer.entities.removeAll();
createModel(‘ground’,’ModelData/zhulou.gltf’,0,112..138933);
在html的body标签中添加&div id="cesiumContainer"&&/div&
运行的效果图如下
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：312233次
积分：2907
积分：2907
排名：第11737名
原创：42篇
转载：19篇
评论：59条
(2)(1)(1)(1)(1)(10)(5)(2)(2)(13)(2)(9)(11)(2)(1)
