3 .js网格动画和纹理映射
Three.js Mesh animation and texture mapping
我做了一些研究,学习如何将obj文件导出为.js文件,可以通过Three.js的JSON模型导入。但是你怎样才能使这样的模型动画化呢?我有一个鸟模型在。js格式,我需要学会拍打它的翅膀。此外,当我从互联网上下载的obj文件,因为它是免费的模型,它也包含纹理图像的对象,但当我在3d建模软件Blender 3d中导入obj,它不能加载纹理,但它有位置在obj文件内,当我从文本编辑器打开它。当我将其转换为。js格式时,它也有正确的位置定位到bmp图像的纹理映射,但当我在webgl中加载模型时,使用JSON模型无法加载。
有没有人能告诉我正确的方向,从哪里我可以学到所有这些想法,这将是伟大的,如果你知道并帮助我马上回答。拜托,我需要你们的帮助。
Js模型文件代码{
"metadata" :
{
"formatVersion" : 3,
"generatedBy" : "Blender 2.66 Exporter",
"vertices" : 2652,
"faces" : 4798,
"normals" : 2652,
"colors" : 0,
"uvs" : [1202],
"materials" : 4,
"morphTargets" : 0,
"bones" : 0
},
"scale" : 1.000000,
"materials" : [ {
"DbgColor" : 15658734,
"DbgIndex" : 0,
"DbgName" : "_5___Default0",
"blending" : "NormalBlending",
"colorAmbient" : [0.800000011920929, 0.800000011920929, 0.800000011920929],
"colorDiffuse" : [0.800000011920929, 0.800000011920929, 0.800000011920929],
"colorSpecular" : [0.8999999761581421, 0.8999999761581421, 0.8999999761581421],
"depthTest" : true,
"depthWrite" : true,
"mapDiffuse" : "n-201.bmp",
"mapDiffuseWrap" : ["repeat", "repeat"],
"shading" : "Lambert",
"specularCoef" : 2,
"transparency" : 1.0,
"transparent" : false,
"vertexColors" : false
},
{
"DbgColor" : 15597568,
"DbgIndex" : 1,
"DbgName" : "_5___Default1",
"blending" : "NormalBlending",
"colorAmbient" : [0.800000011920929, 0.800000011920929, 0.800000011920929],
"colorDiffuse" : [0.800000011920929, 0.800000011920929, 0.800000011920929],
"colorSpecular" : [0.8999999761581421, 0.8999999761581421, 0.8999999761581421],
"depthTest" : true,
"depthWrite" : true,
"mapDiffuse" : "n-200.bmp",
"mapDiffuseWrap" : ["repeat", "repeat"],
"shading" : "Lambert",
"specularCoef" : 2,
"transparency" : 1.0,
"transparent" : false,
"vertexColors" : false
},
{
"DbgColor" : 60928,
"DbgIndex" : 2,
"DbgName" : "_5___Default2",
"blending" : "NormalBlending",
"colorAmbient" : [0.800000011920929, 0.800000011920929, 0.800000011920929],
"colorDiffuse" : [0.800000011920929, 0.800000011920929, 0.800000011920929],
"colorSpecular" : [0.8999999761581421, 0.8999999761581421, 0.8999999761581421],
"depthTest" : true,
"depthWrite" : true,
"mapDiffuse" : "n-202.bmp",
"mapDiffuseWrap" : ["repeat", "repeat"],
"shading" : "Lambert",
"specularCoef" : 2,
"transparency" : 1.0,
"transparent" : false,
"vertexColors" : false
},
{
"DbgColor" : 238,
"DbgIndex" : 3,
"DbgName" : "_5___Default",
"blending" : "NormalBlending",
"colorAmbient" : [0.800000011920929, 0.800000011920929, 0.800000011920929],
"colorDiffuse" : [0.800000011920929, 0.800000011920929, 0.800000011920929],
"colorSpecular" : [0.8999999761581421, 0.8999999761581421, 0.8999999761581421],
"depthTest" : true,
"depthWrite" : true,
"mapDiffuse" : "n-203.bmp",
"mapDiffuseWrap" : ["repeat", "repeat"],
"shading" : "Lambert",
"specularCoef" : 2,
"transparency" : 1.0,
"transparent" : false,
"vertexColors" : false
},
{
"DbgColor" : 15658496,
"DbgIndex" : 4,
"DbgName" : "_5___Default0",
"blending" : "NormalBlending",
"colorAmbient" : [0.800000011920929, 0.800000011920929, 0.800000011920929],
"colorDiffuse" : [0.800000011920929, 0.800000011920929, 0.800000011920929],
"colorSpecular" : [0.8999999761581421, 0.8999999761581421, 0.8999999761581421],
"depthTest" : true,
"depthWrite" : true,
"mapDiffuse" : "n-201.bmp",
"mapDiffuseWrap" : ["repeat", "repeat"],
"shading" : "Lambert",
"specularCoef" : 2,
"transparency" : 1.0,
"transparent" : false,
"vertexColors" : false
},
{
"DbgColor" : 61166,
"DbgIndex" : 5,
"DbgName" : "_5___Default1",
"blending" : "NormalBlending",
"colorAmbient" : [0.800000011920929, 0.800000011920929, 0.800000011920929],
"colorDiffuse" : [0.800000011920929, 0.800000011920929, 0.800000011920929],
"colorSpecular" : [0.8999999761581421, 0.8999999761581421, 0.8999999761581421],
"depthTest" : true,
"depthWrite" : true,
"mapDiffuse" : "n-200.bmp",
"mapDiffuseWrap" : ["repeat", "repeat"],
"shading" : "Lambert",
"specularCoef" : 2,
"transparency" : 1.0,
"transparent" : false,
"vertexColors" : false
},
{
"DbgColor" : 15597806,
"DbgIndex" : 6,
"DbgName" : "_5___Default2",
"blending" : "NormalBlending",
"colorAmbient" : [0.800000011920929, 0.800000011920929, 0.800000011920929],
"colorDiffuse" : [0.800000011920929, 0.800000011920929, 0.800000011920929],
"colorSpecular" : [0.8999999761581421, 0.8999999761581421, 0.8999999761581421],
"depthTest" : true,
"depthWrite" : true,
"mapDiffuse" : "n-202.bmp",
"mapDiffuseWrap" : ["repeat", "repeat"],
"shading" : "Lambert",
"specularCoef" : 2,
"transparency" : 1.0,
"transparent" : false,
"vertexColors" : false
},
{
"DbgColor" : 419610,
"DbgIndex" : 7,
"DbgName" : "_5___Default",
"blending" : "NormalBlending",
"colorAmbient" : [0.800000011920929, 0.800000011920929, 0.800000011920929],
"colorDiffuse" : [0.800000011920929, 0.800000011920929, 0.800000011920929],
"colorSpecular" : [0.8999999761581421, 0.8999999761581421, 0.8999999761581421],
"depthTest" : true,
"depthWrite" : true,
"mapDiffuse" : "n-203.bmp",
"mapDiffuseWrap" : ["repeat", "repeat"],
"shading" : "Lambert",
"specularCoef" : 2,
"transparency" : 1.0,
"transparent" : false,
"vertexColors" : false
}],
看这里
http://threejs.org/examples/webgl_morphnormals.htmlhttp://threejs.org/examples/webgl_morphtargets_horse.html
在第一个例子中看这里,第90行
var loader = new THREE.JSONLoader();
loader.load( "models/animated/flamingo.js", function( geometry ) {
morphColorsToFaceColors( geometry );
geometry.computeMorphNormals();
var material = new THREE.MeshLambertMaterial( { color: 0xffffff, morphTargets: true, morphNormals: true, vertexColors: THREE.FaceColors, shading: THREE.FlatShading } );
var meshAnim = new THREE.MorphAnimMesh( geometry, material );
meshAnim.duration = 5000;
meshAnim.scale.set( 1.5, 1.5, 1.5 );
meshAnim.position.y = 150;
scene1.add( meshAnim );
morphs.push( meshAnim );
} );
相关文章:
- 如何设置html元素填充的动画
- 如何在映射数组中添加换行符
- 如何使用动画实现纸张推车
- 如何在生成下载文件时显示加载动画
- 剑道网格jQuery动画()问题
- EaseJS拖放;放下(动画CC)电影剪辑的鼠标坐标
- ng映射方向备选方案
- 无法通过数组映射绑定
- jQuery Lazy加载动画滚动
- 开始使用javascript中的动画排版/粒子(将粒子映射到单词)
- Webgl 动画纹理性能与画布绘制图像性能
- 三.js - ColladaLoader - 动画模型 (DAE) - 黑色纹理
- 在WebGL中使用ppm文件进行纹理映射
- 在three.js中渲染一个带有纹理的动画fbx模型
- 3 .js网格动画和纹理映射
- 使用three.js进行纹理映射
- 画布快速纹理映射
- 将iframe映射为纹理-three.js
- 纹理加载错误(JS动画)
- 三个画布纹理不映射到整个SphereMesh