yonechen / three-onevent Goto Github PK

import * as THREE from "three";
import "three-onevent.js";

我在组件里引入这些，报错：
onEvent.js:3 Uncaught ReferenceError: THREE is not defined

threejs如果也是包引入的方式，再用包引入onevent直接报错，

控制台报错
Uncaught ReferenceError: THREE is not defined

oneventjs里面报错
(function (definition) { "use strict"; if (!THREE) { // 触发了这个 throw new Error("This module is dependent from 'three.js,add this file first."); }

如果两个都是script引入就没有问题，但是项目都是npm引入的

<title>Title</title> <script src="js/threejs/three.js"></script> <script src="js/onEvent.js"></script> <script src="js/jquery-3.2.1.min.js"></script> <style> *{ margin: 0; } div{ float: left; } #canvasContainer{ width: 80%; } <script> $(function () { $('div').height(window.innerHeight); var canvasContainer = $('#canvasContainer'); var canvasWidth = canvasContainer.width(); var canvasHeight = canvasContainer.height(); var renderer,scene,camera,light,controllers,gui; var objects=[]; function initScene(){ scene = new THREE.Scene(); } function initRenderer() { renderer = new THREE.WebGLRenderer(); renderer.setSize(canvasWidth,canvasHeight); renderer.setClearColor(0xeeeeee); canvasContainer.append(renderer.domElement); } function initCamera(){ camera = new THREE.PerspectiveCamera(75,canvasWidth/canvasHeight,0.1,1000); camera.position.set(-30,40,30); camera.lookAt(scene.position); scene.add(camera); } function enableEvent() { THREE.onEvent(scene,camera); } function initLight(){ light = new THREE.AmbientLight(0x0c0c0c); scene.add(light); var spotLight = new THREE.SpotLight(0xffffff); spotLight.position.set(-40, 60, -10); spotLight.castShadow = true; scene.add(spotLight); } function addAxis(){ var axes=new THREE.AxisHelper(200); scene.add(axes); } function initDatGui() { controllers = new (function () { this.rotationSpeed = 0.02; this.addObjects = function () { var cubeSize = Math.ceil((Math.random() * 3)); var cubeGeometry = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize); var cubeMaterial = new THREE.MeshLambertMaterial({color: Math.random() * 0xffffff}); var cube = new THREE.Mesh(cubeGeometry, cubeMaterial); cube.name = "cube-" + scene.children.length; cube.position.x = -30 + Math.round((Math.random() * 100)); cube.position.y = Math.round((Math.random() * 5)); cube.position.z = -20 + Math.round((Math.random() * 100)); // add the cube to the scene scene.add(cube); cube.on('hover',function (m) { console.log(m); }); }; }); gui = new dat.GUI(); gui.add(controllers, 'rotationSpeed',0,0.5); gui.add(controllers,'addObjects'); } function initObjects() { for (var i=0;i<0;i++){ var geometry = new THREE.BoxGeometry(20,20,20); var material = new THREE.MeshLambertMaterial({color:Math.random()*0xffffff}); var boxMesh = new THREE.Mesh(geometry,material); boxMesh.position.x=-30+Math.round(Math.random()*200); boxMesh.position.y=Math.round(Math.random()*5); boxMesh.position.z=-20+Math.round(Math.random()*200); scene.add(boxMesh); boxMesh.on('hover',function (m) { console.log(m); }); objects.push(boxMesh); } } function render() { // scene.traverse(function (o) { // if(o instanceof THREE.Mesh){ // o.rotateX(controllers.rotationSpeed); // o.rotateY(controllers.rotationSpeed); // o.rotateZ(controllers.rotationSpeed); // } // }); window.requestAnimationFrame(render); renderer.render(scene,camera); } function initControls(){ var orbitControls = new THREE.OrbitControls(camera,renderer.domElement); orbitControls.addEventListener('change',render); } initScene(); initRenderer(); initCamera(); enableEvent(); initLight(); addAxis(); initDatGui(); initControls(); render(); }); </script>