新闻资讯
three.js制作场地-three.js应用场景
发布时间:2023-03-21 17:31:00 来源: 元居科技

    一、开始制作

    1、开始构建一个3D虚拟展馆场景,包括一个旋转立方体。

    2、开始使用three.js之前,将HTML代码保存在计算机上,在HTML文件所在的js目录下复制js,然后在浏览器中打开HTML文件。

    二、创造场景

    1、借助three.js,为了让您的场景真正使用three.js显示,我们需要:场景、相机、渲染器,使用相机来渲染场景。

    2、接下来的两个是远剪面和近剪面。当物体远离相机的远剪面或近剪面时,物体的超出部分不会渲染到场景中。不用担心值的影响,可以在应用程序中设置它,以便在未来获得更好的渲染性能。

3D虚拟场景

    三、渲染器

    1、除了WebGLRender渲染器,Three.js还提供了其他几种渲染器。由于用户使用的浏览器太旧或因其他原因不支持WebGL,这些渲染器可以用于降级。

    2、除了创建渲染器的例子外,还需要在应用程序中设置渲染器的大小。例如,可以使用所需渲染区域的宽度,使渲染场景充满应用程序。

    3、可以将渲染器的宽度设置为浏览器窗口的宽度。

    4、对于性能敏感的应用程序,可以将set size传输到一个较小的值,使应用程序在渲染过程中以一半的长度和宽度渲染场景。

    5、假如想让应用程序保持大小,但是用较低的分辨率渲染,可以在调用set size时将false传输到第三个参数。

    6、在HTML文档中添加渲染元素,即使用渲染元素展示场景。

3D虚拟展馆

    四、继续添加

    1、要建立一个立方体,需要一个立方体对象。这个对象包含了立方体的所有顶部和表面。

    2、然后需要给这个立方体一种颜色的材料。Three.js有几种材料,所有材料都是将应用于立方体的属性对象。

    3、需要一个网格,网格是一种包含几何和应用于这些几何的对象。直接将网格对象放入场景中,这样它们就可以在场景中自由移动。

    4、在默认情况下,调用scenene时,可能会使相机的位置与立方体重叠。为了防止这种情况发生,只需稍微向外移动相机。

    五、渲染场景

    1、如果现在写的代码从上面复制到HTML文件,不会在里面看到任何东西。这是因为还没有真正渲染它。因此需要调用一种叫做“渲染”或“动画循环”的东西。

    2、创建一个循环,使渲染器能够在刷新每个屏幕时绘制场景。最重要的是,当用户切换到其他标签页面时,它将暂停而不会浪费宝贵的处理器资源和电池寿命。