Question

编辑：我决定不使用DragControls或TransformControls，因为两者都没有按照我的要求去做。现在我已经在cueball的位置添加了一个枢轴Object3D，并使其成为一个孩子的cue（棒），并尝试让我自己的鼠标处理器旋转，并拉回棒。

我正在ThreeJS中创建一个Pool游戏作为学校项目（GitHub Source）我目前有以下网格：
- 一张桌子 - 在起始位置上有一组球 - 一个提示（棒）。

要旋转场景，我正在使用OrbitControls中的ThreeJS。

我也有一个raycaster，我可以点击提示（使用this question）。
现在，我想保持OrbitControls旋转世界的能力，但我也想使用旋转白球周围的提示来拍摄。

我的想法：
- 使用onDocumentMouseDrag（）的东西来检测我是否点击了提示，如果是的话，我要拖动它（旋转）的位置
- 在相同的功能中，查看提示是否被向后拖动然后用该向量“击中”白球。

你能帮助我实现这个目标吗？

请参阅下面的“主要”.js：GitHub: Poolgame.js

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var controls = new THREE.OrbitControls( camera );

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xcee0ff);
document.body.appendChild(renderer.domElement);

var objects = []; //for raycaster

//Table
var pooltable = new PoolTable();
scene.add(pooltable);

//Lighting
scene.add(new BarLighting() );

//ambient light
scene.add( new THREE.AmbientLight( 0x909090 ) ); // soft white light

//Balls
var poolballs = [], ball;
for(var i = 0; i<=15; i++) {
    ball = new PoolBall(i); 
    scene.add(ball);
    poolballs.push(ball);
}

var cue = new PoolStick();
cue.position.copy(poolballs[0].position);
cue.rotateZ(- (100 / 90) * Math.PI / 2); //10 degrees above table
scene.add(cue);
objects.push(cue);

var clock = new THREE.Clock();

document.addEventListener( 'mousedown', onDocumentMouseDown );
function onDocumentMouseDown( event ) {    
    event.preventDefault();
    var mouse3D = new THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1,   
                            -( event.clientY / window.innerHeight ) * 2 + 1,  
                            0.5 );     
    var raycaster =  new THREE.Raycaster();
    raycaster.setFromCamera( mouse3D, camera );
    var intersects = raycaster.intersectObjects( objects );

    if ( intersects.length > 0 ) {
        console.log(intersects[0]);
        //has found intersect, i.e. we clicked something: the stick.

    }

} // end of onDocumentMouseDown

function render() {
    requestAnimationFrame(render);

    controls.target.copy(poolballs[0].position);
//  controls.target.copy(pooltable.position);
    controls.update();

    renderer.render(scene,camera);
}

var mouse = new THREE.Vector2();

document.addEventListener('mousemove', onDocumentMouseMove, false);

function onDocumentMouseMove(event) {
    event.preventDefault();
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
}

camera.position.x = -150;
camera.position.y = 120;
camera.lookAt(pooltable.position); 
controls.update();

render();

将对象与OrbitControls

0 个答案: