ThreeJs
yuhuo2024-03-11开发库渲染库
一. 入门示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>我的第一个Three.js案例</title>
<style>
body {
margin: 0;
}
canvas {
display: block;
}
</style>
</head>
<body onload="init()">
<script src="../js/three.min.js"></script>
<script>
// 全局变量
let renderer, camera, scene, mesh;
// 渲染器
function initRenderer() {
// 创建渲染器
renderer = new THREE.WebGLRenderer();
// 设置宽高
renderer.setSize(window.innerWidth, window.innerHeight);
// 设置背景色，参数：color 色值，alpha 透明度
renderer.setClearColor(0x000000, 1);
// 添加到dom
document.body.appendChild(renderer.domElement);
}
// 场景
async function initScene() {
// 创建场景
scene = new THREE.Scene();
// 几何体
let geometry = new THREE.BoxGeometry(10, 10, 10);
// 材质
let material = new THREE.MeshNormalMaterial();
// 网格模型
mesh = new THREE.Mesh(geometry, material);
// 添加到场景中
scene.add(mesh);
}
// 相机
function initCamera() {
let w = window.innerWidth;
let h = window.innerHeight;
// 透视相机，参数：fov 锥体垂直角度, aspect 椎体宽高比, near 近端距离, far 远端距离
camera = new THREE.PerspectiveCamera(50, w / h, 0.1, 2000);
// 相机位置
camera.position.set(50, 50, 50);
// 相机观察方向
camera.lookAt(0, 0, 0);
}
// 初始化
async function init() {
initRenderer();
await initScene();
initCamera();
// 渲染
renderer.render(scene, camera);
animate();
}
// 旋转动画
function animate() {
mesh.rotation.x += 0.01;
mesh.rotation.y += 0.02;
renderer.render(scene, camera);
requestAnimationFrame(animate);
}
</script>
</body>
</html>
二. 场景
场景
scene = new THREE.Scene();
// 场景位置，默认(0,0,0)
scene.position.set(5, 0, 0);
// 场景旋转
scene.rotation.x = 1;
scene.rotation.y = 1;
scene.rotation.z = 1;
模型
// 立方体（参数：width 宽，height 高，depth 深）
var geometry1 = new THREE.BoxGeometry(10, 10, 10);
// 平面（参数：width 宽，height 高）
let geometry2 = new THREE.PlaneGeometry(10, 10);
// 柱体（参数：radiusTop 上半径，radiusBottom 下半径，height 高度，radialSegments 半径段数）
let geometry3 = new THREE.CylinderGeometry(5, 8, 10, 25);
// 球体（参数：radius 半径，widthSegments 宽段数，heightSegments 高段数）
let geometry4 = new THREE.SphereGeometry(6, 50, 50);
// 法向量材质（无需光照）
let material1 = new THREE.MeshNormalMaterial();
// 材质贴在背面
material1.side = THREE.BackSide;
// 哑光材质
let material2 = new THREE.MeshLambertMaterial({ color: 0xffff00 });
// 标准材质
let material3 = new THREE.MeshStandardMaterial({ color: 0xffff00 });
// 纹理材质（无需光照）
let texture = await new Promise((resolve) => {
new THREE.TextureLoader().load("../img/地球.jpg", (texture) => {
resolve(texture);
});
});
let material4 = new THREE.MeshBasicMaterial({ map: texture });
// 创建模型
let mesh1 = new THREE.Mesh(geometry1, material1);
let mesh2 = new THREE.Mesh(geometry2, material2);
let mesh3 = new THREE.Mesh(geometry3, material3);
let mesh4 = new THREE.Mesh(geometry4, material4);
// 旋转角度
mesh1.rotation.x += 1;
mesh1.rotation.y += 1;
mesh1.rotation.z += 2;
// 改变位置
mesh2.position.set(20, 0, 0);
mesh3.position.set(0, 0, 20);
mesh4.position.set(0, 20, 0);
scene.add(mesh1, mesh2, mesh3, mesh4);
光照
// 环境光
scene.add(new THREE.AmbientLight(0x444444));
// 点光源
let pLight = new THREE.PointLight(0xffffff);
// 点光源位置
pLight.position.set(400, 200, 300);
scene.add(pLight);
// 平行光，启动物体对光源的反射
var dLight = new THREE.DirectionalLight(0xffffff, 1);
// 平行光位置
dLight.position.set(1, -30, 1);
// 平行光朝向的模型
dLight.target = mesh3;
scene.add(dLight);
参考系
// 坐标轴
scene.add(new THREE.AxesHelper(50));
// 网格
scene.add(new THREE.GridHelper(100, 100));
三. 相机
透视相机
let w = window.innerWidth;
let h = window.innerHeight;
// 透视相机，参数：fov 锥体垂直角度, aspect 椎体宽高比, near 近端距离, far 远端距离
camera = new THREE.PerspectiveCamera(50, w / h, 0.1, 2000);
// 相机位置
camera.position.set(50, 50, 50);
camera.position.z = 50;
// 相机观察方向
camera.lookAt(0, 0, 0);
// 获取焦距（只有透视相机有焦距）
let focal = camera.getFocalLength();
// 设置焦距
camera.setFocalLength(focal + 1);
正交相机
let w = window.innerWidth;
let h = window.innerHeight;
// 正交相机，参数：left 左侧，right 右侧，top 上侧，bottom 下侧，near 近端距离, far 远端距离
camera = new THREE.OrthographicCamera(-(30 * w) / h, (30 * w) / h, 30, -30);
相机控制器
<script src="../js/OrbitControls.js"></script>
// 相机控制器
var controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.addEventListener("change", () => {
renderer.render(scene, camera);
});