用threejs拖动加载的对象？

Question

我一直在尝试让加载的对象在 threejs 中可拖动。下面的第一段代码（只是一个片段）显示了一个立方体，我可以旋转视图，但不能旋转立方体本身。

第二个代码块创建了一个可拖动的框，但我希望能够做的不仅仅是拖动框。就像拖一个茶壶一样！因此希望拖动一个加载的对象。

为什么我用threejs创建的盒子可以移动，加载的时候不能移动？我该如何解决这个问题？

代码来源于：http://threejs.org/examples/webgl_interactive_draggablecubes.html

// var geometry = new THREE.BoxGeometry( 40, 40, 40 );

var loader = new THREE.OBJLoader();
loader.load('static/obj/cube.obj', function(object) {

    // var object = new THREE.Mesh( geometry, 
                    new THREE.MeshLambertMaterial( { color: Math.random() * 0xffffff } ) );

    object.position.x = Math.random() * 100 - 50;
    object.position.y = Math.random() * 60 - 30;
    object.position.z = Math.random() * 80 - 40;

    scene.add( object );

    objects.push( object );

});

var geometry = new THREE.BoxGeometry( 40, 40, 40 );

// var loader = new THREE.OBJLoader();
// loader.load('static/obj/cube.obj', function(object) {

var object = new THREE.Mesh( geometry, 
             new THREE.MeshLambertMaterial( { color: Math.random() * 0xffffff } ) );

object.position.x = Math.random() * 100 - 50;
object.position.y = Math.random() * 60 - 30;
object.position.z = Math.random() * 80 - 40;

scene.add( object );

objects.push( object );

// });

Answer 1

加载 obj 替换使新的 THREE.boxGeometry() 部分不是新的 THREE.Mesh()。这段代码似乎并非没有错误。

无论如何，看看下面的代码，注意在 loader.load 里面，我将第二个参数从 object 更改为 geometry 并取消注释网格制作：

var loader = new THREE.OBJLoader();
loader.load('static/obj/cube.obj', function(geometry) {

    var object = new THREE.Mesh( geometry, 
                    new THREE.MeshLambertMaterial( { color: Math.random() * 0xffffff } ) );

    object.position.x = Math.random() * 100 - 50;
    object.position.y = Math.random() * 60 - 30;
    object.position.z = Math.random() * 80 - 40;

    scene.add( object );

    objects.push( object );

});

现在 OBJLoader 获取几何体，并使用它来制作网格。这更有意义不是吗？

Answer 2

下面的代码有效并允许我拖动对象，因为我拖动对象的方式需要一个网格作为场景的子项。

if (objfile) {

        var texture = new THREE.Texture();
        var img = new THREE.ImageLoader();
        img.load('static/material/red.png', function(image) {
            texture.image = image;
            texture.needsUpdate = true;
        });

        var objModel = new THREE.OBJLoader();
        var mesh;

        objModel.load('static/obj/' + objfile + '.obj', function(object) {
            object.traverse(function(child) {
                if (child instanceof THREE.Mesh) {
                    child.material.map = texture;
                    mesh = child;
                }
            });

            scene.add(mesh);
        });
    }

用threejs拖动加载的对象？

Drag a loaded object with threejs?

draggable

three.js