在Three.js中有一种方法可以获得附加到对象的控制器列表吗?

时间:2016-10-06 15:36:05

标签: javascript 3d three.js

在Three.js中是否有办法获取附加到对象的控制器列表?或至少连接到对象的控制器。我有一个控制器连接到一个对象。我不希望transformController始终在该对象上可见。我试过trnasformController.enabled = false然而它似乎什么都不做。我分离它,似乎工作正常,但如果我点击对象,我需要一种方法导航回附加到它的控制器。有没有办法可以做到这一点,以便分离它?我想要做的只是在点击对象后才出现控制器,以便对其进行修改。 TIA

enter image description here

1 个答案:

答案 0 :(得分:1)

下面是一个示例代码,用于在选择对象时附加变换控件。然后在按下Esc键时分离变换控件。

使用Javascript:

var renderer
var saphi_mesh
var control
var controls
var pickable = []

function init() {
    container = document.createElement("div")
    document.body.appendChild(container)



    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000)
    camera.position.z = 500
    camera.position.y = 50

    scene = new THREE.Scene()

    var ambientLight = new THREE.AmbientLight(0xbbbbbb);
    scene.add(ambientLight);
    var gridXZ = new THREE.GridHelper(100, 10, 0xff0000, 0xffffff);
    scene.add(gridXZ);

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

    // clone wont work ... seems to retain the same material
    var cube1 = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({
        color: 0xff1234
    }));
    cube1.position.y = 50;
    cube1.name = "cube1";

    scene.add(cube1);
    pickable.push(cube1);

    renderer = new THREE.WebGLRenderer()
    renderer.setSize(window.innerWidth, window.innerHeight)
    control = new THREE.TransformControls(camera, renderer.domElement);
    pickable.push(control);
    control.addEventListener('change', render);
    container.appendChild(renderer.domElement)
    renderer.domElement.addEventListener("mousedown", onClick, false)
    window.addEventListener("keydown", keydown, false)
}

function animate() {
    requestAnimationFrame(animate)
    render()
}

function render() {
    renderer.render(scene, camera)
}

function keydown(event) {
    if (event.keyCode == 27) {
        scene.remove(control);
    }
}

function onClick(event) {
    x = (event.clientX / window.innerWidth) * 2 - 1;
    y = -(event.clientY / window.innerHeight) * 2 + 1;
    dir = new THREE.Vector3(x, y, -1)
    dir.unproject(camera)

    ray = new THREE.Raycaster(camera.position, dir.sub(camera.position).normalize())

    var intersects = ray.intersectObjects(pickable)
    if (intersects.length > 0) {
        var SELECTED = intersects[0].object;
        scene.add(control);
        control.attach(SELECTED);
    }
}

init()
animate()

以下是jsfiddle的工作示例:http://jsfiddle.net/qZh59/3/

我希望这对你有帮助,..