Three.js学习笔记

快速开始

import * as Three from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

// 创建场景
const scene = new Three.Scene();

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

// 创建几何体
const cubeGeometry = new Three.BoxGeometry();
const cubeMaterial = new Three.LineBasicMaterial({
  color: 0xffffff,
});
const cube = new Three.Mesh(cubeGeometry, cubeMaterial);
scene.add(cube);

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

// 创建控制器
const controls = new OrbitControls(camera, renderer.domElement);

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