关于Three.js的基本使用和概念(场景、相机、渲染器等)
【关于Three.js的基本使用和概念(场景、相机、渲染器等)】这是一个底层基于WebGL开发的3D渲染引擎( 当然,后续是否会正式发布基于WebGPU的版本,也是可能的)。
和直接使用WebGL相比,比如着色器,大部分情况下你无需自己开发,不过,情况并不总是这样,如果你的需求太过特殊,我们依旧可以用更接近原生的方式来绘制,这是一个非常友好的设计。
绘制流程
一般最通用的绘制流程大致如下:
准备好场景
→准备好相机
→使用渲染器渲染出来
你可以提前看看我们最终要绘制的效果:
文章图片
这是一个旋转的立方体。
你可以点击此处进行查看运行效果。
场景
所谓的场景,也就是空间的属性,就是当前空间里面有什么东西;比如:有什么物体(物体的材质、形状、尺寸)、有没有光(点光源还是环境光、或者平行光)等。
对我们这里而言,很明显,空间里有一个正六面体,而且,好像还有光照在上面。
那么,我们首先创建好场景,后续再补充场景中的内容:
var scene = new THREE.Scene();
网格模型
现在,我们来创建一个立方体:
var geometry = new THREE.BoxGeometry(100, 100, 100);
立方体是红色的,所以,还需要创建一个材质对象:
var material = new THREE.MeshLambertMaterial({
color: "red"
});
然后,把立方体和材质对象关联起来,就获得了表示这个完整立方体信息的模型对象了:
var mesh = new THREE.Mesh(geometry, material);
最后,把这个立方体放到之前创建的空间中去:
scene.add(mesh);
光照
光一般有多种,比如环境光,其实我们就可以认为是漫反射,在原生代码中,我们需要自己设计光叠加的算法,而在这里,你只需要调用api设置参数即可:
var ambient = new THREE.AmbientLight("green");
同样的,也需要被添加到当前空间中去:
scene.add(ambient);
别的类型的光也类似,只是设置的参数不一样,这里就不再赘述了。
相机 其实就相当于你的眼睛的可视区域。空间中有什么,不代表你就应该看见什么,通过相机来确定你看的位置、方向、范围等。
还有一点需要特别说明,因为你看见的其实是平面,空间本身是3D的,那就存在一个投影算法,不同的投影算法最终你空间的内容也是不一样的(我们这里选择的是正射投影),整体来说比较好理解,直接看代码:
var width = window.innerWidth;
//窗口宽度
var height = window.innerHeight;
//窗口高度
var k = width / height;
//窗口宽高比
var s = 100;
//三维场景显示范围控制系数,系数越大,显示的范围越大var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
camera.position.set(200, 300, 200);
//设置相机位置
camera.lookAt(scene.position);
//设置相机方向(指向的场景对象)
渲染器 好了,空间准备好了,相机也准备好了,接下来就是渲染出来了。
首先,创建好渲染器:
var renderer = new THREE.WebGLRenderer();
然后,设置好参数:
renderer.setSize(width, height);
//设置渲染区域尺寸
renderer.setClearColor(0xb9d3ff, 1);
//设置背景颜色
最终渲染的内容在哪里显示?当前是页面了,所以渲染器需要关联到页面中:
document.body.appendChild(renderer.domElement);
一切准备就绪,渲染即可:
renderer.render(scene, camera);
变换 相比最终的效果,我们绘制出来的是一个静止的,怎么办?
你可以修改相机的位置、角度等,或者改变物体的位置。比如这里,我们改变物体的位置:
mesh.rotateY(0.01);
同样的,改变完毕后,重新使用渲染器渲染即可。
更多 更多复杂的场景,也是在上面每步的调整,比如空间中有什么,不是只有上面的写法,你也可以使用顶点来自定义表示,只不过,上面的一个大体的思路,后续更丰富的学习,有了上面的大的架子,会更容易理解。
始终记住一点:难的绝不是3D本身,而是其背后一系列的算法和数学知识。不过,相信聪明的你,一定会轻松掌握这一切。
完整代码 原文地址
body {
margin: 0;
}
推荐阅读
- 服务器|Linux强制重新启动系统——重启服务器的最终救济途径
- 坚持半年用英语的感受
- 够拼乐:多家快递下月上调派件费|够拼乐:多家快递下月上调派件费 你的快递会涨价吗()
- I'm|I'm sorry,我竟然是刚知道php函数名大小写不敏感的
- awk printf 的使用
- Html5|20 个超酷的 HTML5/CSS3 应用及源码
- 做自己的模特做自己的摄影师
- 《富有的马夫》-摘译自《鸣响雪松六》
- 还会有多少次,你要为你的愚蠢买单
- 读诗(夏沫《焚不尽的青春》。)