第一个页面

创建 three.js 的第一个页面

效果展示

代码

import * as THREE from "three";

// 场景容器
const container = document.body;

// 获取窗口宽高
let width = window.innerWidth;
let height = window.innerHeight;

// 场景
let scene = null;
// 相机
let camera = null;
// 渲染器
let renderer = null;
// 几何体
let geometry = null;
// 材质
let material = null;
// 模型
let cube = null;

// 创建场景
function createScene() {
  // 创建场景
  scene = new THREE.Scene();

  // 创建相机
  camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);

  // 创建渲染器
  renderer = new THREE.WebGLRenderer();
  // 设置渲染器大小
  renderer.setSize(width, height);

  // 创建几何体
  geometry = new THREE.BoxGeometry(1, 1, 1);
  // 创建材质
  material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
  // 将材质和几何体组合到一起
  cube = new THREE.Mesh(geometry, material);

  // 向场景中添加物体
  scene.add(cube);

  // 设置相机位置
  camera.position.z = 5;
  camera.lookAt(0, 0, 0);

  // 将渲染器添加到页面中
  container.appendChild(renderer.domElement);
}

// 让模型旋转
function animate() {
  // 读取浏览器绘制下一帧的时候，会调用此函数
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  // 渲染画面
  renderer.render(scene, camera);
}

createScene();
animate();