three.js 笔记一 HELLOWORLD 和参考资源汇总

一、HELLO WORLD

1.显示一个旋转的立方体

<!DOCTYPE html>
<html>

<head>
    <meta charset=utf-8>
    <title>My first three.js app</title>
    <style>
        body {
            margin: 0;
        }

        canvas {
            width: 100%;
            height: 100%
        }
    </style>
</head>

<body>
    <script src="https://threejs.org/build/three.js"></script>
    <script>
        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        var geometry = new THREE.BoxGeometry(1, 1, 1);
        var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
        var cube = new THREE.Mesh(geometry, material);
        scene.add(cube);

        camera.position.z = 5;

        function animate() {
            requestAnimationFrame(animate);
            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;
            renderer.render(scene, camera);
        }
        animate();
    </script>
</body>

</html>

这个例子不过多解释了，只要熟悉三大件renderer.render(scene, camera);，然后将自己的物体add到scene即可。常见物体就是Mesh类型，需要提供geometry和material。

2.下载源码

官网源码中有许多例子：https://threejs.org/

下载后，用VSCODE打开three.js目录。创建.vscode文件夹下的launch.json文件：

{
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "file": "${workspaceRoot}/demo/index.html",
            "name": "启动 Chrome 并打开 localhost",
            "userDataDir": "${workspaceRoot}/.userdata",
            "runtimeArgs": [
                "--allow-file-access-from-files",
                "--allow-file-access-frome-files",
                "--disable-web-security"
            ]
        }
        
    ]
}

这里，我是在three.js目录下又创建了自己的文件夹demo，然后里面放入自己的index.html，内容就用上面的代码即可，当然也可以改改three.js的引入方式：

<script src="../build/three.js"></script>

现在F5运行就可以打开index.html了。

3.VSCODE中增加threejs代码提示

参考vscode支持three提示

npm install -g typings
npm install --save @types/three

再改造一下index.html:

<body>
    <script src="../build/three.js"></script>
    <script src="my.js"></script>
</body>

然后在demo文件夹下新建my.js，把之前的内容挪进去，继续编辑时就发现有代码提示了。

4.使用插件快速运行官方example

参考
vscode下的open in Browser VS open with live Server
VS Code修改Live Server插件改变默认5500端口号以及项目运行时在URL上添加项目名称

open in Browser会有跨域问题，直接装live Server，右键启动即可。

二、threejs学习资源

1.官方资源

three.js中文文档

https://threejs.org/

官方API中文版 https://threejs.org/docs/index.html#manual/zh/introduction/

2.博客

http://www.yanhuangxueyuan.com/ 郭隆邦技术博客

https://www.wellyyss.cn/ 跃焱邵隼

http://www.wjceo.com/ 暮志未晚

https://www.mrguo.link/category 郭志强的博客

3.视频教程

刚接触Threejs，可以看郭隆邦的这个入门：
https://www.bilibili.com/video/BV14r4y1G7h4/

有一定基础的，建议直接看强哥学编程的示例解析：
https://www.bilibili.com/video/BV1p34y1J7Nc/

三、threejs相关

1.搭配pixi.js开发2D

creams-pixi 基于pixi.js封装的楼层剖面图组件

PIXI 结合 THREE 渲染二三维效果

pixi.js + three.js

three.js做2d的ui很麻烦，绝大多数是three.js开发 3d, pixi.js开发2d

2.lil-gui

参考Three.js - 图形界面工具（lil-gui）（四）
https://github.com/georgealways/lil-gui/blob/master/Guide.md
https://lil-gui.georgealways.com/

为了能够快速地搭建three.js的交互UI，社区就出现了各种UI 库，其中lil-gui 是 three.js社区中非常流行的 UI 库。选择它是因为语法简单，上手快。
主要作用，获取一个对象和该对象上的属性名，并根据属性的类型自动生成一个界面组件来操作该属性。
使用它后，我们可以通过界面组件来控制场景中的物体，提高调试效率。

3.cesium

做GIS相关

three.js 笔记一 HELLOWORLD 和 参考资源汇总