Three.js学习总结

Posted 2020-09-04 zhangxiaoshuang

基本结构

---

 

这两天开始学习Three.js，首先为其顺了一个基本的结构（首先需要引用three.js）：

1、创建WebGL画布（与canvas画布是联系在一起的）、（即渲染）；

2、创建场景；

3、创建照相机并添加至场景；

4、创建灯光并添加至场景（可选，当物体材质为需要光时，则必须添加）；

5、创建物体及其材质，两者合在一起创建网络并添加至场景；

6、渲染。

 

1、创建WebGL画布（与canvas画布是联系在一起的）、（即渲染）

---

 

　　有两种方式，一种是已经有canvas画布，另一种是未创建canvas，需要自己创建。

        // renderer
        let renderer = new THREE.WebGLRenderer({
            canvas: document.getElementById(‘mainCanvas‘)
        });
        //设置颜色
        renderer.setClearColor(0x000000); // black

        //当未创建canvas时
　　　　 let renderer = new THREE.WebGLRenderer();
        renderer.setSize(400, 300);
        document.getElementsByTagName(‘body‘)[0].appendChild(renderer.domElement);

2、创建场景

---

 

　　这里说的场景，概念和画布很类似，场景内放物体，场景放到画布上。

        // scene
        let scene = new THREE.Scene();

3、创建照相机并添加至场景

---

 

　　照相机就相当于人眼睛一样，只有在照相机视野里的物体才会被看到。

         // camera
        let camera = new THREE.PerspectiveCamera(45, 4 / 3, 1, 1000);
        camera.position.set(0, 0, 5);
        scene.add(camera);        

 

4、创建灯光并添加至场景（可选，当物体材质为需要光时，则必须添加）

---

 

　　　图像渲染的丰富效果很大程度上也要归功于光与影的利用，通过计算机模拟真实世界的光，可以模拟真实情景。

        //如设置点光源
        let light = new THREE.PointLight(0xffffff, 1, 100);
        light.position.set(10, 15, 5);
        scene.add(light);    

5、创建物体及其材质，两者合在一起创建网络并添加至场景

---

 

　　在场景中创建物体，并为物体选择一种材质，初始化为网络。

    let cube = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3),
            new THREE.MeshBasicMaterial({
                color: 0xff0000
            })
        );
　　scene.add(cube);
    

6、渲染

---

 

         // render
        renderer.render(scene, camera);    

实例

---

 

另附一些简单正在更新学习中的例子：

github地址：https://github.com/zhangxiaoshuang32/WebVR

在线演示：https://zhangxiaoshuang32.github.io/WebVR/index.html