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

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

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);
        });
    }

Answer 2

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

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

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获取几何体，并使用它来制作网格物体。它更有意义吗？

用threejs拖动一个加载的对象？

2 个答案: