[英]Morphing Geometry - Three.Js
So I have this code that will generate the user's desired dimension and display it on a customized new THREE.Geometry()
. 因此,我有这段代码,它将生成用户所需的尺寸并将其显示在自定义的
new THREE.Geometry()
。 This may be an off topic to most of you. 对于大多数人来说,这可能是个话题。 But hey, I'm just new to Three.js
但是,嘿,我是Three.js的新手
My problem is that: 我的问题是:
geometry.morphTargets
. geometry.morphTargets
。 Or simply, I don't know how to use it properly So here's my code: 所以这是我的代码:
//custom Object height and width
customHeightWidth(customWidth, customHeight);
function customHeightWidth(width, height){
material = new THREE.MeshBasicMaterial({
map: THREE.ImageUtils.loadTexture(uploadedFile),
side: THREE.DoubleSide,
overdraw: true,
wireframe: false
});
//objects
combined = new THREE.PlaneGeometry(width, height, 30, 10);
geometry = new THREE.Geometry();
geometry.name: "target1", vertices.push( new THREE.Vector3( -(width), height, 0 ) );
geometry.name: "target2", vertices.push( new THREE.Vector3( -(width), -(height), 0 ) );
geometry.name: "target3", vertices.push( new THREE.Vector3( width, -(height), 0 ) );
geometry.computeBoundingSphere();
geometry.faces.push( new THREE.Face3( 0, 1, 2 ) );
geometry1 = new THREE.Geometry();
geometry1.vertices.push( new THREE.Vector3( width, height, 0 ) );
geometry1.vertices.push( new THREE.Vector3( -(width), height, 0 ) );
geometry1.vertices.push( new THREE.Vector3( width, -(height), 0 ) );
geometry1.computeBoundingSphere();
geometry1.faces.push( new THREE.Face3( 0, 1, 2 ) );
// 1st box
var mesh1 = new THREE.Mesh(geometry);
var mesh2 = new THREE.Mesh(geometry1);
//activating the meshs
THREE.GeometryUtils.merge(combined, mesh1);
THREE.GeometryUtils.merge(combined, mesh2);
mesh = new THREE.Mesh(combined, material);
this.scene.add(mesh);
};
}
var animate = function() {
requestAnimationFrame(animate);
//mesh.rotation.x += 0.01;
//mesh.rotation.y -= 0.006;
renderer.render(scene, camera);
}
init();
animate();
I recommend reviewing how JSONLoader loads morph targets to the Geometry.morphTargets array in the Geometry class. 我建议回顾一下JSONLoader如何将变形目标加载到Geometry类中的Geometry.morphTargets数组中。
function parseMorphing( scale ) {
if ( json.morphTargets !== undefined ) {
var i, l, v, vl, dstVertices, srcVertices;
for ( i = 0, l = json.morphTargets.length; i < l; i ++ ) {
geometry.morphTargets[ i ] = {};
geometry.morphTargets[ i ].name = json.morphTargets[ i ].name;
geometry.morphTargets[ i ].vertices = [];
dstVertices = geometry.morphTargets[ i ].vertices;
srcVertices = json.morphTargets [ i ].vertices;
for( v = 0, vl = srcVertices.length; v < vl; v += 3 ) {
var vertex = new THREE.Vector3();
vertex.x = srcVertices[ v ] * scale;
vertex.y = srcVertices[ v + 1 ] * scale;
vertex.z = srcVertices[ v + 2 ] * scale;
dstVertices.push( vertex );
}
}
}
//Reading morphTargets //读取morphTargets
for(i=o;i<geometry.morphTargets.length;i++) {
morphTargets = geometry.morphTargets[i].vertices;
return morphTargets;
}
//loading morphTargets //加载morphTargets
loadMorphTargets = function (morphTargets) {
if (morphTargets !== undefined) {
var i, l, v, vl, dstVertices, srcVertices;
//for (i = 0, l = morphTargets.length; i < l; i++) {
geometry.morphTargets[i] = {};
geometry.morphTargets[i].name = morphTargets.name;
geometry.morphTargets[i].vertices = [];
var dstVertices = geometry.morphTargets[i].vertices;
var srcVertices = morphTargets.vertices;
for (v = 0, vl = srcVertices.length; v < vl; v += 3) {
var vertex = new THREE.Vector3();
vertex.x = srcVertices[ v ];
vertex.y = srcVertices[ v + 1 ];
vertex.z = srcVertices[ v + 2 ];
dstVertices.push(vertex);
}
}
};
I guess it will be useful to you. 我想它将对您有用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.