javascript - 在辅助 javascript 文件上未检测到 DOM 事件（对于使用 three.js；raycaster 的 3D 对象）
问题描述
我使用 Vite 创建了一个个人网站，它只是在需要捆绑 javascript、html 和 css 时为您完成所有工作。我使用了名为 three.js 的 js 库，它只有四个 3d 对象，可以检测鼠标点击和鼠标悬停。
然后我尝试捆绑我的工作，它几乎可以工作，除了它的 three.js 部分似乎丢失了。我检查了日志以了解它是如何捆绑的，并且有一条消息表明即使成功转换了 4 个模块，也有一些名为
dist/assets/vendor.a8662437.js
返回消息
504.39kb / brotli: skipped (large chunk)
(!) Some chunks are larger than 500kb after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/guide/en/#outputmanualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
所以我认为即使我的项目是基本的，它确实包含 2 个函数，一个用于 mousemove 事件，一个用于 mouseclick 事件。经过越来越多的研究，我非常有信心我完成了所有步骤，但我的问题是原始 javascript 文件具有 mouseclick 功能，当我单击对象时，它按预期工作，但是当我将鼠标悬停在对象上时，什么都没发生。
我确保将 three.js 库导入到该 javascript 文件中，就像在我的主 js 文件中所做的那样。当我保存文件时，我会收到错误，我会一一修复它们，因为错误很明显，我在这里缺少声明或已经声明了某些内容。我还将脚本标记放在 html 正文中，就像主要的 javascript 文件一样。我还有其他事情要做吗？我将提供文件的相关部分...
我从一个 index.html 文件和一个 main.js 文件开始。我创建了一个名为 hover.js 的辅助 js 文件。您可以看到我在 html 文件中为其添加了脚本标记。
这是html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="HRicon.svg" />
<link rel="manifest" href="manifest.json">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hyperrocket BSC</title>
</head>
<body>
<script>screen.orientation.lock('landscape');</script>
<canvas id="bg">
<script src='https://code.createjs.com/1.0.0/tweenjs.min.js'></script>
<script type="module" src="/hover.js"></script>// I ADDED THE SCRIPT TAG HERE <-----
<script type="module" src="/main.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"></script>
</canvas>
</body>
</html>
这是我的 main.js 文件，带有可以工作的 mouseclick 功能
import './style.css'
import * as THREE from 'three';
import { OrbitControls } from 'https://cdn.jsdelivr.net/npm/three@0.117.0/examples/jsm/controls/OrbitControls.js';
import TWEEN from 'https://cdn.jsdelivr.net/npm/@tweenjs/tween.js@18.5.0/dist/tween.esm.js';
// THESE WERE JUST ADDED TO TRY TO MAKE THE SECONDARY JAVASCRIPT FILE WORK
import {onMouseMove} from './hover.js'
export {scene, camera};
export {minicylinder1, minicylinder2, minicylinder3, minicylinder4};
// THESE WERE JUST ADDED TO TRY TO MAKE THE SECONDARY JAVASCRIPT FILE WORK
//BASIC SCENE SETUP
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
document.body.appendChild(renderer.domElement);
//LIGHTS (POINT AND AMBIENT)
const pointLight = new THREE.PointLight(0xB7B7B7);
pointLight.position.set(-25, 0, 30);
const ambientLight = new THREE.AmbientLight(0xB7B7B7);
scene.add(pointLight, ambientLight);
//RESIZE WINDOW
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
render();
}, false);
//ORBIT CONTROLS
const controls = new OrbitControls(camera, renderer.domElement);
controls.minDistance = 5;
controls.maxDistance = 70;
controls.enablePan = false;
controls.enableRotate = false;
controls.enableZoom = false;
controls.target.set(0,0,-1);
camera.position.setZ(28);
var origPos = new THREE.Vector3().copy(camera.position);
// *******************************************************************//
// 3D OBJECTS //
// //
//********************************************************************//
const minigeometry1 = new THREE.CylinderGeometry(5, 5, 0.5, 50);
const minimaterial1 = new THREE.MeshLambertMaterial();
const minicylinder1 = new THREE.Mesh(minigeometry1, minimaterial1);
minicylinder1.name = 'minicylinder1';
minicylinder1.position.x = -17.5;
minicylinder1.rotation.z = Math.PI / 2;
minicylinder1.rotation.y = Math.PI / 2;
scene.add(minicylinder1);
const minigeometry2 = new THREE.CylinderGeometry(5, 5, 0.5, 50);
const minimaterial2 = new THREE.MeshStandardMaterial();
const minicylinder2 = new THREE.Mesh(minigeometry2, minimaterial2);
minicylinder2.name = 'minicylinder2';
minicylinder2.position.y = 8.5;
minicylinder2.rotation.z = Math.PI / 2;
minicylinder2.rotation.y = Math.PI / 2;
scene.add(minicylinder2);
这部分只是我在鼠标点击时触发的补间相机移动的东西。这一切都有效，请随意跳过此块。
//CAMERA MOVEMENT FUNCTION TOWARD EACH COIN//
function tweenCamera(finalPosition, tweenSpeed) {
let initialPosition = new THREE.Vector3(camera.position.x, camera.position.y, camera.position.z);
new TWEEN.Tween(initialPosition)
.to(finalPosition, tweenSpeed)
.onUpdate(() => {
camera.position.set(initialPosition.x, initialPosition.y, initialPosition.z);
})
//.easing(TWEEN.Easing.Cubic.Out)
.start();
}
//TWEENS THE CAMERA BACK TO CENTER//
//WHERE THE CAMERA IS CURRENTLY LOOKING, I THINK
let currentTarget = new THREE.Vector3();
currentTarget.set(controls.target.x, controls.target.y, controls.target.z);
let originTarget = new THREE.Vector3();
originTarget.set(0,0,0);
//TELLS CAMERA TO ORIENT TOWARD SPECIFIED OBJECT (target controls = camera orientation?)
let cylinderTarget = new THREE.Vector3();
cylinderTarget.set(0, 0, -10);
let minicylinder1Target = new THREE.Vector3();
minicylinder1Target.set(-30, minicylinder1.position.y, minicylinder1.position.z);
let minicylinder2Target = new THREE.Vector3();
minicylinder2Target.set(minicylinder2.position.x, 16, minicylinder2.position.z);
这是鼠标单击功能，它已经工作并且仍然可以正常工作......
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();
let coin1Clicked = false;
let coin2Clicked = false;
let coin3Clicked = false;
let coin4Clicked = false;
function onClick(event) {
//Normalized mouse coordinates (-1, +1)
mouse.x = (event.offsetX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
const intersects = raycaster.intersectObjects(scene.children, true);
if ((getIndexInIntersectsArray(scene.getObjectByName('bhText'), intersects) > -1)) {
window.open(scene.getObjectByName('bhText').userData.URL);
}
//IF WE CLICK ON AN OBJECT, WE WILL ZOOM INTO IT
if ((getIndexInIntersectsArray(minicylinder1, intersects) > -1) && (!coin1Clicked)) {
tl.to(".slide1", {delay: 2.1,duration: 0.7, clipPath: 'polygon(100% 0%, 0% 0%, 0% 100%, 100% 100%)'});
coin1Clicked = true;
//CODE THAT ACHIEVES MY SLIGHT ROTATION THAT I FOUND ON STACKOVERFLOW
var start = {}
start.y = 0;
var targ = {};
targ.y = 0;
function rot(s,t) {
start["y"] = s;
targ["y"] = t;
}
rot(1.5*Math.PI/2, 4.3*Math.PI);
const spun1 = new TWEEN.Tween(start).to(targ, 2500).onUpdate(function() {minicylinder1.rotation.y = start.y}).easing(TWEEN.Easing.Quintic.Out);
spun1.start();
window.removeEventListener("mousemove", onMouseMove);
new TWEEN.Tween(currentTarget)
.to(minicylinder1Target, 2500)
.onUpdate(function() {
controls.target = currentTarget;
})
.easing(TWEEN.Easing.Quartic.InOut)
.start()
//RESTRICT CAMERA ROTATION AND ZOOM OUT
tweenCamera(new THREE.Vector3(-30, minicylinder1.position.y, 7), 2500)
return coin1Clicked;
} else if ((getIndexInIntersectsArray(minicylinder1, intersects) > -1) && (coin1Clicked)) {
tl.to(".slide1", {duration: 0.7, clipPath: 'polygon(100% 0, 100% 0, 100% 100%, 100% 100%)'});
//CODE THAT ACHIEVES MY SLIGHT ROTATION THAT I FOUND ON STACKOVERFLOW
var start = {}
start.y = 0;
var targ = {};
targ.y = 0;
function rot(s,t) {
start["y"] = s;
targ["y"] = t;
}
rot(4.3*Math.PI, 4.5*Math.PI);
const spun1 = new TWEEN.Tween(start).to(targ, 2500).onUpdate(function() {minicylinder1.rotation.y = start.y}).easing(TWEEN.Easing.Quintic.Out);
spun1.start();
//TWEEN TO ORIENT CAMERA TOWARDS ORIGIN
new TWEEN.Tween(currentTarget)
.to(cylinderTarget, 2500)
.onUpdate(function() {
controls.target = currentTarget;
})
.easing(TWEEN.Easing.Quartic.InOut)
.start()
coin1Clicked = false;
tweenCamera(origPos, 2500) //FOR THE TEXT ELEMENTS ALSO
window.addEventListener("mousemove", onMouseMove);
return coin1Clicked;
} else if ((getIndexInIntersectsArray(minicylinder2, intersects) > -1) && !coin2Clicked) {
tl.to(".slide2", {delay: 2.1,duration: 0.7, clipPath: 'polygon(0% 100%, 0% 0%, 100% 0%, 100% 100%)'});
coin2Clicked = true;
var start = {}
start.y = 0;
var targ = {};
targ.y = 0;
function rot(s,t) {
start["y"] = s;
targ["y"] = t;
}
rot(1.5*Math.PI/2, 4.5*Math.PI);
const spun2 = new TWEEN.Tween(start).to(targ, 2500).onUpdate(function() {minicylinder2.rotation.y = start.y}).easing(TWEEN.Easing.Quintic.Out);
spun2.start();
new TWEEN.Tween(currentTarget)
.to(minicylinder2Target, 2500)
.onUpdate(function() {
controls.target = currentTarget;
})
.easing(TWEEN.Easing.Quartic.InOut)
.start()
tweenCamera(new THREE.Vector3(minicylinder2.position.x, 16, 7), 2500)
window.removeEventListener("mousemove", onMouseMove);
return coin2Clicked;
} else if ((getIndexInIntersectsArray(minicylinder2, intersects) > -1) && (coin2Clicked)) {
tl.to(".slide2", {duration: 0.7, clipPath: 'polygon(0% 100%, 0% 100%, 100% 100%, 100% 100%)'});
new TWEEN.Tween(currentTarget)
.to(cylinderTarget, 2500)
.onUpdate(function() {
controls.target = currentTarget;
})
.easing(TWEEN.Easing.Quartic.InOut)
.start()
coin2Clicked = false;
tweenCamera(origPos, 2500);
window.addEventListener("mousemove", onMouseMove);
return coin2Clicked;
}
}
function getIndexInIntersectsArray(elem, array) {
var ind = -1;
for (var i = 0; i < array.length; i++) {
if (array[i].object.name == elem.name) {
ind = i;
}
}
return ind;
}
window.addEventListener("click", (event) => {
onClick(event);
})
window.addEventListener("mousemove", onMouseMove);
var animate = function() {
requestAnimationFrame(animate);
particlesMesh.rotation.y -= 0.00035;
controls.update();
render();
TWEEN.update();
};
function render() {
renderer.render(scene, camera);
}
animate();
这是辅助文件，其中的 javascript 函数不会触发 if 语句块内的操作。
export {onMouseMove};
import * as THREE from 'three';
import {scene, camera } from './main.js';
import { minicylinder1, minicylinder2 } from './main.js';
import TWEEN from 'https://cdn.jsdelivr.net/npm/@tweenjs/tween.js@18.5.0/dist/tween.esm.js';
// *******************************************************************//
// MOUSE HOVER //
// //
//********************************************************************//
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();
window.addEventListener("mousemove", onMouseMove);
let coin1Hover = false;
let coin2Hover = false;
function onMouseMove(event) {
mouse.x = (event.offsetX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
const intersects = raycaster.intersectObjects(scene.children, true);
if ((getIndexInIntersectsArray(minicylinder1, intersects) > -1) && !coin1Hover) {
coin1Hover = true;
var start = {}
start.y = 0;
var targ = {};
targ.y = 0;
function rot(s,t) {
start["y"] = s;
targ["y"] = t;
}
rot(Math.PI/2, 1.5*Math.PI/2);
const spinning1 = new TWEEN.Tween(start).to(targ, 150).onUpdate(function() {minicylinder1.rotation.y = start.y});
spinning1.start();
return coin1Hover
} else if ((getIndexInIntersectsArray(minicylinder1, intersects) == -1) && coin1Hover) {
coin1Hover = false;
var start = {}
start.y = 0;
var targ = {};
targ.y = 0;
function rot(s,t) {
start["y"] = s;
targ["y"] = t;
}
rot(1.5*Math.PI/2, Math.PI/2);
const backwards = new TWEEN.Tween(start).to(targ, 450).onUpdate(function() {minicylinder1.rotation.y = start.y});
backwards.start();
return coin1Hover
} else if ((getIndexInIntersectsArray(minicylinder2, intersects) > -1) && !coin2Hover) {
coin2Hover = true;
var start = {}
start.y = 0;
var targ = {};
targ.y = 0;
function rot(s,t) {
start["y"] = s;
targ["y"] = t;
}
rot(Math.PI/2, 1.2*Math.PI/2);
const spinning = new TWEEN.Tween(start).to(targ, 150).onUpdate(function() {minicylinder2.rotation.y = start.y});
spinning.start();
return coin2Hover
} else if ((getIndexInIntersectsArray(minicylinder2, intersects) == -1) && coin2Hover) {
coin2Hover = false;
var start = {}
start.y = 0;
var targ = {};
targ.y = 0;
function rot(s,t) {
start["y"] = s;
targ["y"] = t;
}
rot(1.2*Math.PI/2, Math.PI/2);
const backwards = new TWEEN.Tween(start).to(targ, 450).onUpdate(function() {minicylinder2.rotation.y = start.y});
backwards.start();
return coin2Hover
}
function getIndexInIntersectsArray(elem, array) {
var ind = -1;
for (var i = 0; i < array.length; i++) {
if (array[i].object.name == elem.name) {
ind = i;
}
}
return ind;
}
}
我认为这与事件没有找到通往第二个函数的方式有关，因为鼠标点击触发了 main.js 中的函数
非常感谢任何可以提供帮助的人。
解决方案
推荐阅读
- javascript - 我们可以通过提取模态所需的javascript和css并将其保存在我们的代码中来使用引导模态吗？
- amazon-web-services - 多区域网站使用 S3
- exchange-server - EWS 同步优化
- r - 删除连续重复的值
- kotlin - Kotlin 中的字符串值
- php - php ON DUPLICATE KEY UPDATE 也说 1062: Duplicate entry for key 'PRIMARY'
- swift - Firestore：isGreatThan 在查询中不起作用（iOS）
- mysql - MariaDB Galera Cluster: SELECT ... FOR UPDATE 为什么没有锁定？
- menu - Typo3在html模板中的子页面上获取链接父页面
- python - python mocking 检查对象的方法是否被访问（未调用）