本文介绍了如何使用THREE.js将样条线拉伸到场景的原点的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
当尝试将样条线拉伸到场景的原点时,我头疼.这就是我想要做的:
I'm having headaches when trying to extrude a spline to scene's origin. Here's what I'm trying to do :
我正在用
let centerX = 0
let centerY = 0
let radius = 200
let coils = 50
let rotation = 2 * Math.PI
let thetaMax = coils * Math.PI
let awayStep = radius / thetaMax
let chord = 5
let vertices = []
for (let theta = chord / awayStep; theta <= thetaMax;) {
let away = awayStep * theta
let around = theta + rotation
let x = centerX + Math.cos(around) * away
let y = centerY + Math.sin(around) * away
theta += chord / away
let vec3 = new THREE.Vector3(x, y, 0)
vertices.push(vec3)
}
let axisPoints = []
data.forEach((d, i) => {
axisPoints.push(new THREE.Vector3(vertices[i].z, vertices[i].y / 2, vertices[i].x / 2))
})
let axis = new THREE.CatmullRomCurve3(axisPoints)
let geometry = new THREE.BufferGeometry().setFromPoints(axis.getPoints(axisPoints.length))
let material = new THREE.LineBasicMaterial({
color: 0x481e34,
transparent: true,
opacity: 0.2
})
let splineObject = new THREE.Line(geometry, material)
scene.add(splineObject)
我想沿着该样条线拉伸一个"mesh"/"face",它正好像这样正好到达场景的原点(0):
And I want to extrude a "mesh"/"face" along this spline which is going right to the scene's origin (0) exactly like this :
我尝试了很多事情,但我不知道:(任何帮助将不胜感激!
I've tried many things but I can't figure it out :(Any help would be very appreciated!
谢谢!
推荐答案
作为一种选择,您可以使用样条曲线的坐标修改开放式圆柱缓冲区几何的坐标数组:
As an option, you can modify arrays of coordinates of an open-ended cylinder buffer geometry with coordinates of your spline:
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 5, 10);
var renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var controls = new THREE.OrbitControls(camera, renderer.domElement);
scene.add(new THREE.GridHelper(10, 10, "white"));
var divisions = 100;
var points = [
new THREE.Vector3(-5, 5, 0),
new THREE.Vector3(-2, 2, 3),
new THREE.Vector3(1, 3, 2),
new THREE.Vector3(3, 5, -3),
new THREE.Vector3(-3, 4, -2)
];
var curve = new THREE.CatmullRomCurve3(points);
curve.closed = true;
var upperPoints = curve.getPoints(divisions);
var lowerPoints = upperPoints.map(p => {
return new THREE.Vector3(p.x, 0, p.z)
});
var upperGeom = new THREE.BufferGeometry().setFromPoints(upperPoints);
var lowerGeom = new THREE.BufferGeometry().setFromPoints(lowerPoints);
var cylGeom = new THREE.CylinderBufferGeometry(1, 1, 1, divisions, 1, true); // create an open-ended cylinder
cylGeom.attributes.position.array.set(upperGeom.attributes.position.array, 0); // set coordinates for upper points
cylGeom.attributes.position.array.set(lowerGeom.attributes.position.array, (divisions + 1) * 3); // set coordinates of lower points
cylGeom.computeVertexNormals();
var result = new THREE.Mesh(cylGeom, new THREE.MeshBasicMaterial({
color: 0xaaaaaa,
wireframe: true
}));
scene.add(result);
var upperLine = new THREE.Line(upperGeom, new THREE.LineBasicMaterial({
color: "aqua"
}));
scene.add(upperLine);
var lowerLine = new THREE.Line(lowerGeom, new THREE.LineBasicMaterial({
color: "yellow"
}));
scene.add(lowerLine);
renderer.setAnimationLoop(() => {
renderer.render(scene, camera);
});
body {
overflow: hidden;
margin: 0;
}
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
根据您的需要,您可以修改任何基元的点.
Depends on your needs, you can modify points of any primitive.
这篇关于如何使用THREE.js将样条线拉伸到场景的原点的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!