186 lines
7.0 KiB
HTML
186 lines
7.0 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="utf-8">
|
|||
|
|
<base href="../../../" />
|
|||
|
|
<script src="page.js"></script>
|
|||
|
|
<link type="text/css" rel="stylesheet" href="page.css" />
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<h1>[name]</h1>
|
|||
|
|
|
|||
|
|
<p class="desc">
|
|||
|
|
The following is a collection of links that you might find useful when learning three.js.<br />
|
|||
|
|
If you find something that you'd like to add here, or think that one of the links below is no longer
|
|||
|
|
relevant or working, feel free to click the 'edit' button in the bottom right and make some changes!<br /><br />
|
|||
|
|
|
|||
|
|
Note also that as three.js is under rapid development, a lot of these links will contain information that is
|
|||
|
|
out of date - if something isn't working as you'd expect or as one of these links says it should,
|
|||
|
|
check the browser console for warnings or errors. Also check the relevant docs pages.
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
<h2>Help forums</h2>
|
|||
|
|
<p>
|
|||
|
|
Three.js officially uses the [link:https://discourse.threejs.org/ forum] and [link:http://stackoverflow.com/tags/three.js/info Stack Overflow] for help requests.
|
|||
|
|
If you need assistance with something, that's the place to go. Do NOT open an issue on Github for help requests.
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
<h2>Tutorials and courses</h2>
|
|||
|
|
|
|||
|
|
<h3>Getting started with three.js</h3>
|
|||
|
|
<ul>
|
|||
|
|
<li>
|
|||
|
|
[link:https://threejsfundamentals.org/threejs/lessons/threejs-fundamentals.html Three.js Fundamentals starting lesson]
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
[link:https://codepen.io/rachsmith/post/beginning-with-3d-webgl-pt-1-the-scene Beginning with 3D WebGL] by [link:https://codepen.io/rachsmith/ Rachel Smith].
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
[link:https://www.august.com.au/blog/animating-scenes-with-webgl-three-js/ Animating scenes with WebGL and three.js]
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
|
|||
|
|
<h3>More extensive / advanced articles and courses</h3>
|
|||
|
|
<ul>
|
|||
|
|
<li>
|
|||
|
|
[link:https://discoverthreejs.com/ Discover three.js]
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
[link:https://threejsfundamentals.org/ Three.js Fundamentals]
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
[link:http://blog.cjgammon.com/ Collection of tutorials] by [link:http://www.cjgammon.com/ CJ Gammon].
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
[link:https://medium.com/soffritti.pierfrancesco/glossy-spheres-in-three-js-bfd2785d4857 Glossy spheres in three.js].
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
[link:https://www.udacity.com/course/cs291 Interactive 3D Graphics] - a free course on Udacity that teaches the fundamentals of 3D Graphics,
|
|||
|
|
and uses three.js as its coding tool.
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
[Link:https://aerotwist.com/tutorials/ Aerotwist] tutorials by [link:https://github.com/paullewis/ Paul Lewis].
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
[link:http://learningthreejs.com/ Learning Three.js] – a blog with articles dedicated to teaching three.js
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
[link:https://discourse.threejs.org/t/three-js-bookshelf/2468 Three.js Bookshelf] - Looking for more resources about three.js or computer graphics in general?
|
|||
|
|
Check out the selection of literature recommended by the community.
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
|
|||
|
|
<h2>News and Updates</h2>
|
|||
|
|
<ul>
|
|||
|
|
<li>
|
|||
|
|
[link:https://twitter.com/hashtag/threejs Three.js on Twitter]
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
[link:http://www.reddit.com/r/threejs/ Three.js on reddit]
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
[link:http://www.reddit.com/r/webgl/ WebGL on reddit]
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
[link:http://learningwebgl.com/blog/ Learning WebGL Blog] – The authoritive news source for WebGL.
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
|
|||
|
|
<h2>Examples</h2>
|
|||
|
|
<ul>
|
|||
|
|
<li>
|
|||
|
|
[link:https://github.com/edwinwebb/three-seed/ three-seed] - three.js starter project with ES6 and Webpack
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
[link:http://stemkoski.github.io/Three.js/index.html Professor Stemkoskis Examples] - a collection of beginner friendly
|
|||
|
|
examples built using three.js r60.
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
[link:https://threejs.org/examples/ Official three.js examples] - these examples are
|
|||
|
|
maintained as part of the three.js repository, and always use the latest version of three.js.
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
[link:https://raw.githack.com/mrdoob/three.js/dev/examples/ Official three.js dev branch examples] -
|
|||
|
|
Same as the above, except these use the dev branch of three.js, and are used to check that
|
|||
|
|
everything is working as three.js being is developed.
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
|
|||
|
|
<h2>Tools</h2>
|
|||
|
|
<ul>
|
|||
|
|
<li>
|
|||
|
|
[link:http://www.physgl.org/ physgl.org] - JavaScript front-end with wrappers to three.js, to bring WebGL
|
|||
|
|
graphics to students learning physics and math.
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
[link:https://whsjs.readme.io/ Whitestorm.js] – Modular three.js framework with AmmoNext physics plugin.
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li>
|
|||
|
|
[link:http://zz85.github.io/zz85-bookmarklets/threelabs.html Three.js Inspector]
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
[link:http://idflood.github.io/ThreeNodes.js/ ThreeNodes.js].
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
[link:https://marketplace.visualstudio.com/items?itemName=bierner.comment-tagged-templates comment-tagged-templates] - VSCode extension syntax highlighting for tagged template strings, like: glsl.js.
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
[link:https://github.com/MozillaReality/WebXR-emulator-extension WebXR-emulator-extension]
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
|
|||
|
|
<h2>WebGL References</h2>
|
|||
|
|
<ul>
|
|||
|
|
<li>
|
|||
|
|
[link:https://www.khronos.org/files/webgl/webgl-reference-card-1_0.pdf webgl-reference-card.pdf] - Reference of all WebGL and GLSL keywords, terminology, syntax and definitions.
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
|
|||
|
|
<h2>Old Links</h2>
|
|||
|
|
<p>
|
|||
|
|
These links are kept for historical purposes - you may still find them useful, but be warned that
|
|||
|
|
they may have information relating to very old versions of three.js.
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
<ul>
|
|||
|
|
<li>
|
|||
|
|
<a href="https://www.youtube.com/watch?v=Dir4KO9RdhM" target="_blank">AlterQualia at WebGL Camp 3</a>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
[link:http://yomotsu.github.io/threejs-examples/ Yomotsus Examples] - a collection of examples using three.js r45.
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
[link:http://fhtr.org/BasicsOfThreeJS/#1 Introduction to Three.js] by [link:http://github.com/kig/ Ilmari Heikkinen] (slideshow).
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
[link:http://www.slideshare.net/yomotsu/webgl-and-threejs WebGL and Three.js] by [link:http://github.com/yomotsu Akihiro Oyamada] (slideshow).
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
[link:http://bkcore.com/blog/general/adobe-user-group-nl-talk-video-hexgl.html Fast HTML5 game development using three.js] by [link:https://github.com/BKcore BKcore] (video).
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="https://www.youtube.com/watch?v=VdQnOaolrPA" target="_blank">Trigger Rally</a> by [link:https://github.com/jareiko jareiko] (video).
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
[link:http://blackjk3.github.io/threefab/ ThreeFab] - scene editor, maintained up until around three.js r50.
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
[link:http://bkcore.com/blog/3d/webgl-three-js-workflow-tips.html Max to Three.js workflow tips and tricks] by [link:https://github.com/BKcore BKcore]
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
[link:http://12devsofxmas.co.uk/2012/01/webgl-and-three-js/ A whirlwind look at Three.js]
|
|||
|
|
by [link:http://github.com/nrocy Paul King]
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
[link:http://bkcore.com/blog/3d/webgl-three-js-animated-selective-glow.html Animated selective glow in Three.js]
|
|||
|
|
by [link:https://github.com/BKcore BKcore]
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
[link:http://www.natural-science.or.jp/article/20120220155529.php Building A Physics Simulation Environment] - three.js tutorial in Japanese
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
|
|||
|
|
</body>
|
|||
|
|
</html>
|