三.js颗粒不出现在形状内

Question

我一直在尝试修改此演示。目前，粒子被放置在文本几何体中，我在这里的最终目标是相反的。我想：

1. 将文本几何图形替换为方框、圆锥体和球体。

2. 用数字替换粒子。

所以基本上，把数字放在其中一个形状内，并对粒子进行动画处理，以延迟形成下一个形状。

首先，我尝试改变形状，使粒子和其他所有东西保持原样。但是，由于某种原因，粒子没有出现。我不确定为什么粒子没有渲染？控制台不记录任何错误。

另外，将数字作为粒子的最快方法是什么？如果有人能给我指出正确的方向，那就太好了。谢谢！

Answer 1

抱歉，我实际上能够修复未渲染的粒子。我正在迭代 而不是 .shapesparticleCount// Particlesfor (var i = 0; i < shapes; i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ^^^^^^&nbsp; let vertex = new THREE.Vector3();&nbsp; vertex.x = 0;&nbsp; vertex.y = 0;&nbsp; vertex.z = 0;&nbsp; particles.vertices.push(vertex);}下面是加载粒子的更新代码。// Optionsconst shapes = [{&nbsp; &nbsp; &nbsp; "geoCode": new THREE.ConeGeometry(25, 50, 30),&nbsp; &nbsp; &nbsp; "color": 0x11659C,&nbsp; &nbsp; },&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; "geoCode": new THREE.SphereGeometry(25, 33, 33),&nbsp; &nbsp; &nbsp; "color": 0x8F3985,&nbsp; &nbsp; },&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; "geoCode": new THREE.BoxGeometry(50, 50, 50),&nbsp; &nbsp; &nbsp; "color": 0x029894,&nbsp; &nbsp; }&nbsp; ],&nbsp; triggers = document.getElementsByTagName('span'),&nbsp; particleCount = 1000,&nbsp; particleSize = 3,&nbsp; defaultAnimationSpeed = 1,&nbsp; morphAnimationSpeed = 18,&nbsp; color = '#FFFFFF';// Rendererconst renderer = new THREE.WebGLRenderer({&nbsp; antialias: true});renderer.setPixelRatio(window.devicePixelRatio);renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);// Ensure Full Screen on Resizefunction fullScreen() {&nbsp; camera.aspect = window.innerWidth / window.innerHeight;&nbsp; camera.updateProjectionMatrix();&nbsp; renderer.setSize(window.innerWidth, window.innerHeight);}window.addEventListener('resize', fullScreen, false)// Sceneconst scene = new THREE.Scene();// Camera and positionconst camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);camera.position.y = -45;camera.position.z = 45;// Lightingconst light = new THREE.AmbientLight(0xFFFFFF, 1);scene.add(light);// Particle Varsconst particles = new THREE.Geometry();const pMaterial = new THREE.PointsMaterial({&nbsp; size: particleSize,});// Textsconst loader = new THREE.FontLoader();const typeface = 'https://dl.dropboxusercontent.com/s/bkqic142ik0zjed/swiss_black_cond.json?';//CONTINUEloader.load(typeface, (font) => {&nbsp; Array.from(shapes).forEach((shape, idx) => {&nbsp; &nbsp; shapes[idx].geometry = shapes[idx].geoCode;&nbsp; &nbsp; const material = new THREE.MeshLambertMaterial({&nbsp; &nbsp; &nbsp; color: shapes[idx].color,&nbsp; &nbsp; &nbsp; opacity: .5,&nbsp; &nbsp; &nbsp; transparent: true,&nbsp; &nbsp; &nbsp; wireframe: true&nbsp; &nbsp; });&nbsp; &nbsp; const mesh = new THREE.Mesh(shapes[idx].geometry, material);&nbsp; &nbsp; //THREE.GeometryUtils.center(shapes[idx].geometry)&nbsp; &nbsp; scene.add(mesh);&nbsp; &nbsp; shapes[idx].particles = new THREE.Geometry();&nbsp; &nbsp; shapes[idx].points = THREE.GeometryUtils.randomPointsInGeometry(shapes[idx].geometry, particleCount);&nbsp; &nbsp; createVertices(shapes[idx].particles, shapes[idx].points)&nbsp; &nbsp; enableTrigger(shape, idx, triggers[idx]);&nbsp; });});// Particlesfor (var i = 0; i < particleCount; i++) {&nbsp; const vertex = new THREE.Vector3();&nbsp; vertex.x = 0;&nbsp; vertex.y = 0;&nbsp; vertex.z = 0;&nbsp; particles.vertices.push(vertex);}function createVertices(emptyArray, points) {&nbsp; for (var p = 0; p < particleCount; p++) {&nbsp; &nbsp; const vertex = new THREE.Vector3();&nbsp; &nbsp; vertex.x = points[p]['x'];&nbsp; &nbsp; vertex.y = points[p]['y'];&nbsp; &nbsp; vertex.z = points[p]['z'];&nbsp; &nbsp; emptyArray.vertices.push(vertex);&nbsp; }}function enableTrigger(trigger, idx, el) {&nbsp; el.setAttribute('data-disabled', false);&nbsp; el.addEventListener('click', () => {&nbsp; &nbsp; morphTo(shapes[idx].particles, el.dataset.color);&nbsp; })&nbsp; if (idx == 0) {&nbsp; &nbsp; morphTo(shapes[idx].particles, el.dataset.color);&nbsp; }}let particleSystem = new THREE.Points(&nbsp; particles,&nbsp; pMaterial);particleSystem.sortParticles = true;// Add the particles to the scenescene.add(particleSystem);// Animateconst normalSpeed = (defaultAnimationSpeed / 100),&nbsp; fullSpeed = (morphAnimationSpeed / 100)let animationVars = {&nbsp; speed: normalSpeed,&nbsp; color: color,&nbsp; rotation: 100}function animate() {&nbsp; particleSystem.rotation.y += animationVars.speed;&nbsp; particles.verticesNeedUpdate = true;&nbsp; camera.position.z = animationVars.rotation;&nbsp; camera.position.y = animationVars.rotation;&nbsp; camera.lookAt(scene.position);&nbsp; particleSystem.material.color = new THREE.Color(animationVars.color);&nbsp; window.requestAnimationFrame(animate);&nbsp; renderer.render(scene, camera);}animate();function morphTo(newParticles, color = '#FFFFFF') {&nbsp; TweenMax.to(animationVars, 2, {&nbsp; &nbsp; ease: Linear.easeNone,&nbsp; &nbsp; color: color&nbsp; });&nbsp; particleSystem.material.color.setHex(color);&nbsp; for (let i = 0; i < particles.vertices.length; i++) {&nbsp; &nbsp; TweenMax.to(particles.vertices[i], 2, {&nbsp; &nbsp; &nbsp; ease: Elastic.easeOut.config(0.1, .3),&nbsp; &nbsp; &nbsp; x: newParticles.vertices[i].x,&nbsp; &nbsp; &nbsp; y: newParticles.vertices[i].y,&nbsp; &nbsp; &nbsp; z: newParticles.vertices[i].z&nbsp; &nbsp; })&nbsp; }}body {&nbsp; font-family: 'Titillium Web', sans-serif;&nbsp; margin: 0;&nbsp; overflow: hidden;}.triggers {&nbsp; bottom: 20px;&nbsp; color: white;&nbsp; left: 50%;&nbsp; position: absolute;&nbsp; text-align: center;&nbsp; transform: translateX(-50%);&nbsp; width: 100%;&nbsp; z-index: 10;}.triggers span {&nbsp; cursor: pointer;&nbsp; display: inline-block;&nbsp; font-size: 14px;&nbsp; margin: 0 20px;&nbsp; padding: 2px 4px;&nbsp; transition: opacity 0.5s, color 0.5s;}.triggers span[data-disabled="true"] {&nbsp; opacity: 0.3;&nbsp; pointer-events: none;}.triggers span:hover {&nbsp; color: red;}<div class="triggers">&nbsp; <span data-disabled="true" data-color="#3D8CD0">CLICK</span>&nbsp; <span data-disabled="true" data-color="#D32A7B">TO</span>&nbsp; <span data-disabled="true" data-color="#2AD37A">SWITCH</span></div><script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/109/three.js" type="text/javascript"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js" type="text/javascript"></script><script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/605067/GeometryUtils.js" type="text/javascript"></script>注意：这篇文章只有一个不渲染的粒子的解决方案。我将接受回答我应该如何用数字替换粒子的帖子。