really appreciate some help for this one.
I'm new to three.js, I think I read and watched all the videos to understand, but still can't acheive this effect on a coded website that I'm making:
Interactive Mouse Effects with Three.js
Just after the "var animate" part I receive an error of "cube not defined"
So I was wordering if there is a missing part for this tutorial??
Also, I downloaded his entire project to see where I messed up, but his code was quite different from the tutorial. I'm not Using parcel, I'm using cdnjs for three.js, so I was wondering if it can still work for the RendererPass EffectComposer and ShaderPass file. do I need those??
My last question for the most courageous ones is, when I finally acheive this (with your precious help) Is there important information due to this library use, that I need to know so I can upload it online?
Thank you thank you soooo very much!!
I'm afraid the "basic Three.js setup" code snippet from the article is incomplete since it does not contain how the cube is created. Hence, executing this code leads to a runtime errors in the animation loop. When you are new to three.js, use the code from the official guide Creating a scene.
I was wondering if it can still work for the RendererPass EffectComposer and ShaderPass file. do I need those??
Yes, you need these files if you are want to use post-processing. There is another guide called How to use post-processing that explains how a basic usage looks like.
Is there important information due to this library use, that I need to know so I can upload it online?
I would say no^^. You can include the library files as global scripts or as ES6 modules (recommended). For more complex applications, it's actually better to use of a build-tool like rollup (or Parcel). For the former tool, there is actually a starter project which demonstrates a simple three.js build.
Related
This may be dumb idea but here is what I am trying to achieve. A project I am working on has a legacy front-end code. Site is super slow and one of the contributing factor is jQuery. My idea is to write a utility that will tell me all the jQuery functions that were used on the final build. So that I can build jQuery from the source and remove what is unnecessary.
I've tried closure compiler by google with no luck. Even tree-shaking resulted in broken code.
I don't know if this dumb but this is what I could think right off the bat. All criticism, solutions are welcome.
Can you just search file by file for any instance of "$(" ? This indicates something is jQuery.
I am currently trying to figure out all the functions that my IDE has, and I have come across a predefined folder when I create a project that is called 'scratches and consoles'.
The IDE only allows me to create Scratch Files but I don´t know what that kind of file is and what Is its purpose. Could someone give me a hand with this?
It's something like temporary notes with ability to highlight/format your code.
Sometimes you may need to create temporary notes or draft up some code outside of the project context. Instead of switching to a different application for this purpose, you can use scratch files and scratch buffers.
You can read more about it at JetBrains - Scratch files.
Whatever I do I'm unable to go to definition between functions defined in different *.js and index.html files.
I'm not even sure if is it supposed to work? Or is this feature working only if I do some node.js developemnt using some imports? (I'm new to javascript, I just wan't to make webpage with WebGL, not some server-side stuff)
I tried to read this but I don't see how is it relevant for me? I just made empty jsconfig.json which did not helped
https://code.visualstudio.com/Docs/languages/javascript#_javascript-project-jsconfigjson
https://code.visualstudio.com/docs/introvideos/quicktour
https://code.visualstudio.com/docs/languages/jsconfig
See simple example search for THREE.Screen call from index.html which is defined in ThreeJS_aux.js.
My javascript project is here
https://github.com/ProkopHapala/LearnWeb
did you tried adding a tsconfig.json file and set allowJs: true checkJs: true ? This way vscode will start a tsserver and you will have all its features / refactors. Remember that JavaScript IS TypeScript so you don't have to use anything strange just good old JavaScript. Typescript compiler supports that refactor and many others (or you could develop / install third party plugins with more). And if you want to start using Types,you could still do that using plain old JavaScript with jsdocs. My two cents. More info: https://www.typescriptlang.org/docs/handbook/migrating-from-javascript.html
From the way you have your code laid out I would assume that you're going with a walkthrough or some kind of tutorial. Meaning, instead of splitting your JS into a separate file you're embedding it within the actual script tag in the HTML. Not a common practice is all unless someone is trying to maximize the development area, like a tutorial/walkthrough.
I think what you're really looking for here is design patterns. There is really no short answer to give you. There is also no single way to accomplish this. These design patterns are what puts JS together in a more readable fashion.
Try reading through this online book on design patterns Learning JS Design Patterns
This is a quick summary of your common design patterns AMD, commonJS, and Require. I recommend going through the book to get a more in depth understanding. Relation between CommonJS, AMD and RequireJS?
Is there a way to not have to build my app every time I want to run it? It is impossible to debug once it is compiled. I have seen in videos the browser loads 100s of js files instead of one big build.js.
What do I need to change to make this happen?
This is a downfall in working with modern things like React, but the answer is to use something like webpack. Webpack is able to generate the single file, but generate source maps with it as well. Browser tools are then able to map the single build file to the original source code, making it much easier to debug. Browserify has this ability as well, which you can use along side gulp or grunt, along with babel to compile ES6.
I'd recommend checking out webpack though, as it's becoming more commonplace. Personally I find it a bit tricky to figure out, but once you have it running, it's great. I don't have a good example handy on using webpack with react, but there are a number of articles & tutorials out there on the subject: https://www.codementor.io/reactjs/tutorial/beginner-guide-setup-reactjs-environment-npm-babel-6-webpack
So I'm working on a just for fun project to get practice using HTML/CSS/Javascript.
I'm using Aptana to write all my code and it is currently set up to run and work in a browser (obviously) it's a text adventure game.
It would be really cool though to be able to compile the code into an executable file that runs in its own window, not in a browser.
Is this something relatively easy to accomplish?
Thanks in advance for any help! :)
FF and Chrome provide a function to run a custom website in an app mode. That means no menubars, no addressbar and a complete window for the website. Maybe this is already what you are looking for.
http://www.rarst.net/software/dedicated-web-app-window/
https://superuser.com/questions/33548/starting-google-chrome-in-application-mode
https://superuser.com/questions/171235/does-internet-explorer-have-something-equivalent-to-chromes-app-mode
But if you are interested in compiled code for speeding up your game, this is not the way to achieve this.
For Windows as OS
see http://www.autoitscript.com/autoit3/docs/libfunctions/_IECreateEmbedded.htm
AutoIt is a scripting language for basically everything (with automation). SciTE is the editor to go.
In the example of the _IECreateEmbedded function, just change:
_IENavigate($oIE, "http://www.autoitscript.com")
to
_IENavigate($oIE, "file://.../thegame.html")
Very simple, you just have to copy-paste it and build it - you can even build it Online: AutoIt Online Compiler
There are many different ways you can acheive this.
If you're only targeting windows machines, then creating a HTA would be the simplest approach.
The modification to the structure of your existing code would be minimal, its essentially changing the file type and adding an extra couple of tags in. If you wanted a single file, instead of an exe and any resources (images etc) that you use you would have to base64 encode your images, and insert external scripts into the main page.
for information about embedding images and icons into a hta: http://www.john-am.com/2010/07/building-a-self-contained-hta-with-embedded-images-and-icons/
You could also use AppJS, node-webkit or similar type projects, but they would add around 30MB of stuff thats not being used.