我知道有关我的问题的问题之前已经被问过并得到了回答,但是在过去的几年中我们发现了很多变化,而且我在现有的例子中找不到我需要的东西。
我有一条椭圆曲线,我想沿着它运行粒子。我的代码运行没有错误但它实际上并没有将粒子移动到任何地方。我错过了什么?
* {
box-sizing: border-box;
}
body{
background-image: url("bg.png");
background-size: cover;
background-attachment: fixed;
}
@media only screen and (max-width: 800px) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
img
{margin-top: 20px;
margin:auto;
height: 100px;
}
h2{
font-size: 18px;
}
#welcome{
font-size: 30px;
}
#date{
font-size: 30px;
stroke-dasharray: 10 2;
}
svg{
height: 200px;
}
circle{
stroke-width:10px;
}
}
答案 0 :(得分:2)
使用THREE.Geometry()
:
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 50);
var renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setClearColor(0x404040);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var controls = new THREE.OrbitControls(camera, renderer.domElement);
var grid = new THREE.GridHelper(40, 40, "white", "gray");
grid.rotation.x = Math.PI * -0.5;
scene.add(grid);
var curve = new THREE.EllipseCurve(0, 0, 20, 20, 0, Math.PI * 2, false, 0);
// using of .getPoints(division) will give you a set of points of division + 1
// so, let's get the points manually :)
var count = 10;
var inc = 1 / count;
var pointAt = 0;
var points = [];
for (let i = 0; i < count; i++) {
let point = curve.getPoint(pointAt); // get a point of THREE.Vector2()
point.z = 0; // geometry needs points of x, y, z; so add z
point.pointAt = pointAt; // save position along the curve in a custom property
points.push(point);
pointAt += inc; // increment position along the curve for next point
}
var pointsGeom = new THREE.Geometry();
pointsGeom.vertices = points;
console.log(points);
var pointsObj = new THREE.Points(pointsGeom, new THREE.PointsMaterial({
size: 1,
color: "aqua"
}));
scene.add(pointsObj);
var clock = new THREE.Clock();
var time = 0;
render();
function render() {
requestAnimationFrame(render);
time = clock.getDelta();
points.forEach(p => {
p.pointAt = (p.pointAt + time * 0.1) % 1; // it always will be from 0 to 1
curve.getPoint(p.pointAt, p); //re-using of the current point
});
pointsGeom.verticesNeedUpdate = true;
renderer.render(scene, camera);
}
&#13;
body {
overflow: hidden;
margin: 0;
}
&#13;
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
&#13;