175 6191 5976

添加官方微信

领创时代关于网站建设、青岛画册设计、青岛网站设计的观点和相关新闻 将我们的想法与焦点与你共享

使用WebGL 3D和three.js创建加载页面(一)

2019-07-19 来源:小领

创建WebGL 3D网页是向观众留下良好第一印象的一种方式。使用WebGL,您可以在浏览器中提供高质量的可视内容。你可以在没有插件或任何特殊要求的情况下完成。所有现代浏览器都支持WebGL,以及移动设备和平板电脑。WebGL使您可以创建令人难以置信的3D场景。它可以为webVR体验提供动力,操纵视频,渲染图形着色器等等。

在本教程中,您将为制作制作一个加载过度页面。这个是一个非常具有戏剧性和视觉上的吸引力的一个网站页面,因为一个神秘的物体反映和旋转以响应鼠标的互动。颗粒在它周围旋转,在移动时改变颜色。您将完成创建此交互式页面的每个步骤,允许您为项目生成自己的页面。

您将仅使用Three.js的附加功能,这是一个功能强大的Web渲染库。您可以将自己的图像用作纹理,使其独一无二。您还将学习如何利用网格,光照和纹理来增强表面细节,如何使用环境贴图,以及如何为深度和兴趣添加图层。 

由于整个教程代码比较多,篇幅比较长,所以我们将整个教程分为三个部分讲解。我们采取每天一讲的方式更新,更加有利于您的学习和了解。全教程设计成21个步骤和知识点。

01.基本的HTML设置

首先,您需要在某处查看3D场景。设置基本HTML文件并包含three.js。这可以在外部托管,也可以从three.js存储库添加。添加一些简单的CSS以使页面全屏并删除任何滚动条。将文件保存到本地Web服务器,以便在准备测试时提供HTML。添加以下代码以开始使用。

        <!DOCTYPE html>
        <html>
        <head>
               <title>Relative Studios</title>
               <script src=”libs/three.min.js”></script>
               <style>
                                      html, body { margin: 0; padding:0; overflow: hidden; }
                       </style>
        </head>
        <body>
               <script>
                                      // 3D控制代码部分
                       </script>
        </body>
        </html>

02.添加全局变体

在其余代码中,您需要一些变量用于引用。立即设置它们。这将包括一个容纳粒子的数组,一个用于四面体,鼠标,raycaster和灯光的't'变量。

在脚本标记内,首先添加以下代码。

        // vars
        var num=30;
        var objects=[];
        var raycaster = new THREE.Raycaster();
        var mouse = new THREE.Vector2();
        var light,t;

03.添加场景,相机和渲染

我们需要先添加一个包含所有对象的场景。然后我们添加一个可以在其中移动的摄像头,根据需要进行平移,倾斜和移动。第一个属性是视野。第二个是宽高比。您还可以在第三个和第四个属性中定义近剪裁平面和远剪裁平面。最后,添加渲染器,该渲染器处理将场景绘制到画布。

在脚本标记中添加以下代码。

        // create camera
        var camera = new THREE.PerspectiveCamera
        ( 65, window.innerWidth/window.innerHeight, 
        0.1, 1000 );
        camera.position.set(0.0,0.0,5);
        // create a scene
        var scene = new THREE.Scene();
         
        // create renderer
        var renderer = new THREE.WebGLRenderer(
        {antialias:true});
        renderer.setSize( window.innerWidth, window.
        innerHeight );
        document.body.appendChild( renderer.domElement 
        );

04.添加一个聚光灯

接下来,您需要为场景添加灯光。Three.js配有各种灯,包括点,方向,环境和聚光灯。为此使用聚光灯。它将为您提供位置和方向属性,并允许您在以后希望投射阴影。

添加以下代码以添加聚光灯。

        //Create a Spot light
        light = new THREE.SpotLight( 0xccddff,.8 );
        light.position.set(0,0,5);
        scene.add( light );
版权声明:转载此文章须经 领创时代 同意,并请附上 领创时代 及本页链接http://www.leadnov.com/newsItem.aspx?id=215
创造品牌视觉体验 X 创新IT技术赋能企业
领创帮助您创新品牌战略,让品牌成为最具价值的资产。
中国·山东 青岛市市北区郑州路43号橡胶谷A栋
热线:175 6191 5976
微信:leadnov
Copyright © 2018-2020 leadnov All Rights Reserved
鲁ICP备18056479号-1站点地图

关注领创公众平台

添加官方微信

175 6191 5976