learn threejs (最小化例子） javascript

参考来源
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

运行

npm run dev

打开浏览器：
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;

解释：首先添加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;

【learn threejs (最小化例子）】这次唯一不同在于增加了wireframe:true选项。Material就相当于一个蒙皮（skin），wireframe就是暴露出骨架。