[three.js study notes] 01 scene camera and geometry framework

three.js helps to easily use webgl to create 3D scenes and animations. This is the first chapter of my study notes.

import three.js

Remote Lite? : https://threejs.org/build/three.js
three.min.js is close to 500k. In fact, it is still very large. I don’t know why this is so small
. First, we need to introduce three.js
to create a canvas
html as a display window:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src='https://threejs.org/build/three.js'></script>
    <title>场景</title>
    <style>
        body{
            margin:0;padding:0;
            overflow:hidden;
        }
    </style>
</head>
<body>
    <div id="WebGL-output"></div><!--场景的容器-->
    <script>
        //初始化函数。在加载three之后调用，初始化所有的东西
        function init(){
        }
        window.onload = init;
    </script>
</body>
</html>

Create Scenes and Cameras and Renderers

    function init(){
        //创建一个新的场景
        var scene = new THREE.Scene();
        //创建透视相机
        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
        //后面的参数分别是 透视角度，长宽比例，近视锥面，远视锥面 

        //小于近视锥面的物体将不渲染，远于远视锥面的物体也不渲染
        //设置相机位置与朝向
        camera.position.x = -30;
        camera.position.y = 40;
        camera.position.z = 30;
        camera.lookAt(scene.position);

        //创建渲染器
        var renderer = new THREE.WebGLRenderer();
        renderer.setClearColor(new THREE.Color(0xEEEEEE));//渲染器清除颜色 ：淡灰色
        renderer.setSize(window.innerWidth,window.innerHeight);
        //在div内放置canvas
        document.getElementById("WebGL-output").appendChild(renderer.domElement);
        //渲染
        renderer.render(scene, camera);
    }
    window.onload = init;

Add a coordinate system

After running it, we found that there is nothing in it except that the page color has become eee, a light gray.
Continue to add in the init function

    var axes = new THREE.AxesHelper(20);
    scene.add(axes);

This code is added before rendering, and after running, a coordinate axis auxiliary line will appear in the middle of the canvas:
three.js axis guide
the red line is the positive x direction, the green line is the positive y direction, the blue line is the z direction, and the three.js The lower-level WebGL uses the right-handed coordinate system by default. If you change the position of the camera, the coordinate system will change accordingly. This auxiliary coordinate system is convenient for development. And determine the location of the scene origin.

add a plane

    var planeGeometry = new THREE.PlaneGeometry(60, 20);//框架 长60 宽20
    var planeMaterial = new THREE.MeshBasicMaterial({color: 0xcccccc});//材质 单纯只有颜色的材质
    var plane = new THREE.Mesh(planeGeometry, planeMaterial);//填充

    //更改平面位置
    plane.rotation.x = -0.5 * Math.PI;//按照x轴旋转90度
    plane.position.x = 15;//向x正方向移动一点点
    plane.position.y = 0;
    plane.position.z = 0;

The above code adds a gray plane parallel to the plane formed by the x-axis and the z-axis. The
effect is as follows:
flat

Add geometry frame

Cube:
continue to add in the init function

//创建立方体
    var cubeGeometry = new THREE.BoxGeometry(4,4,4);//大小
    var cubeMaterial = new THREE.MeshBasicMaterial({color:0xff7777,wireframe: true});
    var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

    //立方体位置
    cube.position.x = -4;
    cube.position.y = 3;
    cube.position.z = 0;
    //将立方体添加进入场景
    scene.add(cube);

After creating the effect, you can see a cube frame composed of lines:
cube framework three.js

The cube defaults to the center point as the center of the object

Sphere:
continue to join in the init function

    //添加球体
    var sphereGeometry = new THREE.SphereGeometry(4, 20 ,20);
    var sphereMaterial = new THREE.MeshBasicMaterial({color:0xff77ff, wireframe:true});
    var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);

    //设定球体位置
    sphere.position.x = 18;
    sphere.position.y = 4;
    sphere.position.z = 2;
    //将球体加入到场景中
    scene.add(sphere);

Then the frame structure of spheres and cubes will appear in the scene:
three.js sphere cube framework

Cylinder is added
in the init function:

    var cylinderGeometry = new THREE.CylinderGeometry( 4, 4, 5, 5);
    //四个参数分别为。上底面半径，下底面半径，高 和边数，如果很多则就是圆柱体
    var material = new THREE.MeshBasicMaterial({color:0xffff33,wireframe:true});
    var cylinder = new THREE.Mesh(cylinderGeometry,material);

    //设定位置
    cylinder.position.x = 2;
    cylinder.position.y = 2.5;
    cylinder.position.z = 6;
    //添加柱体
    scene.add(cylinder);

Effect:
three.js geometry

There are many methods of generating geometry in three's geometry, please check
the geometry in three.js by yourself

The next chapter will introduce rays in three_ (:зゝ∠)_