1.Three.js Overview
Three.js is a 3D engine written in JavaScript language that runs in the browser. Unlike WebGL, developers do not need to master advanced graphics knowledge when developing using Three.js, and can create a 3D scene with only a small amount of JavaScript code. It can be said that the emergence of Three.js has had a huge promotion effect on the field of 3D development.
1.1 Introduction to Three.js
Three.js 3D engine was developed and its functions are as follows.
❑ Create 3D graphics quickly and easily according to developer needs.
❑ Provides various types of textures and materials for rendering objects.
❑ Comes with shadow calculation function to achieve realistic shadow effects.
❑ Supports 3D objects and skeletal animation in multiple formats, making the 3D scene richer.
❑ The engine comes with a variety of shaders to achieve a variety of realistic effects.
Three.js is an open source project on Github and is developing extremely rapidly. So far, Three.js has become a relatively complete 3D engine and is widely used by developers at home and abroad.
Before formally learning the code development of Three.js, first understand the preparation work.
Download the entire Three.js project. The build directory stores Three.js, Three.min.jsand Three.module.jsthese 3 files. three.js does not perform code compression and is suitable for debugging. Three.min.js is compressed, but debugging is cumbersome and is suitable for final release.
After the download is completed, introduce the Three.js file as an external file in HTML, and operate all variables and methods in the library through the global variable THREE. The introduced code is as follows.
<script src="./three.js/three.js-master/build/three.js""></script>
1.2 Three.js effect display
The following pictures are screenshots made using the Three.js3D engine.
Using Three.js, you can develop cool and realistic 3D scenes, giving users a strong visual impact. On the other hand, Three.js has the advantages of high encapsulation and low development difficulty. I believe that Three.js will burst out with greater energy in the near future.
Tip: Interested readers can log in to the official website of Three.js to experience various excellent works.
2. First introduction to Three.js applications
Through simple cases, the basic steps of development using Three.js are introduced in detail to further improve readers' understanding of program development.
The running effect of Case 1 is shown in the figure.
Case 1 code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>第一个Threejs案例</title>
<script src="./three.js/three.js-master/build/three.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#webgl {
width: 100%;
height: 100vh;
overflow: hidden;
}
</style>
</head>
<body>
<div id="webgl"></div>
<script>
// 获取渲染容器
let webgl = document.getElementById("webgl");
// 获取渲染容器的宽高
let webglWidth = webgl.offsetWidth;
let webglHeight = webgl.offsetHeight;
// 创建场景
let scene = new THREE.Scene();
// 创建三维坐标（轴线长度）
// 用于调试：红色：x轴、绿色：y轴、蓝色：z轴
let axes = new THREE.AxesHelper(60);
// 添加三维坐标到场景中
scene.add(axes);
// 设置环境光（十六进制颜色）
let ambient = new THREE.AmbientLight(0x444444);
// 将环境光添加到场景中
scene.add(ambient);
// 设置点光源（十六进制颜色）
let point = new THREE.PointLight(0xffffff);
// 设置点光源的位置（x轴, y轴, z轴）
point.position.set(400, 200, 300);
// 将点光源添加到场景中
scene.add(point);
// 创建立方几何体（x轴, y轴, z轴）
let cubeGeometry = new THREE.BoxGeometry(20,20,20);
// 创建网格基础材质
let cubeMaterial = new THREE.MeshLambertMaterial({
color:0x00FFFF});
// 创建立方体（几何体, 材质）
let cube = new THREE.Mesh(cubeGeometry,cubeMaterial);
// 调整立方体位置（x轴, y轴, z轴）
cube.position.set(0, 0, 0);
// 将立方体添加到场景中
scene.add(cube);
// 创建透视相机（角度, 宽高比, 最近距离, 最远距离）
let camera = new THREE.PerspectiveCamera(60,webglWidth/webglHeight,0.1,2000);
// 设置相机的位置（x轴, y轴, z轴）
camera.position.set(100, 100, 100);
// 将相机指向场景中心
camera.lookAt(scene.position);
// 创建渲染器
let renderer = new THREE.WebGLRenderer();
// 设置渲染器的初始颜色（十六进制颜色, 透明度）
renderer.setClearColor(0xEEEEEE,1);
// 设置渲染器大小（标签宽度, 标签高度）
renderer.setSize(webglWidth,webglHeight);
// 将渲染器添加到渲染容器中（渲染器元素）
webgl.appendChild(renderer.domElement);
// 创建渲染函数
function render(){
// 渲染场景和相机（场景, 相机）
renderer.render(scene,camera);
}
// 调用渲染函数
render();
// 设置窗口变化自适应调整事件
window.onresize = function(){
// 重新获取渲染容器的宽高
webglWidth = webgl.offsetWidth;
webglHeight = webgl.offsetHeight;
// 重置渲染器canvas画布大小
renderer.setSize(webglWidth,webglHeight);
// 重置相机显示范围的宽高比
camera.aspect = webglWidth/webglHeight;
// 更新相机的投影矩阵
camera.updateProjectionMatrix();
// 重新调用渲染函数
render();
};
</script>
</body>
</html>
The operation effect of Case 2 is shown in the figure.
Case 2 code:
<html>
<head>
<title>My first three.js app</title>
<style>
body {
margin: 0;
}
canvas {
display: block;
}
</style>
</head>
<body>
<script src="./three.js/three.js-master/build/three.js"></script>
<script>
//创建场景和相机
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
//创建渲染器，设置尺寸为窗口尺寸，并将渲染后的元素添加到body
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
//创建一个Mesh（绿色的3D立方体），并添加到场景中
var geometry = new THREE.BoxGeometry();
var material = new THREE.MeshBasicMaterial({
color: 0x00ff00 });
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
//设置照相机的位置
camera.position.z = 5;
//浏览器每次渲染的时候更新立方体的旋转角度
var animate = function () {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
};
animate();
</script>
</body>
</html>
The main idea is to create a new html file, introduce the Three.js file as an external file, and then operate the entire project by writing JavaScript code.