three.js的基础使用

Posted 2023-03-04

参考技术A 1、npm 引入（需安装npm, 安装three, 不需要单独引入loader等）。

2、通过外部cdn链接直接引入（直接html起步，简单一把梭，需单独引入loader, model, controls等）。

1、创建场景

2、可以设置background和environment.

3、接下来所有的object都需要添加在scene中。

1、相机类型有

2、创建相机

1、创建渲染器

2、放入场景和相机，并挂载到HTML上。

1、three.js中有很多元素可以添加，比如Line,Geometry, Helper, light ,还可以引入图片或者模型model(需要loader).

1、

2、

1、主体script需添加type="module", 不然不起作用。

2、要在html里直接使用three.js，需要添加importmap

3、安装live preview扩展，创建本地服务器，解决跨域问题。