three.js环境及使用教程

开发环境

npm i three@0.156.1
npm i @types/three@0.156.0

入门代码

index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><!-- <link rel="stylesheet" href="demo.css" /> --><style>body {margin: 0;}</style><!-- 核心依赖 --><scriptasyncsrc="https://unpkg.com/es-module-shims@1.8.3/dist/es-module-shims.js"></script><script type="importmap">{"imports": {"three": "../../node_modules/three/build/three.module.js"}}</script></head><body><script type="module" src="demo.js"></script></body>
</html>

demo.js

import * as THREE from "three";//! 场景
const scene = new THREE.Scene();//! 透视相机（垂直视野角度，长宽比，近端面，远端面）
const camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight,0.1,1000
);
camera.position.z = 5;//! 渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
window.onresize = function () {renderer.setSize(window.innerWidth, window.innerHeight);//camera.setViewOffset(window.innerWidth,window.innerHeight,0,0,window.innerWidth,window.innerHeight);
};//！ 线
{// 定义材质const material = new THREE.LineBasicMaterial({ color: 0x00ff00 });// 创建几何体const points = [];points.push(new THREE.Vector3(-3, 0, 0));points.push(new THREE.Vector3(0, 3, 0));points.push(new THREE.Vector3(3, 0, 0));points.push(new THREE.Vector3(0, -3, 0));points.push(new THREE.Vector3(-3, 0, 0));const geometry = new THREE.BufferGeometry().setFromPoints(points);// 创建 Lineconst line = new THREE.Line(geometry, material);// 添加到场景scene.add(line);
}//! 立方体
{// 定义材质const material = new THREE.MeshBasicMaterial({ color: 0x0ffff0 });// 几何对象const geometry = new THREE.BoxGeometry(1, 1, 1);// 创建 Cubeconst cube = new THREE.Mesh(geometry, material);// 添加到场景scene.add(cube);// 动画效果function animate() {// 向浏览器发起一个执行某函数的请求（一般默认保持60FPS的频率）requestAnimationFrame(animate);// 旋转 Cubecube.rotation.x += 0.01;cube.rotation.y += 0.01;// 旋转 Cameracamera.rotation.z += 0.01;// 刷新相机renderer.render(scene, camera);}animate();
}