我已经安装了
pm——全局网页
npm安装——全局网页cli
并让我的服务器运行了
这是我的代码:n
你也安装了three(npm install three)吗?浏览器控制台中是否有任何错误?
我不知道网页包。但您仍然可以使用
*non your head tag and this will link to three.js and everything should work fine…nyes, when I usednit worked, but when I change to import * as THREE from \"three\"; all I see is a white screennscript>nDepending on your server / local setup you probably cannot import this way from node_modules。当你稍后尝试发布应用程序时,它也不会起作用。
除非我们看到你的webpack.config、package.jso
或浏览器控制台错误,否则无法提供帮助。Alyne_do__Nascimento:
在浏览器中,你不能使用所谓的“裸导入”。推荐使用两种工作流。n- 使用捆绑程序,将最终的应用程序捆绑导入您的index.html。n- 使用CDN URL,如https://cdn.jsdeliver.net/npm/three@0.117.1/build/three.module.js56
然后您可以这样编写导入:nimport * as THREE from \"https://cdn.jsdelivr.net/npm/three@0.117.1/build/three.module.js\";
此外,您只能在增强时使用ES6导入语法脚本标记如下:n*nI already didnnpm install --global webpacknnpm install --global webpack-clinim not sure im reading this right, but in modern environments (webpack et al) you don\"t mess with script tags, and usually you don\"t touch html files. index.html is an entry point, mostly auto-generated.nyour code lives in index.js, you can import from three from there (if you have npm installed it).ni would suggest you start with codesandbox: https://codesandbox.io/s/vanilla 20nit gives you a proper dev env, you can run code right there, no installation, and if you\"re happy just click on download and it zips up a ready-made dev environment (using parcel, which is similar to webpack).nI would like to add, that you can use imports without webpack, by providing a literal path from your script (or .html in your case). For example if you have node_modules和*index.html在同一目录中,然后当浏览器要求/build时,可以添加脚本:n*nYou should report this to your teacher / mentor. If you are learning three.js this is not exactly three.js related and may be complicated on their own. Someone should ensure that all students get the same code and that it can run for everyone.nI have a good idea of why you could be having this problem. You are using node right? what server are you using to serve it? Express? my guess is that youre not serving node_modules in you public_dirrname.nProblems with ES6 Imports in threejs using node 14? (No Webpack or Babel) 46 if so, take a look at this page.nIf you want to use es6 modules, and are using nodejs, and express, you don\"t need to serve the whole node_modules folder with all it\"s subfolders just to get three.js.nOne option you have,nIs, you can add a static path to your server code for the specific file or folder you want to serve.neg,napp.use(\"/build/three.module.js\", express.static(path.join(__dirname, \"../../node_modules/three/build/three.module.js\")));
然后在JavaScript中,n<12***n/3.module.js,服务器将知道返回什么。
如果您编写html客户端不知道什么是three,除非你事先做了各种各样的事情,例如,尝试webpack或其他捆绑包。您需要告诉webpack什么是three,以便它能够以某种方式显示它,以便浏览器能够理解three是什么。
请参见我的样板文件,以获取一个示例,在该示例中,我创建指向特定库文件和/或文件夹的静态路由,而不是使用绑定器。(但仅当您对使用typescript感兴趣时)GitHub肖恩·布拉德利/Three.js-打字脚本样板31nThree.js打字稿样板。为肖恩·布拉德利做贡献/Three.js-通过在GitHub上创建帐户来开发TypeScript样板文件。ngit clone https://github.com/Sean-Bradley/Three.js-TypeScript-Boilerplate.gitcd Three.js-TypeScript-Boilerplatenpm install -g typescriptnpm installnpm run dev
在visual studio代码中打开和/或访问http://127.0.0.1:3000/9
如果您想查看样板文件的版本,请使用
<15***nstats.js及dat.gui面板。看看我是如何在服务器代码中明确引用这些文件的,而不需要为整个
ode_modules文件夹提供服务,或者将三个JS文件中的任何一个复制到
odejs提供服务的静态根文件夹中的某个地方,或者使用webpack、rollup等。
底线是,除非你告诉它,否则你的浏览器不知道three是什么
Why my import * as THREE from *three* didn’t work?n