关于js学习-初体验

为什么分类到opengl?

因为three.js->webgl->opengl of web,
so js is is significant of three.js ,so does opengl .(hhh,虽然是硬扯,但是确实有点关系)

前言

用js也做了一个月的项目了,所以说,事实证明,有时候,就算不懂语法,项目也是照样写,根本不需要系统的学习了某方面的知识了,直接拿来用就行.
坚持两个原则:“实事求是,不会就查”,下面,让我们以一个外行的角度来学习js.

js的基础语法

以下是JavaScript中基本语法元素的分类：

1.Variables(变量):

Declaration: Use let, const, or var to declare variables:

let name = 'Alice';
const age = 30;
var isStudent = true;

2.Data Types(数据类型):

Primitive Types: String, Number, Boolean, Undefined, Null, Symbol.

let name = 'Alice'; // String
let score = 85; // Number
let isActive = true; // Boolean
let notDefined; // Undefined
let noValue = null; // Null

3.Arrays:

Collection of elements.

let numbers = [1, 2, 3, 4, 5];

关于数组,我要提问一下:如何定义一个数组,并初始化?

• 方一:

//数组定义
var array = Array(14).fill(undefined);//存放14个元素
//数组初始化
array[0] = mesh0;//表示array[0]指向了mesh0这个对象
...
array[13] = mesh13;

• 方二:

//数组定义
var array = [];
//数组初始化
array.push(mesh0);
array.push(mesh1);
array.push(mesh2);
array.push(mesh3);
array.push(mesh4);
...
array.push(mesh13);

关于数组的初始化,我遇到了一个很大的问题,下面让你也来看一下?

• 错误的:

var Dental_arch_line = Array(14).fill(undefined);//存放牙弓线需要的每一个坐标
for (let i = 0; i < meshes.length; i++) {
  meshes[i].geometry.computeBoundingBox();//该行与下面这行是计算模型的中心点
  meshes[i].geometry.boundingBox.getCenter(modelCenter);
  Dental_arch_line[i] = modelCenter;//拿到模型的坐标
}

问题 : Dental_arch_line[0]~Dental_arch_line[13]的数据都是一致的
为什么?
答:

这是因为Dental_arch_line[i] = modelCenter很像c++中的指针,Dental_arch_line[0]~Dental_arch_line[13]这些对象都指向了modelCenter这个对象,而这个对象是不断变化的,直到最后一次循环,所有的元素的数据都等于最后一次遍历的数值

• 正确的:(改成modelCenter.clone())

var Dental_arch_line = Array(14).fill(undefined);//存放牙弓线需要的每一个坐标
for (let i = 0; i < meshes.length; i++) {
  meshes[i].geometry.computeBoundingBox();//该行与下面这行是计算模型的中心点
  meshes[i].geometry.boundingBox.getCenter(modelCenter);
  Dental_arch_line[i] = modelCenter.clone();//拿到模型的坐标
}

• 再提一嘴

array.push(mesh0);
array.push(mesh1);
array.push(mesh2);
array.push(mesh3);
array.push(mesh4);
...
array.push(mesh13);

这个没问题,
这是因为mesh0~mesh13不是同一个对象

4.Objects:

Key-value pairs.

let person = {
  name: 'Alice',
  age: 30
};

5.Operators:

• Arithmetic: +, -, *, /, %, ++, --.
• Assignment: =, +=, -=, *=, /=.
• Comparison: ==, =, !=, !, >, <, >=, <=.
• Logical: &&, ||, !.

6.Control Structures:

• If-Else:

if (score > 50) {
  console.log('Pass');
} else {
  console.log('Fail');
}

• Loops:
  • For Loop:

for (let i = 0; i < 5; i++) {
	console.log(i);
}

• While Loop:

let i = 0;
while (i < 5) {
  console.log(i);
  i++;
}

7.Functions:

Declaration and invocation.

function greet(name) {
  return 'Hello ' + name;
}
console.log(greet('Alice'));

8.Events(事件):

Handling DOM events.

document.getElementById('myButton').addEventListener('click', function() {
  alert('Button clicked!');
});

9. Comments(注释):

Single line: // This is a comment
Multi-line:
/* This is a 
   multi-line comment */

思考:difference of ‘var’ and ‘let’

1.Scope(范围):

• var声明了一个具有函数作用域的变量，这意味着如果它在函数内部声明，它只能在该函数内访问。
• let声明了一个具有块作用域的变量，这意味着它只能在声明它的块（由{}包围）中访问，例如在循环或if语句中。

2.Hoisting(变量提升):

• 使用var声明的变量被提升到其作用域的顶部，并且即使在声明之前，也可以在其封闭作用域中访问。但是，它们被初始化为undefined，直到代码中到达它们的’‘程序员手动初始化’'。(我就喜欢用在这个,一次定义,到处使用)
• 用let声明的变量也会被提升，但它们不会被初始化。在声明之前删除它们将导致ReferenceError。(这个不咋用,后续应该也不会再用js了,就玩一下js)

3.Re-declaration(重新声明):

在同一作用域内，用var声明的变量可以重新声明，但是这可能会导致bug(代码逻辑混乱)。
用let声明的变量不能在同一作用域中重新声明。

4.Global Object Property(全局对象属性):

全局声明的var变量成为全局对象（浏览器中的窗口）的属性。
全局声明的let变量不会成为全局对象的属性。

5.Use in Modern JavaScript(在现代JavaScript中的使用):

var是声明变量的较旧的方式，通常用于遗留代码中。
let是在ES6（ECMAScript 2015）中引入的，由于其可预测性和更安全的作用域，现在是声明变量的推荐方法。

初学者更倾向于var , 因为js现在做到可视化非常容易,要改bug也可以很快定位问题,初学者具体用什么,欢迎深耕js几十年的大佬,前来建议!

function varLetExample() {
  if (true) {
    var varVariable = 'I am var';
    let letVariable = 'I am let';
  }

  console.log(varVariable); // Output: 'I am var'
  console.log(letVariable); // ReferenceError: letVariable is not defined
}

three.js应该怎么入手一波?

个人观点,仅供参考

有了前面js的基础,初学者不用考虑太多,直接用起来才是关键!
争议最大的就是var 与 let ,初学者就直接用var就行(假如说你只是玩玩的话,因为let的作用范围是一个 大的 难题 , 别js代码没写几句,就给你劝退了,那就难受了)

接下来是一些大佬的建议:

1.理解三维图形基础：

• 熟悉三维空间、向量、和矩阵的概念。
  -了解基本的图形学概念，如光照、材质、纹理、和摄像机。

2.学习three.js基础：

阅读three.js的官方文档three.js documentation。
理解基本的three.js组件，如场景（scene）、渲染器（renderer）、相机（camera）、几何体（geometry）、材质（material）和光源（light）。

3.跟随教程和示例：

通过在线教程学习，如three.js的官方示例three.js examples。
观看视频教程，YouTube上有许多关于three.js的教程,很多英文教程确实很不错。

4.动手实践：

开始实践时，尽量保持简单。例如，创建一个基本的三维场景，添加一个几何体和光源。
逐渐尝试更复杂的任务，如添加动画、用户交互、加载模型等。
(用户交互这方面非常难,从12月初开始,一直到我在写这篇文章(1月15号)时,还是没有办法很好的处理鼠标坐标与模型矩阵变换的问题,不太清楚为啥模型会位移一大段距离才能进行一些交互,等等,非常难,我非常渴望遇到一个超级大佬为我解答这个问题.)

5.解决问题：

遇到问题时，利用搜索引擎和three.js的社区（如Stack Overflow上的three.js标签）寻找答案。
学会阅读并理解错误信息和警告，它们通常会指向问题的根源。
(基本上,语法上的错误,你都可以在Stack Overflow上找到答案 ; 但是关于没有语法错误的优化上,就找不到了)

6.构建小项目：

通过构建小型项目来应用你的技能。这可以是一个简单的动画、一个互动式的3D对象，或者一个小游戏。
试着复现你喜欢的three.js项目，这是学习的好方法。

7.持续学习：

three.js是一个持续发展的库，时刻关注其更新和新特性。
探索高级主题，如着色器（shaders）、物理效果或后期处理。
记住，学习three.js是一个逐步的过程，不要急于求成(我是一个月速成的,因为我并不打算长期从事three.js , 搞一段时间的three.js重心就要回到c++了 , ,c++或许才是三维领域的真神 ! hhh, 假如说你时间充裕的话,还是一步一步来吧! 加油!)。一开始，专注于基础知识和简单的项目。随着时间的推移，你可以逐渐增加项目的复杂性。最重要的是，享受创造和学习的过程！

8. 题外话

原来右下角的小字是这么写的:$a_1$
但是只可以写到$a_1$~$a_9$