<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body { margin: 0; }
canvas { display: block; }
</style>
</head>
<body>
<script src="./main.js"></script>
</body>
</html>
index.html
main.js
package.json
现在支持上传本地图片了！
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
// 引入gltf模型加载库GLTFLoader.js
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
// 1. 二维二次贝塞尔曲线 Quadratic
const p1 = new THREE.Vector2(-80, 0); // p1、p3是曲线起始点
const p2 = new THREE.Vector2(20, 100); // p2是曲线的控制点
const p3 = new THREE.Vector2(80, 0);
const quadraticBezierCurve = new THREE.QuadraticBezierCurve(p1, p2, p3);
const quadraticBezierCurvePointsArr = quadraticBezierCurve.getPoints(10);
// 2. 三维二次贝赛尔曲线
const p4 = new THREE.Vector3(-90, 0, 100);
const p5 = new THREE.Vector3(20, 200, 120);
const p6 = new THREE.Vector3(150, -120, 200);
const quadraticBezierCurve3 = new THREE.QuadraticBezierCurve3(p4, p5, p6);
const quadraticBezierCurve3PointArr = quadraticBezierCurve3.getPoints(10);
// 3. 二维三次贝塞尔曲线 Cubic
const p7 = new THREE.Vector2(-180, 0);
const p8 = new THREE.Vector2(-140, 250); // p8、p9是曲线的控制点
const p9 = new THREE.Vector2(150, 250);
const p10 = new THREE.Vector2(280, 0);
const cubicBezierCurve = new THREE.CubicBezierCurve(p7, p8, p9, p10);
const cubicBezierCurvePointArr = cubicBezierCurve.getPoints(100);
// 4. 三维三次贝塞尔曲线
const p11 = new THREE.Vector3(-120, -100, 50);
const p12 = new THREE.Vector3(-40, 50, 20);
const p13 = new THREE.Vector3(50, 50, 20);
const p14 = new THREE.Vector3(80, -100, 100);
const cubicBezierCurve3 = new THREE.CubicBezierCurve3(p11, p12, p13, p14);
const cubicBezierCurve3PointArr = cubicBezierCurve3.getPoints(10);
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 3000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
// 1.1 可视化二维二次贝塞尔曲线
const quadraticBezierCurveGeometry = new THREE.BufferGeometry();
quadraticBezierCurveGeometry.setFromPoints(quadraticBezierCurvePointsArr);
const quadraticBezierCurveMaterial = new THREE.LineBasicMaterial({color: 0x1ad4f5});
const quadraticBezierCurveLine = new THREE.Line(quadraticBezierCurveGeometry, quadraticBezierCurveMaterial);
// 1.2 可视化p1、p2、p3三个点的位置，并用直线相连接
const geometryPoint = new THREE.BufferGeometry();
geometryPoint.setFromPoints([p1, p2, p3]); // 读取样条曲线经过的顶点位置
const materialPoint = new THREE.PointsMaterial({
color: 0xff00ff,
size: 10
});
const point = new THREE.Points(geometryPoint, materialPoint);
const line = new THREE.Line(geometryPoint, new THREE.LineBasicMaterial()); // 三个点构成的线条
// 2.1 可视化三维二次贝赛尔曲线
const quadraticBezierCurve3Geometry = new THREE.BufferGeometry();
quadraticBezierCurve3Geometry.setFromPoints(quadraticBezierCurve3PointArr);
const quadraticBezierCurve3Material = new THREE.LineBasicMaterial({color: 0xfeff39});
const quadraticBezierCurve3Line = new THREE.Line(quadraticBezierCurve3Geometry, quadraticBezierCurve3Material);
// 2.2 可视化点
const geometryPoint2 = new THREE.BufferGeometry();
geometryPoint2.setFromPoints([p4, p5, p6]); // 读取样条曲线经过的顶点位置
const materialPoint2 = new THREE.PointsMaterial({
color: 0xf97316,
size: 10
});
const point2 = new THREE.Points(geometryPoint2, materialPoint2);
const line2 = new THREE.Line(geometryPoint2, new THREE.LineBasicMaterial()); // 三个点构成的线条
// 3.1 可视化二维三次贝塞尔曲线
const cubicBezierCurveGeometry = new THREE.BufferGeometry();
cubicBezierCurveGeometry.setFromPoints(cubicBezierCurvePointArr);
const cubicBezierCurveMaterial = new THREE.LineBasicMaterial({color: 0xf97316})
const cubicBezierCurveLine = new THREE.Line(cubicBezierCurveGeometry, cubicBezierCurveMaterial);
// 3.2 可视化点
const geometryPoint3 = new THREE.BufferGeometry();
geometryPoint3.setFromPoints([p7, p8, p9, p10]); // 读取样条曲线经过的顶点位置
const materialPoint3 = new THREE.PointsMaterial({
color: 0xff00ff,
size: 10
});
const point3 = new THREE.Points(geometryPoint3, materialPoint3);
const line3 = new THREE.Line(geometryPoint3, new THREE.LineBasicMaterial()); // 三个点构成的线条
// 4.1 可视化三维三次贝塞尔曲线
const cubicBezierCurve3Geometry = new THREE.BufferGeometry();
cubicBezierCurve3Geometry.setFromPoints(cubicBezierCurve3PointArr);
const cubicBezierCurve3Material = new THREE.LineBasicMaterial({color: 0x15803d})
const cubicBezierCurve3Line = new THREE.Line(cubicBezierCurve3Geometry, cubicBezierCurve3Material);
// 4.2 可视化点
const geometryPoint4 = new THREE.BufferGeometry();
geometryPoint4.setFromPoints([p11, p12, p13, p14]); // 读取样条曲线经过的顶点位置
const materialPoint4 = new THREE.PointsMaterial({
color: 0xf97316,
size: 10
});
const point4 = new THREE.Points(geometryPoint4, materialPoint4);
const line4 = new THREE.Line(geometryPoint4, new THREE.LineBasicMaterial()); // 三个点构成的线条
const axesHelper = new THREE.AxesHelper(200);
const ambientLight = new THREE.AmbientLight(0x404040, 2); // 添加环境光
const directionalLight = new THREE.DirectionalLight(0xffffff, 1); // 添加方向光
const pointLight = new THREE.PointLight(0xff0000, 2, 10); // 添加点光源，红色的点光源
const controls = new OrbitControls(camera, renderer.domElement); // 添加轨道控制器
directionalLight.position.set(5, 5, 5).normalize();
directionalLight.castShadow = true; // 方向光投射阴影
pointLight.position.set(2, 2, 2);
pointLight.castShadow = true; // 点光源投射阴影
controls.enableDamping = true; // 启用阻尼效果
controls.dampingFactor = 0.05; // 阻尼系数
scene.add(line);
scene.add(line2);
scene.add(line3);
scene.add(line4);
scene.add(point);
scene.add(point2);
scene.add(point3);
scene.add(point4);
scene.add(quadraticBezierCurveLine);
scene.add(quadraticBezierCurve3Line);
scene.add(cubicBezierCurveLine);
scene.add(cubicBezierCurve3Line);
scene.add(axesHelper);
scene.add(directionalLight);
scene.add(ambientLight);
scene.add(pointLight);
// 设置相机位置
camera.position.set(300, 100, 600);
camera.lookAt(quadraticBezierCurveLine.position);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true; // 启用阴影
renderer.setClearColor(0x444444, 1);
document.body.appendChild(renderer.domElement);
// 动画循环
const animate = () => {
requestAnimationFrame(animate);
// 渲染场景
renderer.render(scene, camera);
};
// 启动动画
animate();
// 窗口大小调整时更新相机和渲染器
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
{
"dependencies": {
"three": "0.173.0"
}
}
预览