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);
})

效果预览

书洞笔记

相关推荐
慧一居士31 分钟前
flex 布局完整功能介绍和示例演示
前端
DoraBigHead33 分钟前
小哆啦解题记——两数失踪事件
前端·算法·面试
一斤代码6 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子6 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年6 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子7 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina7 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路8 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说8 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409198 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app