• Three.js 学习笔记之一 Helloworld(翻译)


    创建一个场景

    本节的目的是简要介绍three.js。我们将从建立一个具有旋转立方体的场景开始。

    开始之前

    在使用three.js之前,您需要在某个地方显示它。将以下HTML以及js /目录中three.js副本保存到计算机上的文件中,然后在浏览器中将其打开。

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>第一个three.js程序</title>
        <style>
            body {
                margin: 0;
            }
            canvas {
                 100%;
                height: 100%
            }
        </style>
    </head>
    <body>
        <script src="js/three.js"></script>
        <script>
           //JS代码区域
        </script>
    </body>
    </html>

    就这样。下面的所有代码都放入空的<script>标记中。

    创建场景

    为了真正能够使用three.js显示任何内容,我们需要三件事:场景,相机和渲染器,以便我们可以使用相机渲染场景。

       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);

    让我们花点时间解释一下这里发生的事情。现在,我们已经设置了场景,我们的相机和渲染器。

    three.js中有一些不同的相机。现在,让我们使用PerspectiveCamera

    第一个属性:视野FOV是在任何给定时刻在显示屏上看到的场景范围。该值以度为单位。

    第二个是:长宽比您几乎总是想用元素的宽度除以高度,否则得到的效果与在宽屏电视上播放老电影时的效果相同-图像看起来很压缩。

    接下来的两个属性是裁剪平面。这是什么意思,是对象从相机比的值越远或近于附近将不会被渲染。您现在不必为此担心,但是您可能希望在应用程序中使用其他值以获得更好的性能。

    接下来是渲染器。这就是魔术发生的地方。除了我们在这里使用的WebGLRenderer之外,three.js还有其他一些,通常用作使用较旧浏览器的用户或由于某些原因不支持WebGL的用户的备用。

    除了创建渲染器实例之外,我们还需要设置渲染应用程序实例的大小。最好使用我们要在应用程序中填充的区域的宽度和高度-在这种情况下,使用浏览器窗口的宽度和高度。对于性能密集型应用程序,您还可以给setSize较小的值,例如window.innerWidth / 2window.innerHeight / 2,这将使应用程序以一半大小呈现。

    如果您希望保留应用程序的大小但以较低的分辨率进行渲染,则可以通过将setSize设置为false作为updateStyle(第三个参数)来实现。例如,鉴于您的<canvas>具有100%的宽度和高度setSize(window.innerWidth / 2,window.innerHeight / 2,false)将以半分辨率呈现您的应用程序。

    最后但并非最不重要的一点是,我们将renderer元素添加到HTML文档中。这是渲染器用来向我们显示场景的<canvas>元素。

    “那很好,但是你答应的那个魔方在哪里?” 现在添加它。

    var geometry = new THREE.BoxGeometry( 1, 1, 1 );
    var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
    var cube = new THREE.Mesh( geometry, material );
    scene.add( cube );
    camera.position.z = 5;

    要创建一个多维数据集,我们需要一个BoxGeometry该对象包含多维数据集的所有点(顶点)和填充()。将来我们将对此进行更多探讨。

    除了几何图形,我们还需要一种材料对其进行着色。Three.js附带了几种材料,但我们现在将坚持使用MeshBasicMaterial所有材料均具有将应用于其的属性对象。为了使事情变得非常简单,我们只提供0x00ff00的color属性,它是绿色。这与在CSS或Photoshop中使用颜色十六进制颜色)的方式相同。

    我们需要的第三件事是网格网格是采用几何形状并对其应用材质的对象,然后我们可以将其插入场景并自由移动。

    默认情况下,当我们调用scene.add()时,我们添加的内容将被添加到坐标(0,0,0)中这将导致摄像机和立方体都位于彼此内部。为避免这种情况,我们只需要稍微移开相机即可。

    渲染场景

    如果将代码从上面复制到我们之前创建的HTML文件中,您将看不到任何内容。这是因为我们实际上还没有渲染任何东西。为此,我们需要所谓的render或animate loop

    function animate() {
    requestAnimationFrame( animate );
    renderer.render( scene, camera );
    }
    animate();

    这将创建一个循环,使刷新器在每次刷新屏幕时绘制场景(在典型的屏幕上,这意味着每秒60次)。如果您不熟悉在浏览器中编写游戏的内容,则可以说“我们为什么不创建setInterval吗?” 问题是-我们可以,但是requestAnimationFrame有许多优点。也许最重要的一个是,当用户导航到另一个浏览器选项卡时它会暂停,因此不会浪费他们宝贵的处理能力和电池寿命。

    动画立方体

    如果将上面所有代码插入我们开始之前创建的文件中,您将看到一个绿色框。让我们通过旋转使它变得更加有趣。

    在您的动画函数中renderer.render调用上方添加以下内容

    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    这将每帧运行一次(通常每秒运行60次),并为立方体提供漂亮的旋转动画。基本上,您想要在应用运行时移动或更改的所有内容都必须经过动画循环。当然,您可以从那里调用其他函数,这样就不会以数百行动画函数结束

    结果

    恭喜你!现在,您已经完成了第一个three.js应用程序。很简单,您必须从某个地方开始。

    完整的代码可在下面获得,并作为可编辑的实时示例试一试,以更好地了解其工作原理。

    <html>
    <head>
        <title>My first three.js app</title>
        <style>
            body {
                margin: 0;
            }
    
            canvas {
                 100%;
                height: 100%
            }
        </style>
    </head>
    <body>
        <script src="js/three.js"></script>
        <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.BoxGeometry(1, 1, 1);
            var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
            var cube = new THREE.Mesh(geometry, material);
            scene.add(cube);
    
            camera.position.z = 5;
    
            var animate = function () {
                requestAnimationFrame(animate);
    
                cube.rotation.x += 0.01;
                cube.rotation.y += 0.01;
    
                renderer.render(scene, camera);
            };
    
            animate();
        </script>
    </body>
    </html>
  • 相关阅读:
    HashMap与HashTable的区别
    mybatis 乐观锁和逻辑删除
    HTML里的哪一部分Javascript 会在页面加载的时候被执行?
    js遍历Object所有属性
    Sequence在Oracle中的使用
    JAVA实现DES加密实现详解
    axios 全攻略之基本介绍与使用(GET 与 POST)
    PowerDesigner使用教程
    Ajax json 数据格式
    CentOS 7安装Hadoop 3.0.0
  • 原文地址:https://www.cnblogs.com/minhost/p/11897164.html
Copyright © 2020-2023  润新知