Question

我有一个有多个物体的场景，我想点击并选择一个物体，然后旋转和缩放场景。
对于缩放，旋转和平移场景，我使用TrackballControl.js 对于click和select和object，我使用Projector.js 他们按我的意愿分开工作。但是，当我结合使用Projector.js时，由于TrackballControl不起作用。我不知道如何将这两者结合使用。
你有什么建议吗？
我的测试代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>Selecting objects</title>
    <script type="text/javascript" src="../libs/three.js"></script>
    <script type="text/javascript" src="../libs/Projector.js"></script>
    <script type="text/javascript" src="../libs/TrackballControls.js"></script>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
<div id="WebGL-output">
</div>
<script type="text/javascript">
var scene, camera,renderer,cube,sphere,cylinder, control;
function prepareScene(){
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
    renderer = new THREE.WebGLRenderer();
    renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
    renderer.setSize(window.innerWidth, window.innerHeight);
    camera.position.set(-30,40,30);
    camera.lookAt(scene.position);
    var ambientLight = new THREE.AmbientLight(0x0c0c0c);
    scene.add(ambientLight);
    var spotLight = new THREE.SpotLight(0xffffff);
    spotLight.position.set(-40, 60, -10);
    scene.add(spotLight);
    document.getElementById("WebGL-output").appendChild(renderer.domElement);   
}
function render() {
    renderer.render(scene, camera);
    requestAnimationFrame(render);
}
function addGeometry(){
    var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
    var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xff0000});
    cube = new THREE.Mesh(cubeGeometry, cubeMaterial);  
    cube.position.set(-9,3,0);
    scene.add(cube);
}
function animate() {
    requestAnimationFrame(animate);
    control.update();
}
function onDocumentMouseDown(event) {
    var vector = new THREE.Vector3(( event.clientX / window.innerWidth ) * 2 - 1, -( event.clientY / window.innerHeight ) * 2 + 1, 0.5);
    vector = vector.unproject(camera);
    var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
    var intersects = raycaster.intersectObjects([cube]);
    if (intersects.length > 0) {
        console.log(intersects[0].point);
        intersects[0].object.material.transparent = true;
        intersects[0].object.material.opacity = 0.1;
    }
}
function init() {
    prepareScene();
    var projector = new THREE.Projector();
    document.addEventListener('mousedown', onDocumentMouseDown, false); 
    /*control = new THREE.TrackballControls(camera, document.getElementById("WebGL-output"));
    control.addEventListener("change", render);
    control.rotateSpeed = 3.0;
    control.zoomSpeed = 3.0;
    control.panSpeed = 3.0; */     
    addGeometry();
    render();  
    //animate();     
}
    window.onload = init;
</script>
</body>
</html>

如何在Three.js中一起使用TrackballControls.js和Projector.js

0 个答案: