ThreeJs：认识核心类

2023-11-23 13:21:00

ThreeJs 中定义了许多核心类，在实际的项目开发过程中，除了一些常握的场景、相机以及灯光等相关类的用法，还要掌握核心类的用法。Object3D 是 ThreeJs 中对物体抽象的基类，包括相机和灯光都是 Object3D 的子类。一般情况下，我们不会直接使用这个类，对于构造物…

ThreeJs中的核心类

Object3D

Object3D 是 ThreeJs 中最基础的类，它表示一个三维空间中的对象。Object3D 可以具有位置、旋转和缩放属性，还可以具有子对象。

Scene

场景类表示一个三维空间，它可以包含多个对象。场景类负责管理对象的位置和旋转。

Camera

相机类用于生成三维场景的二维图像。相机类具有位置、旋转和焦距等属性。

Renderer

渲染器类将三维场景渲染成二维图像。渲染器类具有多种属性，可以控制渲染质量和性能。

如何使用ThreeJs创建基本的三维场景

// 创建一个场景
var scene = new THREE.Scene();

// 创建一个相机
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

// 创建一个渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);

// 将渲染器添加到DOM元素中
document.body.appendChild(renderer.domElement);

// 创建一个立方体
var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
var cube = new THREE.Mesh(geometry, material);

// 将立方体添加到场景中
scene.add(cube);

// 将相机添加到场景中
scene.add(camera);

// 渲染场景
renderer.render(scene, camera);