首页 > 下载 > 下载详文:Web端3d图形技术Three.js介绍

Web端3d图形技术Three.js介绍

发布时间:2022年02月13日 14时04分06秒   属性:程序Web开发 > Javascript/Html    访问次数:105369
字体: 初始 添加收藏 分享给好友

使用过三维软件maya、3ds max、blender等都知道,这类软件可以完成复杂的3d模型场景设计绘制,那些都是运行于桌面软件中才能完成,那么本文就是介绍一种运行于各浏览器中的3d计算机绘图技术“Three.js”。Three.js 运行于浏览器相对于专业3d设计绘图桌面软件它体量小,运行浏览器那么它大部分也是用于网络传播,即运行于云端和后台数据交互表现出三维渲染结果。 它是跨浏览器 JavaScript 库/API,用于在 Web 浏览器上创建和显示动画 3D 计算机图形,目前支持Chrome、Firefox、Edge、Safari和Opera浏览器。Three.js 和 HTML5 画布元素、SVG 通过WebGL 结合使用,无需安装依赖专有浏览器插件,能够完成高难度的可视化应用,包括游戏开发。官方地址:https://threejs.org/ ,https://threejs.org/editor/(在线编辑器),在这里可以下载Three.js文档和示例,同时官网页也提供了大量的程序案例参考。在下载的Three.js文档,都在three.js-master\build路径在,下图左边:为官网下载地址连接:github、download、devtools。


(three.js和three.min.js为同一文件,后者为压缩档,three.module.js插件模块)

下面通过简单的示例来熟悉Three.js的运用,建立简单的场景,创建一个几何物体box,设定颜色;建立渲染呈现尺寸;建立摄像机,给场景加入灯光。 摄像机部分:var camera = new THREE.PerspectiveCamera(fov, aspect, near, far)四个参数控制焦距、远、近属性;camera.position.set(30, 30, 50)为x,y,z坐标实体参数设置,camera.lookAt(0, 0, 0)这里相机的角度也是x,y,z坐标。渲染部分:var renderer = new THREE.WebGLRenderer();这里实例化通过“WebGLRenderer()”建立渲染,renderer.setSize(window.innerWidth, window.innerHeight);这里渲染宽高尺寸设为浏览器的宽高, document.body.appendChild(renderer.domElement);通过appendChild将渲染对象加入到body种。几何体部分:常见的几何体有立方体/cube、圆锥/cone、球/sphere、圆柱/cylinder、锥台/frustum等等,不同的立方体有不同的参数属性, 在这里的示例以立方体box为例,var geometry = new THREE.BoxGeometry(20, 20, 20);建立box几何物体的尺寸长度、宽度、深度(长度/length,宽/width,深度/depth),var material = new THREE.MeshLambertMaterial({ color: 0xff0000 });此处设定材质颜色,var cube = new THREE.Mesh(geometry, material);这里通过Mesh函数将“geometry”和“material”带入,通过add方法将立方加入到场景“scene.add(cube)”。灯光部分:在Three.js种有环境光(AmbientLight)、半球光(HemisphereLight)、方向光(DirectionalLight)、点光源(PointLight)、聚光灯(SpotLight)、矩形区域光(RectAreaLight)6种灯光,在当前示例以点光源、PointLight做演示, var light = new THREE.PointLight(0xffd800); 建立灯光同时设定灯光颜色,light.position.set(28, 30, 25)这里为灯光的x、y、z坐标值位置,通过add方法将灯光添加到场景“scene.add(light)”。在renderer方法种加入场景和摄像机“renderer.render(scene, camera)”。

HTML 代码  复制
<body>
<script src="build/three.js"></script>
<script type="text/javascript">
//Web端3d图形技术Three.js(02.13.2022)
//Copyright (C) 遗昕传媒 | weisim3.com
//建立场景/create a scene
var scene = new THREE.Scene();

// 建立摄像机/create a camera
var camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000);
//摄像机四个参数(fov, aspect, near, far)
camera.position.set(30, 30, 50);
camera.lookAt(0, 0, 0)

// 建立渲染/create the renderer
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
//这里渲染宽高设为浏览器的宽高
document.body.appendChild(renderer.domElement);

// 建立几何体/create a simple cube
var geometry = new THREE.BoxGeometry(20, 20, 20);
//设定box几何物体的尺寸长度、宽度、深度(长度/length,宽/width,深度/depth)
var material = new THREE.MeshLambertMaterial({ color: 0xff0000 });
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

//加入灯光/ add a light so we can see something
var light = new THREE.PointLight(0xffd800);
light.position.set(25, 25, 25);
scene.add(light);

renderer.render(scene, camera)
</script>
</body>

下面在浏览器种呈现立方体box效果:


材质贴图、动画:

接着示例进一步复杂,将立方体添加贴图材质,加入动画效果,和上面实例中相同建立摄像机camera、场景scene, 渲染renderer,new THREE.Mesh(geometry, material)实例化一个mesh变量,定义Init()、onWindowResize()、Animate()方法函数。Init()方法:是完成具体的摄像机、场景、立方体BoxGeometry、texture和material纹理材质将指定, renderer = new THREE.WebGLRenderer({ antialias: true })这里“antialias: true ”做抗锯齿指定设为true,window.addEventListener('resize', onWindowResize)这里让浏览器随窗口大小而调整更行相机的aspect参数,camera.updateProjectionMatrix();//更新摄像机投影矩阵,渲染狂高尺寸renderer.setSize(window.innerWidth, window.innerHeight)。Animate()方法:实现立方体的动画旋转x轴和y轴动画,同时实时更新渲染。把Animate()方法放入Init()内,在进入脚本程序内后执行进入Init()方法建立摄像机、场景、立方体指定材质贴图后,执行动画渲染后,再执行Animate()方法动画。详细代码如下:

HTML 代码  复制
<body>
<script src="build/three.js"></script>
<script type="text/javascript">

//Web端3d图形技术Three.js(02.15.2022)
//Copyright (C) 遗昕传媒 | weisim3.com
//纹理材质赋给box立方体(02.15.2022)
var camera, scene, renderer;
var mesh;

function Init() {
//建立摄像机
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 380;
//建立场景
scene = new THREE.Scene();
//指定材质图片
const texture = new THREE.TextureLoader().load('images/20220215170647.png');
//建立立方体长宽高均设为200
const geometry = new THREE.BoxGeometry(200, 200, 200);
const material = new THREE.MeshBasicMaterial({ map: texture });//纹理材质将材质图片带入

mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
//antialias: true抗锯齿
renderer = new THREE.WebGLRenderer({ antialias: true });
//设置设备像素比。通常用于避免HiDPI设备上绘图模糊:设备像素比
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

//随窗口大小等比调整
window.addEventListener('resize', onWindowResize);

Animate();

}

function onWindowResize() {
//在onWindowResize种更新摄像机
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();//更新摄像机投影矩阵

renderer.setSize(window.innerWidth, window.innerHeight);
}

function Animate() {
window.requestAnimationFrame(Animate);
mesh.rotation.x += 0.008;
mesh.rotation.y += 0.01;
renderer.render(scene, camera);
}

Init();

</script>
</body>

最终效果如下:


异常提示:贴图材质在“localhost:”启动编译预览情况下图片能正常访问,但是在物理路径文件夹访问打开html时浏览器却加载不到图片,页面预览显示不出来,因为纯粹的html+JavaScript文件是无权读取图片加载图片的,但是在网络路径下是可以的,本地从文件夹直接打开html所以会报这个错“Failed to load resource: net::ERR_FAILED/无法加载资源”。请参考博文:“Three.js材质THREE.TextureLoader()加载不到图无法显示”。
免费
Web端3d图形技术Three.js介绍 (1)
本下载连接不支持第三下载工具打开,请直接点击下载即可
文章版权归属weisim3.com所有,未经书面版权许可同意,不得私自转载(或做修改转载),源文件示例仅供学习使用,更不要出于商业用途或印刷出版发行!否则将追究其相关法律责任,版权联系QQ:729260499。
遺昕 | Weisim3.com 下载许可条款 ( 您必须接受同意才可下载 ) .