current position:Home>three. JS imitates the blockchain to realize the interconnection of multiple small balls
three. JS imitates the blockchain to realize the interconnection of multiple small balls
2022-01-31 23:12:57 【Chefs learn webgl】
Realization principle
utilize SphereGeometry First, randomly generate a large point like sphere , Take its vertex .
According to the number of vertices , Number of generated balls , The position of each ball is positioned as vertex data , So far, all small balls have been generated .
Two points and one line , Empathy , The positioning positions of the two balls are connected , It's a small ball connected . According to the specific design algorithm , Set the connection of small balls .
Copy code
Step one Generate small ball
Generate a series of small balls according to the vertex data
addSingleSphereGeometry(position) {
var geometry = new THREE.SphereBufferGeometry( 7, 32, 32 );
var material = new THREE.MeshBasicMaterial( {color: '#949494'} );
var sphere = new THREE.Mesh( geometry, material );
sphere.name = position.name;
sphere.isLine = position.isLine;
sphere.position.set(position.x, position.y, position.z)
this.scene.add( sphere );
}
Copy code
Step two Two small balls are connected -- attachment
According to the position of the two small balls , Two vertices are connected
addSingleLineGeometry(points) {
let vectors = [];
points.forEach(item => {
vectors = vectors.concat([item.x, item.y, item.z])
})
const lineGeometry = new THREE.BufferGeometry();
lineGeometry.setAttribute( 'position', new THREE.Float32BufferAttribute( vectors, 3 ) );
const lineMaterial = new THREE.LineBasicMaterial( {
color: 0xffffff,
// lineWidth: 3 because OpenGL Core Profile And On most platforms WebGL Limitations of the renderer , Set this value anyway , The line width is always 1.
});
let object = new THREE.Line( lineGeometry, lineMaterial );
this.scene.add(object)
// this.group.add(object);
}
Copy code
Step three Design the data format of small ball vertex , The connection between the spheres
Here are some data of the design ,
x,y,z-- Vertex information , It is the positioning position of the generated ball
origin: The starting position of the ball connection . Indicates that the data is the subscript in the vertex array .
end: The terminal position of the ball connection , If there are more than one , It means that the small ball is connected with a plurality of small balls . Indicates that the data is the subscript in the vertex array of the terminal position .
isLine: true-- Indicates drawing lines , false-- Means no line
name: Vertex name , It can also represent other data , Used to record the characteristics of a small ball , Easy to do some operations .
vectors_data = [{x: -0, y: 120, z: 0, origin: 0, end: [1,2,3,4,5,6,7,8], isLine: true, name: '0-0'},
{x: -45.92201232910156, y: 110.86554718017578, z: 0, origin: 1, end: [2, 9], isLine: true, name: '0-1'},
{x: -32.47176742553711, y: 110.86554718017578, z: 32.47176742553711, origin: 2, end: [3, 10], isLine: true, name: '0-2'},
{x: -2.811912215659046e-15, y: 110.86554718017578, z: 45.92201232910156, origin: 3, end: [4, 11], isLine: true, name: '0-3'},
{x: 32.47176742553711, y: 110.86554718017578, z: 32.47176742553711, origin: 4, end: [5, 12], isLine: true, name: '0-4'},
{x: 45.92201232910156, y: 110.86554718017578, z: 5.623824431318092e-15, origin: 5, end: [6, 13], isLine: true, name: '0-5'},
{x: 32.47176742553711, y: 110.86554718017578, z: -32.47176742553711, origin: 6, end: [7, 14], isLine: true, name: '0-6'},
{x: 8.435736646977138e-15, y: 110.86554718017578, z: -45.92201232910156, origin: 7, end: [8, 15], isLine: true, name: '0-7'},
{x: -32.47176742553711, y: 110.86554718017578, z: -32.47176742553711, origin: 8, end: [1, 16], isLine: true, name: '0-8'},
{x: -84.85281372070312, y: 84.85281372070312, z: 0, origin: 9, end: [10, 17], isLine: true, name: '0-9'},
{x: -60, y: 84.85281372070312, z: 60, origin: 10, end: [11, 18], isLine: true, name: '0-10'},
{x: -5.19573652087461e-15, y: 84.85281372070312, z: 84.85281372070312, origin: 11, end: [12, 19], isLine: true, name: '0-11'},
{x: 60, y: 84.85281372070312, z: 60, origin: 12, end: [13, 20], isLine: true, name: '0-12'},
{x: 84.85281372070312, y: 84.85281372070312, z: 1.039147304174922e-14, origin: 13, end: [14, 21], isLine: true, name: '0-13'},
{x: 60, y: 84.85281372070312, z: -60, origin: 14, end: [15, 22], isLine: true, name: '0-14'},
{x: 1.5587208715590883e-14, y: 84.85281372070312, z: -84.85281372070312, origin: 15, end: [16, 23], isLine: true, name: '0-15'},
{x: -60, y: 84.85281372070312, z: -60, origin: 16, end: [9, 24], isLine: true, name: '0-16'}]
initSphereAndLine() {
vectors_data.forEach(item => {
this.addSingleSphereGeometry(item)
})
vectors_data.forEach(item => {
if(item.isLine) {
item.end.forEach(i => {
let tempArr = [];
tempArr.push(vectors_data[item.origin])
tempArr.push(vectors_data[i])
console.log(tempArr)
this.addSingleLineGeometry(tempArr)
})
}
})
}
Copy code
Step four Monitor click events , Clicked ball , Set to red
document.addEventListener( 'click', this.mouseClick, false );
mouseClick(event) {
var mouse = new THREE.Vector2();
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
this.raycaster.setFromCamera( mouse, this.camera );
var intersects = this.raycaster.intersectObjects( this.scene.children, false );
for ( var i = 0; i < intersects.length; i++ ) {
if(intersects[i].face) {
intersects[ i ].object.material.color.set( 0xff0000 );
}
}
}
Copy code
remarks : The basic interaction has been realized , Click to know the selected ball , Make corresponding operation . The code is incomplete , The overall idea is realized in this way .
copyright notice
author[Chefs learn webgl],Please bring the original link to reprint, thank you.
https://en.netfreeman.com/2022/01/202201312312549793.html
The sidebar is recommended
- CEO of DeVere group: Ethereum's rise as the largest cryptocurrency "seems unstoppable"
- The Vienna Stock Exchange will list the encrypted ETP of London financial services company etc group
- Analysts said Ethereum's "liquidity crisis" could set an all-time high ahead of bitcoin
- Compound's general counsel: the U.S. Treasury hopes to "capture defi" through the infrastructure bill
- After six years of silence, the dog coin foundation will be officially rebuilt
- Analysts say $46500 is a key level for bitcoin to regain support
- Alex Saunders was attacked again after Nuggets news failed to start its virtual headquarters in decentraland
- Tiktok cooperates with audius, a cryptocurrency based music streaming platform
- Cointegraph Chinese news platform app officially launched
- The five most noteworthy cryptocurrencies this week: BTC, etc, Luna, Klay and AXS
guess what you like
-
US Treasury to help? Its officials will clarify the encrypted tax reporting rules in the infrastructure bill
-
Fitch Ratings warned that El Salvador's "bitcoin law" will bring risks to local insurance companies
-
How is the defi protocol attacked by hackers?
-
Qucoin morning post | Ibox issued classic traditional Chinese painting, which was sold out immediately after NFT went online
-
Metamask: it has not been acquired by financial institutions and has never communicated with JPMorgan Chase
-
Advisor shares submits an application for active management bitcoin ETF to the sec
-
Why is the meta universe the "beautiful new world" of the next generation Internet
-
Kusama is about to enter the second round of auction. How far is Polkadot's auction?
-
Immutable X and Gala games who are more likely to become chain game steam?
-
Coinbase interview with Mina CEO: ZK snarks is encryption magic
Random recommended
- Why is it an inevitable trend for blockchain to integrate privacy computing?
- Hitbtc: mnemonic word leakage is sentinel software vulnerability. Sentinel is shirking technical defects
- POS who often changes new clothes
- In the wave of gamefi, who can win this infrastructure card battle?
- Coinbase interview with Mina CEO: Justin said ZK snarks is encryption magic
- Project weekly V God: I hope Ethereum can run the meta universe in 5-10 years
- The total lock up volume of Qu coin defi daily | defi agreement exceeded US $110 billion
- The story behind horizen labs's $7 million seed round financing
- Decoding: NFT and CBDC collide with the future of finance. Does the United States have corresponding encryption regulations?
- Technical weekly Ethereum 2.0 test network Pyrmont completes Altair hard bifurcation
- Will globalization be the future outlet of bitcoin mining enterprises?
- What does "tiktok + blockchain" mean in the music industry?
- Will NFT break the circle be a new dawn in the encryption industry?
- Why is it an inevitable trend for blockchain to integrate privacy computing?
- POS who often changes new clothes
- Qu coin Morning Post predicts that the Federal Reserve will eventually issue its own digital currency
- In depth analysis of the sustainability of gamefi chain games from the underlying technology and business logic
- Master the necessary resources and analysis tools of NFT
- Source: 10t holdings and akuna capital purchased US $100 million equity of derivative trading platform deribit in the secondary market
- Ethereum core developer: Ethereum difficulty bomb may be postponed again
- DAPP industry overview in July: the heat is rising, with about 1.4 million independent users every day
- How do I integrate cefi and defi with Solana?
- Global cryptocurrency adoption index in 2021: conversion between economic powers and emerging markets
- Experience of NFT exchange element
- New infrastructure of Web 3.0 adds a strong general: is cloud computing platform a positive solution?
- Experience of NFT exchange element
- How do I integrate cefi and defi with Solana?
- Master the necessary resources and analysis tools of NFT
- Global cryptocurrency adoption index in 2021: conversion between economic powers and emerging markets
- Next week, the near ecological action will be frequent, and Terra's "columbus-5 upgrade" governance vote will end
- Why on earth is crazy stone? Understand the value of "money is caprice"
- Defi weekly sec Chairman: no matter how "decentralized", defi must be regulated
- Defi era: how does Dao Treasury manage assets
- What are the differences between the most popular synthetic asset platforms
- Federal Reserve: the issuance of CBDC will make usdt and other stable currencies disappear
- NFT trading volume breaks record, quick view of potential projects and exploration Guide
- Shapeshift, Daos and the future of work
- Hard core observation 371 bitcoin BSV miners dig 2GB blocks on the blockchain
- Zhanrui and its partners released: the world's first PSA certified software and hardware integrated IOT blockchain solution
- Blockchain card game NFT game development