threeJS如何修改已经生成的Geometry的长宽高?

我写了以下函数,目的是想创建面片,把图片作为面片的贴图放进场景里,现在想让面片能在图片加载成功后自动更新长宽,但是怎么都修改不了。我又不想异步创建面片...


function createPeace(img) {
    var mesh,
        geometry = new THREE.PlaneGeometry( 1, 1 );

    var texture = new THREE.TextureLoader().load( "models/20nian.png" ,function (texture) {
        //贴图加载成功后想修改之前创建的 geometry 的宽高,而不想修改 
        var i = texture.image;
        geometry.parameters.width = i.naturalWidth/400;
        geometry.parameters.height = 3;
        console.log(geometry);
    });
    var material = new THREE.MeshBasicMaterial( {
        color: 0xffff00,
        side: THREE.DoubleSide,
        map:texture
    });
    mesh = new THREE.Mesh( geometry, material );
    mesh.lookAt(new THREE.Vector3(0,0,0));
    return mesh;
}
阅读 11.3k
2 个回答

不能修改geometry的尺寸,应该修改mesh的尺寸,mesh才是实体。

function createPeace(img) {
    var mesh,
        geometry = new THREE.PlaneGeometry( 1, 1 );

    var texture = new THREE.TextureLoader().load( "models/20nian.png" ,function (texture) {
        //贴图加载成功后想修改之前创建的 geometry 的宽高,而不想修改 
        var i = texture.image;
       // geometry.parameters.width = i.naturalWidth/400;
       // geometry.parameters.height = 3;
       // console.log(geometry);
       // geometry只是模型,mesh才是实体
       mesh.scale.set(1 || your need, 1 || your need, 1 || your need); //mesh.scale.set(x轴方向的缩放倍数, y轴方向的缩放倍数, z轴方向的缩放倍数);
    });
    var material = new THREE.MeshBasicMaterial( {
        color: 0xffff00,
        side: THREE.DoubleSide,
        map:texture
    });
    mesh = new THREE.Mesh( geometry, material );
    mesh.lookAt(new THREE.Vector3(0,0,0));
    return mesh;
}
  1. 需要对BoxGeomerty 进行修改。把计算顶点相关的方法抽取出来。
    2.image.png
  2. 在动画的地方 不断修改 值,并调用方法:
  3. image.png
    5。
    image.png

要修改的地方不少,总之就是要达到更新 WebGLBuffer的目的

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题