首页 > 代码库 > webGL学习笔记一

webGL学习笔记一

2024-08-28 21:33:05   232人阅读

一直对WEBGL感兴趣，终于提起精神学习了，前路漫漫啊~

来源：WEBGL中文网 http://www.hewebgl.com

1、三大组建

在Three.js中，要渲染物体到网页中，我们需要3个组建：场景（scene）、相机（camera）和渲染器（renderer）。有了这三样东西，才能将物体渲染到网页中去。

记住关建语句：有了这三样东西，我们才能够使用相机将场景渲染到网页上去。

2、相机

另一个组建是相机，相机决定了场景中那个角度的景色会显示出来。相机就像人的眼睛一样，人站在不同位置，抬头或者低头都能够看到不同的景色。

场景只有一种，但是相机却又很多种。和现实中一样，不同的相机确定了呈相的各个方面。比如有的相机适合人像，有的相机适合风景，专业的摄影师根据实际用途不一样，选择不同的相机。对程序员来说，只要设置不同的相机参数，就能够让相机产生不一样的效果。

3、渲染器

最后一步就是设置渲染器，渲染器决定了渲染的结果应该画在页面的什么元素上面，并且以怎样的方式来绘制。注意，渲染器renderer的domElement元素，表示渲染器中的画布，所有的渲染都是画在domElement上的，所以这里的appendChild表示将这个domElement挂接在body下面，这样渲染的结果就能够在页面中显示了。

4、添加物体到场景中

5、渲染

6、渲染循环

实例一，初探：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初探</title>
    <style>canvas { width: 100%;height:100%}</style>
    <script src="lib/three.js"></script>
</head>
<body>
    <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.CubeGeometry(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 render() {
            requestAnimationFrame(render);
            cube.rotation.x += 0.1;
            cube.rotation.y += 0.1;
            renderer.render(scene, camera);
        }
        render();
    </script>

</body>
</html>

 

webGL学习笔记一


联系
我们