gpt4 book ai didi

javascript - 为什么 JavaScript 中无法识别 mousedown 事件(有 3 个)?

转载 作者:行者123 更新时间:2023-12-03 08:18:55 27 4
gpt4 key购买 nike

我有一个简单的 THREE.js,我想单击圆形对象,但是当我单击浏览器中的任意位置时,什么也没有发生。我关注了this suggestion没有成功。 完整的代码在这里:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
color: #808080;
font-family:Monospace;
font-size:13px;
text-align:center;

background-color: #ffffff;
margin: 0px;
overflow: hidden;
}

#info {
position: absolute;
top: 0px; width: 100%;
padding: 5px;
}

a {

color: #0080ff;
}

</style>
</head>
<body>

<div id="container"></div>
<script src="js/build/three.min.js"></script>

<script>

var container, stats;
var camera, scene, renderer;
var group1;
var mouseX = 0, mouseY = 0;
var map_width = 512;
var map_height = 512;

var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;

init();
animate();

function createMesh(filename) {
var geometry = new THREE.SphereGeometry( 70, 40, 40 );
geometry.addEventListener('onclick', onDocumentMouseDown);
var loader = new THREE.TextureLoader();
var texture = loader.load(filename);
var material = new THREE.MeshBasicMaterial( { map: texture, overdraw: 0.5 } );
var mesh = new THREE.Mesh( geometry, material );
return mesh;
}


function init() {
container = document.getElementById( 'container' );
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.z = 500;
scene = new THREE.Scene();

group1 = new THREE.Group();
var mesh = createMesh("textures/canvas1.png");
group1.add( mesh );
scene.add( group1 );

renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setClearColor( 0xffffff, 0 );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );

document.addEventListener( 'onclick', onDocumentMouseDown, false);

}

function onDocumentMouseDown( event) {
//event.preventDefault();
console.log("test");
window.alert("clicked");
}

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

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


</script>

</body>
</html>

要重现此示例,您只需要一些随机图像和 THREE.js 库。我在控制台中没有看到任何错误(与此问题相关),也没有在单击浏览器时看到任何其他控制台输出...

我尝试按照文档 (geometry.addEventListener) 中的描述向 THREE.js 对象之一添加一个方法,但这也没有执行任何操作。

最佳答案

document.addEventListener( 'click',  onDocumentMouseDown, false);

关于javascript - 为什么 JavaScript 中无法识别 mousedown 事件(有 3 个)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33806124/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com