第一个页面
2024年4月1日小于 1 分钟
第一个页面
创建 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();