const count = 30; // 渲染几何体的的数量为该值的平方 import * as THREE from "https://cdn.bootcdn.net/ajax/libs/three.js/0.164.1/three.module.min.js" const { EventDispatcher: EventDispatcher, MOUSE: MOUSE, Quaternion: Quaternion, Spherical: Spherical, TOUCH: TOUCH, Vector2: Vector2, Vector3: Vector3, Plane: Plane, Ray: Ray, MathUtils: MathUtils } = THREE, _changeEvent = { type: "change" }, _startEvent = { type: "start" }, _endEvent = { type: "end" }, _ray = new Ray, _plane = new Plane, TILT_LIMIT = Math.cos(70 * MathUtils.DEG2RAD); class OrbitControls extends EventDispatcher { constructor(e, t) { super(), this.object = e, this.domElement = t, this.domElement.style.touchAction = "none", this.enabled = !0, this.target = new Vector3, this.cursor = new Vector3, this.minDistance = 0, this.maxDistance = 1 / 0, this.minZoom = 0, this.maxZoom = 1 / 0, this.minTargetRadius = 0, this.maxTargetRadius = 1 / 0, this.minPolarAngle = 0, this.maxPolarAngle = Math.PI, this.minAzimuthAngle = -1 / 0, this.maxAzimuthAngle = 1 / 0, this.enableDamping = !1, this.dampingFactor = .05, this.enableZoom = !0, this.zoomSpeed = 1, this.enableRotate = !0, this.rotateSpeed = 1, this.enablePan = !0, this.panSpeed = 1, this.screenSpacePanning = !0, this.keyPanSpeed = 7, this.zoomToCursor = !1, this.autoRotate = !1, this.autoRotateSpeed = 2, this.keys = { LEFT: "ArrowLeft", UP: "ArrowUp", RIGHT: "ArrowRight", BOTTOM: "ArrowDown" }, this.mouseButtons = { LEFT: MOUSE.ROTATE, MIDDLE: MOUSE.DOLLY, RIGHT: MOUSE.PAN }, this.touches = { ONE: TOUCH.ROTATE, TWO: TOUCH.DOLLY_PAN }, this.target0 = this.target.clone(), this.position0 = this.object.position.clone(), this.zoom0 = this.object.zoom, this._domElementKeyEvents = null, this.getPolarAngle = function() { return r.phi }, this.getAzimuthalAngle = function() { return r.theta }, this.getDistance = function() { return this.object.position.distanceTo(this.target) }, this.listenToKeyEvents = function(e) { e.addEventListener("keydown", Q), this._domElementKeyEvents = e }, this.stopListenToKeyEvents = function() { this._domElementKeyEvents.removeEventListener("keydown", Q), this._domElementKeyEvents = null }, this.saveState = function() { n.target0.copy(n.target), n.position0.copy(n.object.position), n.zoom0 = n.object.zoom }, this.reset = function() { n.target.copy(n.target0), n.object.position.copy(n.position0), n.object.zoom = n.zoom0, n.object.updateProjectionMatrix(), n.dispatchEvent(_changeEvent), n.update(), a = o.NONE }, this.update = function() { const t = new Vector3, m = (new Quaternion).setFromUnitVectors(e.up, new Vector3(0, 1, 0)), p = m.clone().invert(), u = new Vector3, h = new Quaternion, d = new Vector3, b = 2 * Math.PI; return function(E = null) { const g = n.object.position; t.copy(g).sub(n.target), t.applyQuaternion(m), r.setFromVector3(t), n.autoRotate && a === o.NONE && L(function(e) { return null !== e ? 2 * Math.PI / 60 * n.autoRotateSpeed * e : 2 * Math.PI / 60 / 60 * n.autoRotateSpeed }(E)), n.enableDamping ? (r.theta += c.theta * n.dampingFactor, r.phi += c.phi * n.dampingFactor) : (r.theta += c.theta, r.phi += c.phi); let f = n.minAzimuthAngle, v = n.maxAzimuthAngle; isFinite(f) && isFinite(v) && (f < -Math.PI ? f += b : f > Math.PI && (f -= b), v < -Math.PI ? v += b : v > Math.PI && (v -= b), r.theta = f <= v ? Math.max(f, Math.min(v, r.theta)) : r.theta > (f + v) / 2 ? Math.max(f, r.theta) : Math.min(v, r.theta)), r.phi = Math.max(n.minPolarAngle, Math.min(n.maxPolarAngle, r.phi)), r.makeSafe(), !0 === n.enableDamping ? n.target.addScaledVector(l, n.dampingFactor) : n.target.add(l), n.target.sub(n.cursor), n.target.clampLength(n.minTargetRadius, n.maxTargetRadius), n.target.add(n.cursor); let P = !1; if (n.zoomToCursor && O || n.object.isOrthographicCamera) r.radius = _(r.radius); else { const e = r.radius; r.radius = _(r.radius * s), P = e != r.radius } if (t.setFromSpherical(r), t.applyQuaternion(p), g.copy(n.target).add(t), n.object.lookAt(n.target), !0 === n.enableDamping ? (c.theta *= 1 - n.dampingFactor, c.phi *= 1 - n.dampingFactor, l.multiplyScalar(1 - n.dampingFactor)) : (c.set(0, 0, 0), l.set(0, 0, 0)), n.zoomToCursor && O) { let o = null; if (n.object.isPerspectiveCamera) { const e = t.length(); o = _(e * s); const a = e - o; n.object.position.addScaledVector(y, a), n.object.updateMatrixWorld(), P = !!a } else if (n.object.isOrthographicCamera) { const e = new Vector3(T.x, T.y, 0); e.unproject(n.object); const a = n.object.zoom; n.object.zoom = Math.max(n.minZoom, Math.min(n.maxZoom, n.object.zoom / s)), n.object.updateProjectionMatrix(), P = a !== n.object.zoom; const i = new Vector3(T.x, T.y, 0); i.unproject(n.object), n.object.position.sub(i).add(e), n.object.updateMatrixWorld(), o = t.length() } else n.zoomToCursor = !1; null !== o && (this.screenSpacePanning ? n.target.set(0, 0, -1).transformDirection(n.object.matrix).multiplyScalar(o).add(n.object.position) : (_ray.origin.copy(n.object.position), _ray.direction.set(0, 0, -1).transformDirection(n.object.matrix), Math.abs(n.object.up.dot(_ray.direction)) < TILT_LIMIT ? e.lookAt(n.target) : (_plane.setFromNormalAndCoplanarPoint(n.object.up, n.target), _ray.intersectPlane(_plane, n.target)))) } else if (n.object.isOrthographicCamera) { const e = n.object.zoom; n.object.zoom = Math.max(n.minZoom, Math.min(n.maxZoom, n.object.zoom / s)), e !== n.object.zoom && (n.object.updateProjectionMatrix(), P = !0) } return s = 1, O = !1, !!(P || u.distanceToSquared(n.object.position) > i || 8 * (1 - h.dot(n.object.quaternion)) > i || d.distanceToSquared(n.target) > i) && (n.dispatchEvent(_changeEvent), u.copy(n.object.position), h.copy(n.object.quaternion), d.copy(n.target), !0) } }(), this.dispose = function() { n.domElement.removeEventListener("contextmenu", W), n.domElement.removeEventListener("pointerdown", K), n.domElement.removeEventListener("pointercancel", F), n.domElement.removeEventListener("wheel", Z), n.domElement.removeEventListener("pointermove", X), n.domElement.removeEventListener("pointerup", F); n.domElement.getRootNode().removeEventListener("keydown", B, { capture: !0 }), null !== n._domElementKeyEvents && (n._domElementKeyEvents.removeEventListener("keydown", Q), n._domElementKeyEvents = null) }; const n = this, o = { NONE: -1, ROTATE: 0, DOLLY: 1, PAN: 2, TOUCH_ROTATE: 3, TOUCH_PAN: 4, TOUCH_DOLLY_PAN: 5, TOUCH_DOLLY_ROTATE: 6 }; let a = o.NONE; const i = 1e-6, r = new Spherical, c = new Spherical; let s = 1; const l = new Vector3, m = new Vector2, p = new Vector2, u = new Vector2, h = new Vector2, d = new Vector2, b = new Vector2, E = new Vector2, g = new Vector2, f = new Vector2, y = new Vector3, T = new Vector2; let O = !1; const v = [], P = {}; let j = !1; function M(e) { const t = Math.abs(.01 * e); return Math.pow(.95, n.zoomSpeed * t) } function L(e) { c.theta -= e } function w(e) { c.phi -= e } const A = function() { const e = new Vector3; return function(t, n) { e.setFromMatrixColumn(n, 0), e.multiplyScalar(-t), l.add(e) } }(), x = function() { const e = new Vector3; return function(t, o) { !0 === n.screenSpacePanning ? e.setFromMatrixColumn(o, 1) : (e.setFromMatrixColumn(o, 0), e.crossVectors(n.object.up, e)), e.multiplyScalar(t), l.add(e) } }(), S = function() { const e = new Vector3; return function(t, o) { const a = n.domElement; if (n.object.isPerspectiveCamera) { const i = n.object.position; e.copy(i).sub(n.target); let r = e.length(); r *= Math.tan(n.object.fov / 2 * Math.PI / 180), A(2 * t * r / a.clientHeight, n.object.matrix), x(2 * o * r / a.clientHeight, n.object.matrix) } else n.object.isOrthographicCamera ? (A(t * (n.object.right - n.object.left) / n.object.zoom / a.clientWidth, n.object.matrix), x(o * (n.object.top - n.object.bottom) / n.object.zoom / a.clientHeight, n.object.matrix)) : n.enablePan = !1 } }(); function k(e) { n.object.isPerspectiveCamera || n.object.isOrthographicCamera ? s /= e : n.enableZoom = !1 } function R(e) { n.object.isPerspectiveCamera || n.object.isOrthographicCamera ? s *= e : n.enableZoom = !1 } function N(e, t) { if (!n.zoomToCursor) return; O = !0; const o = n.domElement.getBoundingClientRect(), a = e - o.left, i = t - o.top, r = o.width, c = o.height; T.x = a / r * 2 - 1, T.y = -i / c * 2 + 1, y.set(T.x, T.y, 1).unproject(n.object).sub(n.object.position).normalize() } function _(e) { return Math.max(n.minDistance, Math.min(n.maxDistance, e)) } function C(e) { m.set(e.clientX, e.clientY) } function Y(e) { h.set(e.clientX, e.clientY) } function I(e) { if (1 === v.length) m.set(e.pageX, e.pageY); else { const t = $(e), n = .5 * (e.pageX + t.x), o = .5 * (e.pageY + t.y); m.set(n, o) } } function D(e) { if (1 === v.length) h.set(e.pageX, e.pageY); else { const t = $(e), n = .5 * (e.pageX + t.x), o = .5 * (e.pageY + t.y); h.set(n, o) } } function V(e) { const t = $(e), n = e.pageX - t.x, o = e.pageY - t.y, a = Math.sqrt(n * n + o * o); E.set(0, a) } function H(e) { if (1 == v.length) p.set(e.pageX, e.pageY); else { const t = $(e), n = .5 * (e.pageX + t.x), o = .5 * (e.pageY + t.y); p.set(n, o) } u.subVectors(p, m).multiplyScalar(n.rotateSpeed); const t = n.domElement; L(2 * Math.PI * u.x / t.clientHeight), w(2 * Math.PI * u.y / t.clientHeight), m.copy(p) } function U(e) { if (1 === v.length) d.set(e.pageX, e.pageY); else { const t = $(e), n = .5 * (e.pageX + t.x), o = .5 * (e.pageY + t.y); d.set(n, o) } b.subVectors(d, h).multiplyScalar(n.panSpeed), S(b.x, b.y), h.copy(d) } function z(e) { const t = $(e), o = e.pageX - t.x, a = e.pageY - t.y, i = Math.sqrt(o * o + a * a); g.set(0, i), f.set(0, Math.pow(g.y / E.y, n.zoomSpeed)), k(f.y), E.copy(g); N(.5 * (e.pageX + t.x), .5 * (e.pageY + t.y)) } function K(e) { !1 !== n.enabled && (0 === v.length && (n.domElement.setPointerCapture(e.pointerId), n.domElement.addEventListener("pointermove", X), n.domElement.addEventListener("pointerup", F)), function(e) { for (let t = 0; t < v.length; t++) if (v[t] == e.pointerId) return !0; return !1 }(e) || (function(e) { v.push(e.pointerId) }(e), "touch" === e.pointerType ? G(e) : function(e) { let t; switch (e.button) { case 0: t = n.mouseButtons.LEFT; break; case 1: t = n.mouseButtons.MIDDLE; break; case 2: t = n.mouseButtons.RIGHT; break; default: t = -1 } switch (t) { case MOUSE.DOLLY: if (!1 === n.enableZoom) return; ! function(e) { N(e.clientX, e.clientX), E.set(e.clientX, e.clientY) }(e), a = o.DOLLY; break; case MOUSE.ROTATE: if (e.ctrlKey || e.metaKey || e.shiftKey) { if (!1 === n.enablePan) return; Y(e), a = o.PAN } else { if (!1 === n.enableRotate) return; C(e), a = o.ROTATE } break; case MOUSE.PAN: if (e.ctrlKey || e.metaKey || e.shiftKey) { if (!1 === n.enableRotate) return; C(e), a = o.ROTATE } else { if (!1 === n.enablePan) return; Y(e), a = o.PAN } break; default: a = o.NONE } a !== o.NONE && n.dispatchEvent(_startEvent) }(e))) } function X(e) { !1 !== n.enabled && ("touch" === e.pointerType ? function(e) { switch (J(e), a) { case o.TOUCH_ROTATE: if (!1 === n.enableRotate) return; H(e), n.update(); break; case o.TOUCH_PAN: if (!1 === n.enablePan) return; U(e), n.update(); break; case o.TOUCH_DOLLY_PAN: if (!1 === n.enableZoom && !1 === n.enablePan) return; ! function(e) { n.enableZoom && z(e), n.enablePan && U(e) }(e), n.update(); break; case o.TOUCH_DOLLY_ROTATE: if (!1 === n.enableZoom && !1 === n.enableRotate) return; ! function(e) { n.enableZoom && z(e), n.enableRotate && H(e) }(e), n.update(); break; default: a = o.NONE } }(e) : function(e) { switch (a) { case o.ROTATE: if (!1 === n.enableRotate) return; ! function(e) { p.set(e.clientX, e.clientY), u.subVectors(p, m).multiplyScalar(n.rotateSpeed); const t = n.domElement; L(2 * Math.PI * u.x / t.clientHeight), w(2 * Math.PI * u.y / t.clientHeight), m.copy(p), n.update() }(e); break; case o.DOLLY: if (!1 === n.enableZoom) return; ! function(e) { g.set(e.clientX, e.clientY), f.subVectors(g, E), f.y > 0 ? k(M(f.y)) : f.y < 0 && R(M(f.y)), E.copy(g), n.update() }(e); break; case o.PAN: if (!1 === n.enablePan) return; ! function(e) { d.set(e.clientX, e.clientY), b.subVectors(d, h).multiplyScalar(n.panSpeed), S(b.x, b.y), h.copy(d), n.update() }(e); break } }(e)) } function F(e) { switch (function(e) { delete P[e.pointerId]; for (let t = 0; t < v.length; t++) if (v[t] == e.pointerId) return void v.splice(t, 1) }(e), v.length) { case 0: n.domElement.releasePointerCapture(e.pointerId), n.domElement.removeEventListener("pointermove", X), n.domElement.removeEventListener("pointerup", F), n.dispatchEvent(_endEvent), a = o.NONE; break; case 1: const t = v[0], i = P[t]; G({ pointerId: t, pageX: i.x, pageY: i.y }); break } } function Z(e) { !1 !== n.enabled && !1 !== n.enableZoom && a === o.NONE && (e.preventDefault(), n.dispatchEvent(_startEvent), function(e) { N(e.clientX, e.clientY), e.deltaY < 0 ? R(M(e.deltaY)) : e.deltaY > 0 && k(M(e.deltaY)), n.update() }(function(e) { const t = e.deltaMode, n = { clientX: e.clientX, clientY: e.clientY, deltaY: e.deltaY }; switch (t) { case 1: n.deltaY *= 16; break; case 2: n.deltaY *= 100; break } e.ctrlKey && !j && (n.deltaY *= 10); return n }(e)), n.dispatchEvent(_endEvent)) } function B(e) { if ("Control" === e.key) { j = !0; n.domElement.getRootNode().addEventListener("keyup", q, { passive: !0, capture: !0 }) } } function q(e) { if ("Control" === e.key) { j = !1; n.domElement.getRootNode().removeEventListener("keyup", q, { passive: !0, capture: !0 }) } } function Q(e) { !1 !== n.enabled && !1 !== n.enablePan && function(e) { let t = !1; switch (e.code) { case n.keys.UP: e.ctrlKey || e.metaKey || e.shiftKey ? w(2 * Math.PI * n.rotateSpeed / n.domElement.clientHeight) : S(0, n.keyPanSpeed), t = !0; break; case n.keys.BOTTOM: e.ctrlKey || e.metaKey || e.shiftKey ? w(-2 * Math.PI * n.rotateSpeed / n.domElement.clientHeight) : S(0, -n.keyPanSpeed), t = !0; break; case n.keys.LEFT: e.ctrlKey || e.metaKey || e.shiftKey ? L(2 * Math.PI * n.rotateSpeed / n.domElement.clientHeight) : S(n.keyPanSpeed, 0), t = !0; break; case n.keys.RIGHT: e.ctrlKey || e.metaKey || e.shiftKey ? L(-2 * Math.PI * n.rotateSpeed / n.domElement.clientHeight) : S(-n.keyPanSpeed, 0), t = !0; break } t && (e.preventDefault(), n.update()) }(e) } function G(e) { switch (J(e), v.length) { case 1: switch (n.touches.ONE) { case TOUCH.ROTATE: if (!1 === n.enableRotate) return; I(e), a = o.TOUCH_ROTATE; break; case TOUCH.PAN: if (!1 === n.enablePan) return; D(e), a = o.TOUCH_PAN; break; default: a = o.NONE } break; case 2: switch (n.touches.TWO) { case TOUCH.DOLLY_PAN: if (!1 === n.enableZoom && !1 === n.enablePan) return; ! function(e) { n.enableZoom && V(e), n.enablePan && D(e) }(e), a = o.TOUCH_DOLLY_PAN; break; case TOUCH.DOLLY_ROTATE: if (!1 === n.enableZoom && !1 === n.enableRotate) return; ! function(e) { n.enableZoom && V(e), n.enableRotate && I(e) }(e), a = o.TOUCH_DOLLY_ROTATE; break; default: a = o.NONE } break; default: a = o.NONE } a !== o.NONE && n.dispatchEvent(_startEvent) } function W(e) { !1 !== n.enabled && e.preventDefault() } function J(e) { let t = P[e.pointerId]; void 0 === t && (t = new Vector2, P[e.pointerId] = t), t.set(e.pageX, e.pageY) } function $(e) { const t = e.pointerId === v[0] ? v[1] : v[0]; return P[t] } n.domElement.addEventListener("contextmenu", W), n.domElement.addEventListener("pointerdown", K), n.domElement.addEventListener("pointercancel", F), n.domElement.addEventListener("wheel", Z, { passive: !1 }); n.domElement.getRootNode().addEventListener("keydown", B, { passive: !0, capture: !0 }), this.update() } } const { innerWidth, innerHeight } = window; const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera( 45, innerWidth / innerHeight, 1, 1000 ); const renderer = new THREE.WebGLRenderer({ antialias: true }); const controls = new OrbitControls(camera, renderer.domElement); const dummy = new THREE.Object3D(); const temp = new THREE.Matrix4(); camera.position.set(0, 40, 40); camera.lookAt(0, 0, 0); renderer.setSize(innerWidth, innerHeight); document.body.appendChild(renderer.domElement); const light = new THREE.DirectionalLight(0xffffff, 1.5); light.position.setScalar(10); scene.add(light, new THREE.AmbientLight(0xffffff, 1)); window.addEventListener("resize", onResize); function onResize() { const { innerWidth, innerHeight } = window; renderer.setSize(innerWidth, innerHeight); camera.aspect = innerWidth / innerHeight; camera.updateProjectionMatrix(); } onResize(); const geom = new THREE.OctahedronGeometry(2); const gMat = new THREE.MeshStandardMaterial({ color: "#fff", roughness: 0.25, metalness: 0.75, polygonOffset: true, polygonOffsetFactor: 1, }); const iMesh = new THREE.InstancedMesh(geom, gMat, count * count); const pos = []; const rot = []; const scl = []; let counter = 0; for (let z = 0; z < count; z++) { for (let x = 0; x < count; x++) { dummy.position .set(Math.round(x - count / 2), 0, Math.round(z - count / 2)) .multiplyScalar(4); dummy.rotation.set( Math.random() * Math.PI * 2, Math.random() * Math.PI * 2, Math.random() * Math.PI * 2 ); dummy.updateMatrix(); iMesh.setMatrixAt(counter, dummy.matrix); pos.push(dummy.position.x, dummy.position.y, dummy.position.z); rot.push( dummy.quaternion.x, dummy.quaternion.y, dummy.quaternion.z, dummy.quaternion.w ); scl.push(dummy.scale.x, dummy.scale.y, dummy.scale.z); counter++; } } scene.add(iMesh); const eGeom = new THREE.InstancedBufferGeometry(); eGeom.setAttribute("position", geom.getAttribute("position")); eGeom.setAttribute("matrix", iMesh.instanceMatrix); eGeom.instanceCount = iMesh.instanceMatrix.array.length / 16; const eMat = new THREE.LineBasicMaterial({ color: "#fff", onBeforeCompile: (shader) => { shader.vertexShader = ` attribute mat4 matrix; varying vec3 pos; void main() { vec4 mvPosition = matrix * vec4( position, 1.0 ); pos = mvPosition.xyz; gl_Position = projectionMatrix * modelViewMatrix * mvPosition; } `; shader.fragmentShader = ` varying vec3 pos; // 2D Random float random (in vec2 st) { return fract(sin(dot(st.xy, vec2(12.1,78.8))) * 478.3); } // 2D Noise based on Morgan McGuire @morgan3d // https://www.shadertoy.com/view/4dS3Wd float noise (in vec2 st) { vec2 i = floor(st); vec2 f = fract(st); // Four corners in 2D of a tile float a = random(i); float b = random(i + vec2(1.0, 0.0)); float c = random(i + vec2(0.0, 1.0)); float d = random(i + vec2(1.0, 1.0)); // Smooth Interpolation // Cubic Hermine Curve. Same as SmoothStep() vec2 u = f*f*(3.0-2.0*f); // u = smoothstep(0.,1.,f); // Mix 4 coorners percentages return mix(a, b, u.x) + (c - a)* u.y * (1.0 - u.x) + (d - b) * u.x * u.y; } vec3 getColor( in float t, in vec3 a, in vec3 b, in vec3 c, in vec3 d ) { return a + b * cos( 6.3 * (c * t + d) ); } void main() { float step = 30.0; vec3 a = vec3(0.5,0.5,0.5); vec3 b = vec3(0.5,0.5,0.5); vec3 c = vec3(1.0,1.0,1.0); vec3 d = vec3(0.0,0.1,0.2); vec3 color = getColor(round((noise(pos.yy/3.0)+0.6 )*step)/step,a,b,c,d); gl_FragColor = vec4(color/0.2, 1.0); } `; }, }); const edges = new THREE.LineSegments(eGeom, eMat); scene.add(edges); const clock = new THREE.Clock(); const total = count * count; (function animate() { let t = clock.getDelta(); for (let i = 0; i < total; i++) { iMesh.getMatrixAt(i, temp); temp.decompose(dummy.position, dummy.quaternion, dummy.scale); dummy.rotation.x += t; dummy.rotation.z += t * 0.5; dummy.updateMatrix(); iMesh.setMatrixAt(i, dummy.matrix); } iMesh.instanceMatrix.needsUpdate = true; controls.update(t); renderer.render(scene, camera); requestAnimationFrame(animate); })();

作品「instancedEdges」预览