Threejs教程一【三要素】

场景

场景是一个容器,用于容纳所有的物体、光源、相机等元素。

js 复制代码
// 创建场景
const scene = new THREE.Scene();
//修改背景颜色,颜色支持十六进制、rgb、hsl、贴图等
scene.background = new THREE.Color(0x000000);

相机

相机决定了渲染的结果,决定了渲染的内容是什么,以及渲染的内容从哪里看。

相机包括正交相机(OrthographicCamera)、透视相机(PerspectiveCamera)、立方相机(CubeCamera)、立体相机(StereoCamera)。

透视相机(PerspectiveCamera)是最常用的相机,它模拟人眼的视觉,具有近大远小的效果。

PerspectiveCamera 构造函数的参数如下:

  • fov:视场角,表示相机视野的范围,单位是度数。
  • aspect:宽高比,表示渲染结果的长宽比,通常设置为窗口的宽高比。
  • near:近裁剪面,表示相机能够看到的最近距离,单位是距离单位。
  • far:远裁剪面,表示相机能够看到的最近距离,单位是距离单位。
js 复制代码
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
scene.add(camera);

通过camera.position.set(x, y, z)来设置相机的位置,其中 x、y、z 是相机在场景中的位置。

js 复制代码
camera.position.set(0, 0, 5);

通过camera.lookAt(x, y, z)来设置相机看向的位置,其中 x、y、z 是相机看向的位置。

js 复制代码
camera.lookAt(0, 0, 0);

渲染器

渲染器决定了渲染的结果应该显示在什么地方,它将相机看到的场景渲染成一个二维的图片。

WebGLRenderer 构造函数的参数如下:

  • antialias:是否开启抗锯齿,默认为 false。
  • canvas:渲染结果的画布,默认为 null。如果不传,会自动创建一个 canvas 元素。也可以传入一个已有的 canvas 元素。
js 复制代码
const renderer = new THREE.WebGLRenderer({
  antialias: true,
  canvas: document.getElementById("canvas"),
});
renderer.setSize(window.innerWidth, window.innerHeight);

通过renderer.render(scene, camera)来渲染场景和相机。

渲染函数只会渲染一次,如果需要循环渲染,可以使用requestAnimationFrame函数。

js 复制代码
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();

轨道控制器

轨道控制器(OrbitControls)可以控制相机的位置和方向,使得相机可以围绕目标旋转、缩放和平移。

js 复制代码
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.update();

轨道控制器提供了以下属性和方法:

  • controls.enableDamping:是否开启阻尼效果,默认为 false。
  • controls.dampingFactor:阻尼效果的因子,默认为 0.25。
  • controls.enableZoom:是否开启缩放功能,默认为 true。

通过controls.update()来更新轨道控制器,使得相机的位置和方向能够实时更新。

通过controls.enableZoom来开启或关闭缩放功能。

通过controls.enableRotate来开启或关闭旋转功能。

通过controls.enablePan来开启或关闭平移功能。

通过controls.minDistance来设置相机距离目标的最小距离。

通过controls.maxDistance来设置相机距离目标的最大距离。

通过controls.minPolarAngle来设置相机距离目标的最低角度。

通过controls.maxPolarAngle来设置相机距离目标的最高角度。

示例

js 复制代码
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
//创建场景
const scene = new THREE.Scene();

//创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(15, 0, -25);
scene.add(camera);

//创建渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

//创建立方体盒子
const geometry = new THREE.BoxGeometry(40, 40, 40);
// 创建一个纹理加载器
const textureLoader = new THREE.TextureLoader();
// 定义纹理列表
const textureList = [
  "./texture/1.jpg",
  "./texture/2.jpg",
  "./texture/3.jpg",
  "./texture/4.jpg",
  "./texture/5.jpg",
  "./texture/6.jpg",
];
// 定义材质列表
let materials = [];
// 遍历纹理列表
textureList.forEach((item) => {
  // 加载纹理
  let texture = textureLoader.load(item);
  // 将纹理添加到材质列表中
  materials.push(new THREE.MeshBasicMaterial({ map: texture }));
});
// 创建立方体,使用几何体和材质列表
const cube = new THREE.Mesh(geometry, materials);
// 缩放立方体
cube.geometry.scale(12, 12, -12);
// 将立方体添加到场景中
scene.add(cube);

//创建控制器
const controls = new OrbitControls(camera, renderer.domElement);
// 启用阻尼效果
controls.enableDamping = true;

//创建动画
function animate() {
  requestAnimationFrame(animate);
  controls.update();
  renderer.render(scene, camera);
}
animate();

//监听窗口大小变化
window.addEventListener("resize", () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
})

效果预览

书洞笔记

相关推荐
千鼎数字孪生-可视化11 分钟前
Web技术栈重塑HMI开发:HTML5+WebGL的轻量化实践路径
前端·html5·webgl
凌辰揽月12 分钟前
7月10号总结 (1)
前端·css·css3
天天扭码35 分钟前
很全面的前端面试——CSS篇(上)
前端·css·面试
EndingCoder37 分钟前
搜索算法在前端的实践
前端·算法·性能优化·状态模式·搜索算法
sunbyte42 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DoubleVerticalSlider(双垂直滑块)
前端·javascript·css·vue.js·vue
Favor_Yang1 小时前
SQL Server通过存储过程实现HTML页面生成
前端·信息可视化·sqlserver·存储过程
中微子2 小时前
JavaScript事件循环机制:面试官最爱问的10个问题详解
前端
Eighteen Z2 小时前
CSS揭秘:10.平行四边形
前端·css·css3
拾光拾趣录2 小时前
虚拟DOM
前端·vue.js·dom
爱学习的茄子2 小时前
JavaScript事件循环深度解析:理解异步执行的本质
前端·javascript·面试