以下是一个完整的示例代码,实现使用Three.js绘制三维坐标系,并通过鼠标点击多出不同处,然后将这些点连接成线:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Three.js 3D Coordinate System</title>
<style>
body { margin: 0; }
</style>
</head>
<body>
<script src="https://threejs.org/build/three.js"></script>
<script>
var scene, camera, renderer;
var points = [];
init();
animate();
function init() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var axisHelper = new THREE.AxisHelper(2);
scene.add(axisHelper);
document.addEventListener('mousedown', onDocumentMouseDown, false);
}
function onDocumentMouseDown(event) {
event.preventDefault();
var mouseVector = new THREE.Vector3(
(event.clientX / window.innerWidth) * 2 - 1,
-(event.clientY / window.innerHeight) * 2 + 1,
0.5
);
mouseVector.unproject(camera);
var dir = mouseVector.sub(camera.position).normalize();
var distance = -camera.position.z / dir.z;
var pos = camera.position.clone().add(dir.multiplyScalar(distance));
createPoint(pos.x, pos.y, pos.z);
if (points.length >= 2) {
createLine();
}
}
function createPoint(x, y, z) {
var geometry = new THREE.SphereGeometry(0.1, 32, 32);
var material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
var point = new THREE.Mesh(geometry, material);
point.position.set(x, y, z);
scene.add(point);
points.push(new THREE.Vector3(x, y, z));
}
function createLine() {
var geometry = new THREE.BufferGeometry().setFromPoints(points);
var material = new THREE.LineBasicMaterial({ color: 0x00ff00 });
var line = new THREE.Line(geometry, material);
scene.add(line);
}
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
</script>
</body>
</html>
你可以将以上代码保存为一个HTML文件,然后在浏览器中打开该文件,即可看到绘制的三维坐标系。点击鼠标左键可以添加新的点,并将这些点用线连接起来。
内容由零声教学AI助手提供,问题来源于学员提问