Three.js是一款基于原生WebGL封装通用Web 3D引擎,可运用小游戏、产品展示、物联网、数字孪生、智慧城市园区、机械、建筑、全景看房、GIS等各个领域。
在学习WebGL和Three.js之前,请先掌握基本的web知识。
学习阶段,如果只是想查看效果。推荐vscode安装live-server插件,打开对应.html文件,右键点击Open with Live Server即可
构建3D场景三要素:场景Scene、相机Camera、渲染器Renderer
<!DOCTYPE html>
<html>
<head>
<title>webgl学习</title>
<script src="https://cdn.jsdelivr.net/npm/three@0.130.0/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.130.0/examples/js/controls/OrbitControls.js"></script>
<script src="https://cdn.jsdelivr.net/npm/stats.js@0.17.0/build/stats.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dat.gui@0.7.7/build/dat.gui.min.js"></script>
<style type="text/css">
body{
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<script>
// 创建渲染器对象
// 渲染器锯齿属性.antialias
const renderer = new THREE.WebGLRenderer({
antialias:true,
});
// 或 renderer.antialias = true,
// 定义threejs输出画布的尺寸(单位:像素px)
const width = window.innerWidth;
const height = window.innerHeight;
renderer.setSize(width, height);
window.addEventListener('resize',()=>{
const width = window.innerWidth;
const height = window.innerHeight;
renderer.setSize(width, height);
})
// 设置背景颜色
renderer.setClearColor(0xffffff);
// 获取你屏幕对应的设备像素比.devicePixelRatio告诉threejs,以免渲染模糊问题
renderer.setPixelRatio(window.devicePixelRatio);
// 将canvas画布插入任意元素
document.body.appendChild(renderer.domElement);
// 创建3D场景对象Scene
const scene = new THREE.Scene()
// 创建一个球体
const geometry = new THREE.SphereGeometry( 100, 100, 100 );
// 使用无光泽表面的材质,没有镜面高光
const material = new THREE.MeshLambertMaterial({
color: 0xff0000, //设置材质颜色
transparent:true,//开启透明
opacity:1,//设置透明度
});
// 使用上述球体和材质创建一个3d模型
const mesh = new THREE.Mesh(geometry, material);
// 设置模型位置
mesh.position.set(100,0,0);
// 将模型加入场景中
scene.add(mesh);
// 添加辅助观察坐标系
// three.js坐标轴颜色红R、绿G、蓝B分别对应坐标系的x、y、z轴,对于three.js的3D坐标系默认y轴朝上
const axesHelper = new THREE.AxesHelper(100);
scene.add(axesHelper);
// 创建透视投影相机
const camera = new THREE.PerspectiveCamera();
camera.position.set(-1000, 0, 0);
//指向mesh对应的位置
camera.lookAt(mesh.position);
// TODO:为什么在render之前和之后的lookAt结果不一样
const lookAtPosition1 = new THREE.Vector3();
lookAtPosition1.setFromMatrixPosition(camera.matrixWorld);
console.log("lookAt位置:", lookAtPosition1); // p {x: 0, y: 0, z: 0}
// 创建环境光
const ambient = new THREE.AmbientLight(0xffffff, 1);
ambient.position.set(-100, 0, 0);
scene.add(ambient)
//创建stats对象
const stats = new Stats();
//stats.domElement:web页面上输出计算结果,一个div元素,
// stats.domElement显示:渲染帧率 刷新频率,一秒渲染次数
stats.setMode(0);//默认模式
//stats.domElement显示:渲染周期 渲染一帧多长时间(单位:毫秒ms)
// stats.setMode(1);
document.body.appendChild(stats.domElement);
// 实例化一个gui对象 可视化改变三维场景
const gui = new dat.GUI();
const obj = {
color:0xff0000,
};
// .addColor()生成颜色值改变的交互界面
gui.addColor(obj, 'color').onChange(function(value){
mesh.material.color.set(value);
});
// 渲染函数
function render() {
//requestAnimationFrame循环调用的函数中调用方法update(),来刷新时间
stats.update();
renderer.render(scene, camera); //执行渲染操作
requestAnimationFrame(render); //请求再次执行渲染函数render,渲染下一帧
}
render();
// 设置相机控件轨道控制器OrbitControls
const controls = new THREE.OrbitControls(camera, renderer.domElement);
// 如果OrbitControls改变了相机参数,重新调用渲染器渲染三维场景
controls.addEventListener('change',render);
</script>
</body>
</html>