Front-end 3D Three.js Build an official website locally

In the above web front-end 3D development entry plan 3D effect will no longer be a patent for desktop applications. We talked about a development and learning direction of WEB 3D. Then we should first solve the problem of document use.
We can visit http://www.yanhuangxueyuan. com/Three.js/ You can find the method of use here, but it is not the latest one, but someone else changed it with the official document. The
real official document address is https://threejs.org/
, but after all, this is a foreign address, which is very slow for us In fact, it will be quite inconvenient to use it. It takes a long time to see a case and things come out.

We click github under Code in the left directory,
insert image description here
and we will enter his git address. Note that the branch must be the dev development branch.
insert image description here
Then we download it by downloading the compressed package. You
insert image description here
can also try to clone it.
I just clicked the download link and couldn’t find it. I cloned it overnight because the resource is too large.
insert image description here
Open the project and we must install the dependencies first.

npm i

insert image description here
Then we execute the command to start the project
insert image description here
, and the terminal will give you three addresses, just run one on the browser. Here,
insert image description here
we will be warned that the address is not safe. Click Advanced
insert image description here
and click the link below
insert image description here
to enter the project directory.
insert image description here
If you want to see it Documentation is docs/
insert image description hereClick to enter is documentation
insert image description here
If you want to see the case, click on the examples above the left navigation,
insert image description here
then if we want to see the code of the current case, we can copy the address in the navigation
insert image description here
and press Ctrl+p in the Visual Studio Code project Find the corresponding files.
insert image description here
These cases are placed in the examples directory of the project.
insert image description here
We click on the editor/ on the homepage to enter
insert image description here
, and there will be an editor for everyone to use.
insert image description here

Guess you like

Origin blog.csdn.net/weixin_45966674/article/details/131333050