Three.js 新手开发者的冒险之旅
Three.js 新手开发者的冒险之旅
介绍
跟着我一起冒险进入three.js。这与其说是一个教程，不如说是一个文档反刍。但是，我将提供有关如何处理事情的说明，就像我为那些发现阅读博客文章比阅读文档更有趣的人所做的那样。其他人，请随时前往文档 这里 反而。
设置
我在 Mac 上使用 iterm 和 VS 代码，因此请注意，某些细节会因您使用的内容而异。
在终端中，将 three.js 保存在某处，以便您可以将其复制到您在 rly cool 3D 开发人员未来制作的任何文件中。我选择在我的主目录中进行。
mkdir threeJs 其次是 卷曲 https://threejs.org/build/three.js >> threeJs/three.js 存放以妥善保管。
现在 cd 进入你正在工作的任何文件夹，然后 cp ~/threeJs/three.js ~/your/destination/path/goes/here/three.js .我喜欢将我的脚本保存在他们自己的文件夹中，所以我的路径看起来像这样 cp ~/threeJs/three.js ~/sei54-classwork/playbin/threeJs/JS/three.js .
三已经不再是一个真正的词，以后也不会再出现了，但我会说很多，所以我想我们早点把它排除在外是件好事。 触摸索引.html 和 触摸JS/cube.js .让我们把它交给我们的编辑。
入门
文档建议在脚本标签之间的 HTML 中编写脚本，但我不同意，所以让我们使用我们之前制作的 cube.js 文件。
我们需要三件事来设置我们的 Three.js 样板。
1. 场景
注意这里的大小写。 常量场景 = 新的 THREE.scene() 会让一切都彻底破碎，你会感到非常难过。
2. 相机
我们可以在这里使用许多相机，但文档以 PerspectiveCamera 开头，我也是。
我们赋予 PerspectiveCamera 的第一个属性是 视野 , 75 这里的意思是75度。这本质上是在任何给定时间显示我们场景的哪些部分。 Three.js 的全部意义在于它是 3D 的，因此就像在生活中一样，我们的模拟 3D 对象从任何给定的角度来看都会有可见和不可见的部分。
window.innerWidth / window.innerHeight
接下来是 纵横比 .使用 宽度 除以 高度 意味着我们的元素不会被压扁和看起来很奇怪。这使一切都成比例。在使用 CSS 控制图像的宽度和高度时，您可能会遇到类似的问题。当你试图控制这两个方面时，事情往往会以奇怪的方式伸展和挤压。这里的宽度除以高度为控制 Three.js 元素的比例提供了一个优雅的解决方案。
最后，我们有 靠近 和 远的 .就是最后那两个数字。这控制消失点。比我们的 far 值更远的东西不会被渲染，那些比我们的 near 值更近的东西也不会被渲染。文档在这一点上拍了拍我们的头，告诉我们暂时不要担心，但显然，这可能有助于在未来的应用程序中玩弄“更好的性能”。不管什么意思。我们继续前进。
3. 渲染
const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement);
与相机一样，渲染也是如此。有很多选项，我们首先使用 WebGLRenderer。其他的主要用作不支持 WebGLRender 的浏览器的后备。
renderer.setSize(window.innerWidth, window.innerHeight);
在这里，我们将宽度和大小设置为我们想要填充的区域，即我们的屏幕。自定义此用途 设置大小 .但是，要自定义分辨率，请调用 设置大小 和 错误的 作为 更新样式 .
document.body.appendChild(renderer.domElement);
最后但并非最不重要的一点是，我们像我们这些暴力的小 javascript 程序员一样，通过 dom 塞满所有东西。
现在我的 index.html 看起来像这样：
虽然我的 cube.js 看起来像这样
常量场景 = 新的三个场景（）； const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0 .1, 1000) const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendCHild(renderer.domElement);
现在让我们做点什么。
做点什么
const pink = new THREE.Color("pink"); const geometry = new THREE.BoxGeometry(1, 1, 1);常量材料=新三。MeshBasicMaterial（{颜色：粉红色}）； const cube = new THREE.Mesh（几何，材料）；场景.添加（立方体）； camera.position.z = 5;
立方体的成分几乎都在 箱形几何 目的。它包含所有 垂直 和 面孔 我们的立方体。我们的颜色，颜色。男孩，使用该词的澳大利亚拼写感觉很好。
OG 文档为我们提供了这个可怕的绿色立方体：
常量材料=新的三。MeshBasicMaterial（{颜色：0x00ff00}）
不适合我。我玩了一会儿，发现我在初始化新的三个网格的同时改变颜色的大部分努力导致一切都破裂了。
所以我继续深入研究 Three.js 'Color' 文档 这里 玩弄各种可能性，因为 Three.js 想要对它挑剔。
您可以参考文档以查看可以初始化颜色的所有方法，我选择了一些简单的方法。
const pink = new THREE.Color("pink");常量材料=新三。MeshBasicMaterial（{颜色：粉红色}）；
此时，您可能会想“好吧，但我打错了什么？我会在我现在正在研究的空白空间上涂上任何颜色”。抓住你的马，我们甚至没有 渲染场景 然而！
渲染场景
要将我们的立方体从我们的想象中拉出来并进入我们的电脑屏幕，我们必须使用 使成为 或者 动画 环形
{ requestAnimationFrame( 动画 ); renderer.render（场景，相机）； } 动画（）；
看着你走，你这个疯狂的小科学家。你生了一个立方体。 渲染器.render 有点拗口。不热衷于再次命名变量。那好吧。
动画函数使用 requestAnimationFrame 创建一个导致 渲染器 每次刷新屏幕时重绘场景。使用 requestAnimationFrame 的一个好处 设置间隔 例如，当用户单击另一个选项卡时，requestAnimationFrame 会在 setInterval 将继续的位置暂停。使用 requestAnimationFrame 来拯救环境，恢复世界和平，并保持我们用户的处理能力和电池寿命不被浪费。
好吧，这一切都很好而且很有趣，但它不完全是 3D 的吗？
请立即制作 3D
看它走。哇。
完整的JS在这里
常量场景 = 新的三个场景（）； const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0 .1, 1000); const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement);常量紫色 = 新三色（“紫色”）； const geometry = new THREE.BoxGeometry(1, 1, 1);常量材料 = 新的 THREE.MeshBasicMaterial({ 颜色：紫色 }); const cube = new THREE.Mesh(geometry, material);场景.添加（立方体）； camera.position.z = 5; { requestAnimationFrame(动画);立方体.旋转.x + = 0 .01;立方体.旋转.y = + 0 .01; renderer.render（场景，相机）； } 动画（）；
最初发表于 https://yasmina95.hashnode.dev .
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
