三个JS mousedown事件无法与OrbitControls一起使用

时间:2018-07-19 20:16:40

标签: javascript three.js

我无法正常执行mousedown事件,因此可以检测到对渲染的.gltf模型的点击。

以下代码:

// Load 3D Scene
var scene = new THREE.Scene();

// Load Camera Perspektive
var camera = new THREE.PerspectiveCamera(25, window.innerWidth / window.innerHeight, 1, 20000);
camera.position.set(0, 0, 6000);

// Load a Renderer
var renderer = new THREE.WebGLRenderer({
    alpha: false
});
renderer.setClearColor(0xC5C5C3);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Load the Orbitcontroller
var controls = new THREE.OrbitControls(camera, renderer.domElement);

// Load Light
var ambientLight = new THREE.AmbientLight(0xcccccc);
scene.add(ambientLight);

var directionalLight = new THREE.DirectionalLight(0xffffff);
directionalLight.position.set(0, 1, 1).normalize();
scene.add(directionalLight);

var manager = new THREE.LoadingManager();
var onProgress = function ( xhr ) {
    if ( xhr.lengthComputable ) {
        var percentComplete = xhr.loaded / xhr.total * 100;
        loadingbarprogress.style.width = percentComplete + '%';
    }
};

var onError = function ( xhr ) {
};


// glTf 2.0 Loader
var loader = new THREE.GLTFLoader(manager);
loader.load('objects/model.gltf', function (gltf) {
    var object = gltf.scene;
    gltf.scene.scale.set(.1, .1, .1);//jshint ignore:line
    gltf.scene.position.x = 0; //Position (x = right+ left-) 
    gltf.scene.position.y = 0; //Position (y = up+, down-)
    gltf.scene.position.z = 0; //Position (z = front +, back-)

    scene.add(gltf.scene);

}, onProgress, onError);

document.addEventListener('mousedown', mousedownfunc, false);

function mousedownfunc(event)//this function never gets called
{
    console.log('clicked');               

}

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

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


render();
animate();

如果我关闭OrbitControls,它不会起作用。我尝试将事件添加到窗口,renderer.domelement和document.body,所有这些都没有运气。

任何帮助都会很棒!

0 个答案:

没有答案