THREE.js

开始

使用three.js的第一步是创建一个场景，然后将相机添加到场景中。

• 一个场景是一个包含所有对象的容器，例如相机，灯光，模型和粒子系统。
• 相机是一个视图，它定义了场景中的对象将如何呈现。
• 光源
  • 点光源 - 从一个点发出光线的光源，如太阳。
  • 平行光 - 从无限远处发出的光线，如太阳光。
  • 聚光灯 - 从一个点发出光线的光源，如手电筒。
• 渲染器 - 用于渲染场景的对象。
• 模型 - 一个对象，它可以是一个几何体，一个几何体的组合，或者一个几何体的组合。
  • gltf模型
  • fbx模型

安装

npm install three

// 引入three.js - 全量引入
import * as THREE from "three";

// 引入three.js - 按需引入
import { Scene, PerspectiveCamera, WebGLRenderer } from "three";
// gLTF加载器
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
// fbx加载器
import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader";

使用

// 初始化three.js
const renderer = new THREE.WebGLRenderer({
  canvas: document.getElementById('cesiumContainer'),
  alpha: true,
  antialias: true,
});
renderer.setClearColor(0x000000, 0);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;

// 初始化场景
const scene = new THREE.Scene();

// 初始化相机
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 100);
camera.lookAt(scene.position);

// 初始化光源
const ambientLight = new THREE.AmbientLight(0x0c0c0c);
scene.add(ambientLight);
const spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-40, 60, -10);
spotLight.castShadow = true;
scene.add(spotLight);

// 初始化模型
const loader = new THREE.GLTFLoader();
loader.load('xxx.gltf', (gltf) => {
  const model = gltf.scene;
  model.position.set(0, 0, 0);
  model.scale.set(0.5, 0.5, 0.5);
  model.rotation.set(0, 0, 0);
  model.castShadow = true;
  scene.add(model);
});

// 渲染
function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}
render();