javascript - 鼠标按下对象 + GUI 界面

Question

问题如下:如果我将 renderer.domElement 添加到我的相机属性中，GUI 可以完美运行，但 mousedown 操作不起作用。

相反，如果我删除 renderer.domElement，则 mousedown 操作会起作用，但在我将其悬停后，GUI 会随着我的鼠标移动进行 X 缩放。

代码如下:

function init()
{

// scene
scene = new THREE.Scene();

// camera
var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;
var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000;
camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);
camera.lookAt(scene.position);  
var distance = 1000; 
camera.position;y = 150;
camera.position.z = 1500;
scene.add(camera);


// renderer
renderer = new THREE.CanvasRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );


// controls
controls = new THREE.TrackballControls( camera);

请问我该如何解决？

谢谢。

Answer 1

试试这个:

controls = new THREE.TrackballControls( camera, renderer.domElement );