我通过传递TubeGeometry / SplineCurve3路径作为参数来制作CatmullRomCurve3。
我正在尝试使用geometry.parameters.path.points[1].y += 0.01;下的requestAnimationFrame更新每个路径点的位置。
值本身会在console.log上更新，但这些点不会移动。我怎么能这样做？
顺便说一下，我不打算移动顶点＆＃39;而是形成管子渲染方式的路径点。
var camera, scene, light, renderer, geometry, material, mesh;
init();
animate();
function init() {
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
// default bg canvas color //
renderer.setClearColor(0x00ff00);
// use device aspect ratio //
// renderer.setPixelRatio(window.devicePixelRatio);
// set size of canvas within window //
renderer.setSize(window.innerWidth, window.innerHeight);
// create camera //
// params = field of view, aspect ratio, clipping of near objects, clipping of far objs
camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 0.1, 3000);
camera.position.z = 100;
// create scene
scene = new THREE.Scene();
// create ambient lighting, params -> color, intensity
light = new THREE.AmbientLight(0xffffff, 0.5)
// add light to scene
scene.add(light)
// create line, with params as x,y,z
var curve = new THREE.CatmullRomCurve3([
new THREE.Vector3( -60, 0, 0 ),
new THREE.Vector3( -50, 10, 0 ),
new THREE.Vector3( -40, 0, 0 ),
new THREE.Vector3( -30, -10, 0 ),
new THREE.Vector3( -20, 0, 0 ),
new THREE.Vector3( -10, 10, 0 ),
new THREE.Vector3( 0, 0, 0 ),
new THREE.Vector3( 10, -10, 0 ),
new THREE.Vector3( 20, 0, 0 ),
new THREE.Vector3( 30, 10, 0 ),
new THREE.Vector3( 40, 0, 0 ),
new THREE.Vector3( 50, -10, 0 ),
new THREE.Vector3( 60, 0, 0 )
]);
curve.verticesNeedUpdate = true;
for (i = 0; i < curve.points.length; i++) {
// this will get a number between 1 and 10;
var num = Math.floor(Math.random()*10) + 1;
num *= Math.floor(Math.random()*2) == 1 ? 1 : -1;
curve.points[i].y = num;
// console.log(curve.points[i].y);
}
geometry = new THREE.TubeGeometry(curve, 1000, 0.2, 8, false);
geometry.dynamic = true;
/* standard material */
material = new THREE.MeshBasicMaterial({
color: 0xff0000
});
// create mesh
mesh = new THREE.Mesh(geometry, material);
// set positon of line
mesh.position.set(0,0,-10);
// add to scene
scene.add(mesh);
document.body.appendChild(renderer.domElement);
} /* end init */
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
//console.log(geometry.parameters.path.points);
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
// mesh.rotation.x += 0.01;
// mesh.rotation.y += 0.01;
geometry.parameters.path.points[1].y += 0.01;
geometry.verticesNeedUpdate = true;
//console.log(geometry.parameters.path.points[1].y)
/* render scene and camera */
renderer.render(scene,camera);
}body {
margin:0;
overflow: hidden;
} <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.min.js"></script>
答案 0 :(得分：0)
我无法使用TubeGeometry使其工作，但我使用TubeBufferGeometry。幸运的是，没有太多要改变，因为两者都使用曲线路径来定义网格顶点。您可以自由尝试使用TubeGeometry复制此内容。
您看到的主要问题是Tube(Buffer)Geometry建造几何体，而不是IS几何体，以及便利性结束的地方。更新路径不会触发要重建的几何体。相反，如果您更新路径，则必须重新创建Tube(Buffer)Geometry。
在下面的代码中，我所做的就是交换TubeBufferGeometry代替TubeGeometry，将geometry.verticesNeedUpdated更改为geometry.needsUpdate（这就是BufferGeometry处理更新的方式），并添加了重新构建管的线：
geometry.copy(new THREE.TubeBufferGeometry(geometry.parameters.path, 1000, 0.2, 8, false));
var camera, scene, light, renderer, geometry, material, mesh;
init();
animate();
function init() {
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
// default bg canvas color //
renderer.setClearColor(0x00ff00);
// use device aspect ratio //
// renderer.setPixelRatio(window.devicePixelRatio);
// set size of canvas within window //
renderer.setSize(window.innerWidth, window.innerHeight);
// create camera //
// params = field of view, aspect ratio, clipping of near objects, clipping of far objs
camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 0.1, 3000);
camera.position.z = 100;
// create scene
scene = new THREE.Scene();
// create ambient lighting, params -> color, intensity
light = new THREE.AmbientLight(0xffffff, 0.5)
// add light to scene
scene.add(light)
// create line, with params as x,y,z
var curve = new THREE.CatmullRomCurve3([
new THREE.Vector3( -60, 0, 0 ),
new THREE.Vector3( -50, 10, 0 ),
new THREE.Vector3( -40, 0, 0 ),
new THREE.Vector3( -30, -10, 0 ),
new THREE.Vector3( -20, 0, 0 ),
new THREE.Vector3( -10, 10, 0 ),
new THREE.Vector3( 0, 0, 0 ),
new THREE.Vector3( 10, -10, 0 ),
new THREE.Vector3( 20, 0, 0 ),
new THREE.Vector3( 30, 10, 0 ),
new THREE.Vector3( 40, 0, 0 ),
new THREE.Vector3( 50, -10, 0 ),
new THREE.Vector3( 60, 0, 0 )
]);
curve.verticesNeedUpdate = true;
for (i = 0; i < curve.points.length; i++) {
// this will get a number between 1 and 10;
var num = Math.floor(Math.random()*10) + 1;
num *= Math.floor(Math.random()*2) == 1 ? 1 : -1;
curve.points[i].y = num;
// console.log(curve.points[i].y);
}
geometry = new THREE.TubeBufferGeometry(curve, 1000, 0.2, 8, false);
geometry.dynamic = true;
/* standard material */
material = new THREE.MeshBasicMaterial({
color: 0xff0000
});
// create mesh
mesh = new THREE.Mesh(geometry, material);
// set positon of line
mesh.position.set(0,0,-10);
// add to scene
scene.add(mesh);
document.body.appendChild(renderer.domElement);
} /* end init */
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
//console.log(geometry.parameters.path.points);
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
// mesh.rotation.x += 0.01;
// mesh.rotation.y += 0.01;
geometry.parameters.path.points[3].y += 0.01;
geometry.copy(new THREE.TubeBufferGeometry(geometry.parameters.path, 1000, 0.2, 8, false));
geometry.needsUpdate = true;
//console.log(geometry.parameters.path.points[1].y)
/* render scene and camera */
renderer.render(scene,camera);
}body {
margin:0;
overflow: hidden;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.min.js"></script>