zoukankan      html  css  js  c++  java
  • three.js 显示一个绿色的正方体

    第一个框架的效果是显示一个绿色的正方体

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <style>canvas { width: 100%; height: 100% }</style>
        <script src="libs/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);//domElement元素,表示渲染器中的画布,所有的渲染都是画在domElement上的
            var geometry = new THREE.CubeGeometry(1,1,1);//THREE.CubeGeometry是一个几何体,有3个参数:width:立方体x轴的长度,height:立方体y轴的长度,depth:立方体z轴的深度
            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这个神奇的世界的开始。借助于three.js,我们并没有写太多的代码就完成了这个示例。现在,我们来分析它。

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

    1.场景

    在Threejs中场景就只有一种,用THREE.Scene来表示,要构件一个场景也很简单,只要new一个对象就可以了,代码如下:

    var scene = new THREE.Scene();

    场景是所有物体的容器,如果要显示一个苹果,就需要将苹果对象加入场景中。

    2.相机

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

    场景只有一种,但是相机却又很多种。和现实中一样,不同的相机确定了呈相的各个方面。比如有的相机适合人像,有的相机适合风景,专业的摄影师根据实际用途不一样,选择不同的相机。

    对程序员来说,只要设置不同的相机参数,就能够让相机产生不一样的效果。

    3.渲染器

    设置渲染器,渲染器决定了渲染的结果应该画在页面的什么元素上面,并且以怎样的方式来绘制。

    注意,渲染器renderer的domElement元素,表示渲染器中的画布,所有的渲染都是画在domElement上的,所以这里的appendChild表示将这个domElement挂接在body下面,这样渲染的结果就能够在页面中显示了。

    4.添加物体到场景中

    CubeGeometry是一个正方体或者长方体,究竟是什么,由它的3个参数所决定,cubeGeometry的原型如下代码所示:

    CubeGeometry(width, height, depth, segmentsWidth, segmentsHeight, segmentsDepth, materials, sides)

    width:立方体x轴的长度

    height:立方体y轴的长度

    depth:立方体z轴的深度,也就是长度

    想一想大家就明白,以上3个参数就能够确定一个立方体。

    5、渲染

    渲染器,结合相机和场景来得到结果画面。实现这个功能的函数是

    renderer.render(scene, camera);

    渲染函数的原型如下:

    render( scene, camera, renderTarget, forceClear )

    各个参数的意义是:

    scene:前面定义的场景

    camera:前面定义的相机

    renderTarget:渲染的目标,默认是渲染到前面定义的render变量中

    forceClear:每次绘制之前都将画布的内容给清除,即使自动清除标志autoClear为false,也会清除。

    6、渲染循环

    渲染有两种方式:实时渲染和离线渲染 。

    先看看离线渲染,想想《西游降魔篇》中最后的佛主,他肯定不是真的,是电脑渲染出来的,其画面质量是很高的,它是事先渲染好一帧一帧的图片,然后再把图片拼接成电影的。这就是离线渲染。如果不事先处理好一帧一帧的图片,那么电影播放得会很卡。CPU和GPU根本没有能力在播放的时候渲染出这种高质量的图片。

    实时渲染:就是需要不停的对画面进行渲染,即使画面中什么也没有改变,也需要重新渲染。下面就是一个渲染循环:

    function render() {
        cube.rotation.x += 0.1;
        cube.rotation.y += 0.1;
        renderer.render(scene, camera);
        requestAnimationFrame(render);
    }

    其中一个重要的函数是requestAnimationFrame,这个函数就是让浏览器去执行一次参数中的函数,这样通过上面render中调用requestAnimationFrame()函数,requestAnimationFrame()函数又让rander()再执行一次,就形成了我们通常所说的游戏循环了。

  • 相关阅读:
    我的浏览器收藏夹分类
    我的浏览器收藏夹分类
    Java实现 LeetCode 318 最大单词长度乘积
    Java实现 LeetCode 318 最大单词长度乘积
    Java实现 LeetCode 318 最大单词长度乘积
    Java实现 LeetCode 316 去除重复字母
    Java实现 LeetCode 316 去除重复字母
    Java实现 LeetCode 316 去除重复字母
    Java实现 LeetCode 315 计算右侧小于当前元素的个数
    Java实现 LeetCode 315 计算右侧小于当前元素的个数
  • 原文地址:https://www.cnblogs.com/Yimi/p/6007162.html
Copyright © 2011-2022 走看看