首页 > 代码库 > Three.js学习总结(一)

Three.js学习总结(一)

基本结构


 

这两天开始学习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

 

Three.js学习总结(一)