WebGL入门demo

WebGL入门demo

three.js入门

开场白

哇哦,绘制气球耶,在网页上?对啊!厉害了!3D效果图也能在网页上绘制出来啊,这么好玩的事情,赶紧来看看!

这里是属于WebGL的应用,webGL可以让我们在canvas上实现3D效果。而three.js是一款webGL框架,由于其易用性被广泛应用。如果要学习webGL,抛弃那些复杂的原生接口从这款框架入手是一个不错的选择。跟着我一起走!

?:three.js参考文档 英文

?:three.js参考文档 中文

看地球咯!

哈哈,别说了。先看地球:
地球

怎么画?

首先要理清逻辑。three.js框架是个法宝,要画东西的工具,模块,材料等等里面都有,找到API去用。所以,我们只需要:

  • 一张图片,也就是包裹地球身体的那张图片,
  • 一个球模型,
  • 把图片贴到球模型上去,地球就出来了,
  • 再给球加上一些动画效果,完工!

开始画!

上面讲完了画的大致流程,现在要开始画了。但是你还需要知道,不止这么简单!远不止这么简单!你需要:

1.设置three.js渲染器-renderer

2.设置摄像机camera

3.设置场景scene br>

4.设置物体object-地球

5.设置组织者

是不是一脸懵逼?别怕,来讲个故事?

其实,就是拍电影啦。需要相机,演员(这里是地球),场景(scene),导演(group)。导演组织这些活动,导演也要看场景的,他受场景的约束,演员也要听导演的。最后拍好了戏交给渲染器(renderer)来制片,发布。

好吧,这么形象估计懂了,来,我们具体来讲讲。

一步步画:

每个元素都是再定义了之后,在初始化函数内部执行。

做准备:

用到three.js框架,要先引入以下:

<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/renderers/Projector.js"></script>
<script src="https://threejs.org/examples/js/renderers/CanvasRenderer.js"></script>
<script src="https://threejs.org/examples/js/libs/stats.min.js"></script>

画地球:

看代码:

// 加载材质
var loader = new THREE.TextureLoader();
    loader.load('https://threejs.org/examples/textures/land_ocean_ice_cloud_2048.jpg',
     function(texture) {
        //画球体 形状
        var geometry = new THREE.SphereGeometry(200, 20, 20);
        // 贴图 材质纹理
        var material = new THREE.MeshBasicMaterial({
            map: texture,
            overdraw: 0.5
        })
        // 地球
        var mesh = new THREE.Mesh(geometry, material);
        group.add(mesh);
        }

画地球需要地球外面那张图片,还需要球模型geometry。图片需要裁剪之后变成material。再用这两个元素来new地球mesh,把地球交给group.

设置场景:

var scene;
scene = new THREE.Scene();
scene.add(group);

设置分组(导演):

var group;
group = new THREE.Group();

设置相机:

var camera;
// 准备好镜头
    camera = new THREE.PerspectiveCamera(60, window.innerWidth/window.innerHeight,1,2000);//相机摆上 设置相机摆放位置 产生镜头
    camera.position.z = 500;//拍的景物离我500px

先设置一下相机,把他放到里面去。

设置渲染器:

var renderer;
renderer = new THREE.CanvasRenderer();
        renderer.setClearColor(0xffffff);//设置canvas背景颜色
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);//container展示的大小
        container.appendChild(renderer.domElement)//追加 【canvas】 元素到 【container】 元素中
        stats = new Stats();
        container.appendChild(stats.dom);

先设置一下渲染器,设置在画布上面显示的属性,再把画布添加到浏览器页面上面去。还有在动画过程中的循环渲染在下面讲解。

加动画啦!

var container,stas;
var mouseX=0,mouseY=0;
var windowHalfX=window.innerWidth/2;
var windowHalfY=window.innerHeight/2;
animate();
document.addEventListener('mousemove', onDocumentMouseMove, false);//用鼠标拖
window.addEventListener('resize',onWindowResize,false);

function onDocumentMouseMove (event) {
    mouseX = event.clientX - windowHalfX;//鼠标基于中心点的偏移量;
    mouseY = event.clientY - windowHalfY;//鼠标基于中心点的偏移量;
}

function onWindowResize (event) {
    windowHalfX = window.innerWidth / 2;
    windowHalfY = window.innerHeight / 2;
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth,window.innerHeight);
}

function animate () {
// 每秒60针递归调用 使地球旋转
    requestAnimationFrame(animate);
    render();
    stats.update();
}
function render () {
    camera.position.x
     += (mouseX-camera.position.x)*0.05;//在x轴上,相机根据鼠标的位置移动来移动的距离
    camera.position.y 
    += (-mouseY - camera.position.y)*0.05;//在y轴上,相机根据鼠标的位置移动来移动的距离
    camera.lookAt(scene.position);//设置视野的中心坐标
    group.rotation.y -= 0.005;//让它饶着y轴旋转 (间接的得到旋转的速度)
    renderer.render(scene, camera);//将webgl视图往外输出
}

设置在鼠标动的时候监听到,而且此时camera随即改变而改变。camera要改变根据鼠标的移动来移动它的距离在函数onDocumentMouseMove中得到,而且地球要有一种远小近大的感觉。随着鼠标移动,camera变化,地球的大小也在改变,也就是前面说的远小近大的感觉。在函数onWindowResize中实现。然后地球要动画起来要调用animate函数,每秒60针递归调用 使地球旋转,然后render函数就一直在不停的循环。状态也在不停的更新。

小结:

WebGL是是一种3D绘图标准,这种绘图技术里面用了JavaScript,所以会JavaScript,走遍天下都不怕啊?

?:源码

思考好逻辑,就可以动手的!好玩就要去尝试,就在慢慢成长。大家共同进步吧!

阅读 3.9k

推荐阅读