threejs学习实战例子？-灵析社区

复古直男

threejs只是webgl的封装库，想了解三维的话，也就是计算机图形学，还是得从基础开始。 webgl的资料特别少，最好通过opengl来学习, 因为webgl是opengl的子集, 而opengl发展的更早，资料更多。opengl从这个例子入门最好不过："https://learnopengl-cn.github.io/" (https://link.segmentfault.com/?enc=OR8h1FoxDe%2FdqjZZarMWiw%3D%3D.Zdo5OyF0h4EFglgz6446Y4yKZr%2F6guU07m%2BFVfBM6Y1zZeA1gkY9auOG12HEm2Ya), 不是要安装opengl环境来学习，因为两者的思路完全一致，所以一些实现和代码都一样，将opengl代码转换为webgl实现，这是一个好的实践！因为我就是这么干的. 通过这个网站来学习webgl理论基础 "https://webgl2fundamentals.org/webgl/lessons/zh_cn/" (https://link.segmentfault.com/?enc=Z8Y8v2sIJXVL3JpWLZGGlw%3D%3D.xuBQO%2BQPHJTvQh5qWyMrazY0WC3Umoiv3zLyRoNhxsgaufd3IUQqeSlD9B4LG7dQWTru12M%2BqW3MEtUNFsZ8mw%3D%3D) webgl现在应该都是webgl2，所以不要去学webgl1了。当前webgl2使用的GLSL版本应该是3.0, 这个是别人归纳的最常使用的函数:"https://supergithuber.github.io/openGL/GLSLFunction.html" (https://link.segmentfault.com/?enc=Yh71SeW1X2p57dFtmX7KTQ%3D%3D.ovRXkzna%2Btw8IPxwxcqv5gGXMsATejo0CkKrHJLmPv1wY88redCwYSK42dAuWb8Xz4N5i4iTWji2nDWMdApviA%3D%3D), 当然了想要完整的话，可以看"https://docs.gl/el3/all" (https://link.segmentfault.com/?enc=eBbdiz2zSkRUpR3h1P7Otg%3D%3D.n3yOlg1KjPdNo4lZ1v0thatn2bhnZ2%2F6wxziKn6VoJ0%3D) 一个有趣的着色器网站可以让你的实力大增： "https://www.shadertoy.com/" (https://link.segmentfault.com/?enc=wlM4t%2FuRF8FW4EEB8ZDZCQ%3D%3D.T3byNRx%2BMZYg6dA%2FnpBZTtXWsG0VyZlG%2FNjwRz2yi4Q%3D) 很多图形学大佬，其中会隐藏一些很有用的算法 ^_^ 一个让你直观看到GLSL函数图形的网站："https://graphtoy.com/" (https://link.segmentfault.com/?enc=2VTH7VUZzyLw%2BDsfZKimqA%3D%3D.uoqfosOWj0SxArGJTjimHTPXgEH6iziY8ZEO%2B7qSncs%3D) 数学工具："https://www.desmos.com/calculator?lang=zh-CN" (https://link.segmentfault.com/?enc=%2Fc5NaV9DYHqojUzV3WUV7Q%3D%3D.PTYVWJk0WyHcWu26LQwhJgHNH2VxxVpzo3wYKINS%2BpwDPErSxN1S1lLJYbRrhv18) 造型函数，了解的越多你的shader功夫就越厉害，交互式学习网站："https://thebookofshaders.com/05/?lan=ch" (https://link.segmentfault.com/?enc=leBG6bomdnLj3BGmQa6HWQ%3D%3D.tFu4ycjAF6qJ0PgJIVEBiS7cljKegT1n2uXkLFAuW7i%2B5fmTylut%2B5sg0lvWNHmR)