three.js

【带着canvas去流浪(15)】threejs fundamentals翻译系列1-scene graph

给你一囗甜甜゛ 提交于 2020-10-17 08:42:55
示例代码托管在: http://www.github.com/dashnowords/blogs 博客园地址: 《大史住在大前端》原创博文目录 华为云社区地址: 【你要的前端打怪升级指南】 目录 原文地址: https://threejsfundamentals.org/threejs/lessons/threejs-scenegraph.html 笔者按:别关键词保持原英文单词,理解起来会更方便。原文中有许多内嵌的支持在线编辑的示例代码,可点击上面链接直接体验。 本文是 three.js 系列博文的一篇,第一篇文章是 【three.js基础知识】 ,如果你还没有阅读过,可以从这一篇开始,页面顶部可以切换为中文或英文。 three.js 中最核心的部分可能就是 scene graph (或称为场景节点图)。3D引擎中的 scene graph 是一个表示继承关系的节点图谱,图谱中的每个节点都表示了一个本地坐标空间。 这样说可能比较抽象,我们来举例说明一下。一个典型的例子就是模拟银河系中的太阳,地球和月亮。 地球轨迹是绕着太阳的,月球的轨迹是绕着地球的。月亮绕着地球做圆周运动,从月球的视角来观察时,它是在地球的”本地坐标空间“中进行旋转的,然而如果相对于太阳的“本地坐标空间”来看,月球的运动轨迹就会变成非常复杂的螺旋线。(原文中下图是javascript代码实现的动画)