learn threejs (最小化例子）

参考来源
https://www.youtube.com/watch?v=gbTnojWE78k&t=803s

https://github.com/00-joe-js/playground-of-huge-potential

最小化场景例子

https://github.com/chunleili/threejsMinimal

运行方法：
git clone之后
VS code 打开文件夹

安装

npm install
1

运行

npm run dev
1

打开浏览器：
http://localhost:3000/

控制：鼠标右键平移，鼠标左键旋转

提示：可以用win+上下左右来分屏显示代码和浏览器，方便调试
提示：可以使用VS Code插件 colonize来自动为js添加分号（快捷键alt+enter）

为场景添加物体

打开代码src/index.ts

添加一个box(屏幕中间青色的那个板子）

        //add box
        const boxGeo = new BoxGeometry(150,15,150);
        const boxMat = new MeshBasicMaterial({color:0x00ffff});
        const box = new Mesh(boxGeo, boxMat);
        scene.add(box);
        box.position.y += 100;
1
2
3
4
5
6

解释：首先添加BoxGeometry，其次添加MeshBasicMaterial，最后把它们绑定一起，添加Mesh。然后在scene中添加这个box。最后调整box的高度。

所有threejs场景中的物体均是Geometry+Material 的组合，或者称之为Mesh。以后就用Mesh来指代threejs中的一个物体。

照猫画虎，再添加一个ball2

        //add ball2
        const ball2Geo = new SphereGeometry(100);
        const ball2Mat = new MeshBasicMaterial({color:0xff0000, wireframe:true});
        const ball2 = new Mesh(ball2Geo, ball2Mat);
        scene.add(ball2);
        ball2.position.y += 200;
        ball2.position.x += 10;
1
2
3
4
5
6
7

这次唯一不同在于增加了wireframe:true选项。Material就相当于一个蒙皮（skin），wireframe就是暴露出骨架。