I made a website with three.js for graphical website.
It's concept is universe that has so many texts.
To spread text, there is two method.
First is put every mesh to group, and spread it like this.
(In this example, spread star instead of text)
group = new THREE.Group();
for ( let i = 0; i < 1000; i ++ ) {
var starsGeometry = new THREE.Geometry();
var star = new THREE.Vector3();
star.x = THREE.Math.randFloatSpread( 100 );
star.y = THREE.Math.randFloatSpread( 100 );
star.z = THREE.Math.randFloatSpread( 100 );
starsGeometry.vertices.push( star );
var starsMaterial = new THREE.PointsMaterial( { color: 0xffffff } );
var starField = new THREE.Points( starsGeometry, starsMaterial );
starField.position.x = Math.random() * 150-80;
starField.position.y = Math.random() * 180-100;
starField.position.z = Math.random() * 1000;
group.add(starField);
}
scene.add(group);
Put every meshes to group and add group to scene.
Second is just add to scene one for one like this.
for ( let i = 0; i < 1000; i ++ ) {
var starsGeometry = new THREE.Geometry();
var star = new THREE.Vector3();
star.x = THREE.Math.randFloatSpread( 100 );
star.y = THREE.Math.randFloatSpread( 100 );
star.z = THREE.Math.randFloatSpread( 100 );
starsGeometry.vertices.push( star );
var starsMaterial = new THREE.PointsMaterial( { color: 0xffffff } );
var starField = new THREE.Points( starsGeometry, starsMaterial );
starField.position.x = Math.random() * 150-80;
starField.position.y = Math.random() * 180-100;
starField.position.z = Math.random() * 1000;
scene.add(starField);
}
I wonder that what is difference between group and just scene add?
Is there any performance issue or anything else?
And I know that particles is similar with group, Is there any difference with above things?
Thanks.
Roughly the same speed. The group node transform should only get updated once per frame, which isn't a big deal.
Using a group may help you keep it organized also.. since later if you need to process just the things in that group, you have the list of them in group.children.
Related
I have two lines that will be created by the user at runtime, so the positions of these two lines are dynamic. I want one line to coincide with another line as shown in the below image.
How should I proceed
Here is my code
var camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
camera.position.z = 15;
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById("app").appendChild(renderer.domElement);
let point1 = new THREE.Vector3(14, 25, -159);
let point2 = new THREE.Vector3(-5, 2, 65);
let rightLine = createLine(point1, point2);
let point1LineTwo = new THREE.Vector3(-45, 11, -4);
let point2LineTwo = new THREE.Vector3(-26, -8, -30);
let leftLine = createLine(point1LineTwo, point2LineTwo);
function createLine(point1, point2) {
const linePoints = [];
linePoints.push(new THREE.Vector3(point1.x, point1.y, point1.z));
linePoints.push(new THREE.Vector3(point2.x, point2.y, point2.z));
let lineGeometry = new THREE.BufferGeometry().setFromPoints(linePoints);
var lineMaterial = new THREE.LineBasicMaterial({
color: 0xff5555,
linewidth: 2,
});
let line = new THREE.Line(lineGeometry, lineMaterial);
scene.add(line);
return line;
}
function makeCoincident() {
let rightLineVector = new THREE.Vector3();
const positions = rightLine.geometry.attributes.position.array;
rightLineVector.x = positions[3] - positions[0];
rightLineVector.y = positions[4] - positions[1];
rightLineVector.z = positions[5] - positions[2];
let leftLineVector = new THREE.Vector3();
const lineLeftPosition = leftLine.geometry.attributes.position.array;
leftLineVector.x = lineLeftPosition[3] - lineLeftPosition[0];
leftLineVector.y = lineLeftPosition[4] - lineLeftPosition[1];
leftLineVector.z = lineLeftPosition[5] - lineLeftPosition[2];
//Calulate angle Between leftLineVector and rightLineVector
let angle = leftLineVector.clone().angleTo(rightLineVector);
//calculate cross prduct of lineOneVector and lineTwoVector
let crossPoductVector = new THREE.Vector3();
crossPoductVector.crossVectors(leftLineVector, rightLineVector);
crossPoductVector.normalize();
rightLineVector.applyAxisAngle(crossPoductVector.clone(), angle);
//align right line on left line
var axis = new THREE.Vector3(0, 1, 0);
rightLine.quaternion.setFromUnitVectors(
axis,
rightLineVector.clone().normalize()
);
}
window.addEventListener("keydown", function (event) {
switch (event.keyCode) {
case 81: // Q
makeCoincident();
break;
default:
}
});
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
I created a sandbox [ Link to code sandbox where I created the same problem without dynamic line creation.
I have two lines with random position. one function named makeCoincident() which makes them coincident which gets called when you press Q key. I tried to solve it but it is not working if you can look into sandbox and tell me where I am going wrong and what is the solution It will be big help thanks
The code you gave is confusing because of the right and left naming. I rewrote the makeCoincident function
https://codepen.io/cdeep/pen/dydQKoV
To summarize briefly, I first move the vertices of the green line to make the center of the green line intersect with the center of the red. And then, set the vertices of green to a point on the extension of red corresponding to the length of green line.
There is infact, no need to move the green line to make intersecting centres. It's just for clarity incase there's a requirement to make them intersecting without the need for coinciding. Can be omitted for the current question.
function makeCoincident() {
const greenLinePositions = rightLine.geometry.attributes.position.array;
const redLinePositions = leftLine.geometry.attributes.position.array;
const greenLineCenter = new THREE.Vector3(
(greenLinePositions[3] + greenLinePositions[0]) * 0.5,
(greenLinePositions[4] + greenLinePositions[1]) * 0.5,
(greenLinePositions[5] + greenLinePositions[2]) * 0.5,
);
const redLineCenter = new THREE.Vector3(
(redLinePositions[3] + redLinePositions[0]) * 0.5,
(redLinePositions[4] + redLinePositions[1]) * 0.5,
(redLinePositions[5] + redLinePositions[2]) * 0.5,
);
const translationVector = redLineCenter.clone().sub(greenLineCenter);
// Vector pointing from center of green to center of red
const translationArray = translationVector.toArray();
for(let i = 0; i < 6; i++) {
greenLinePositions[i] = greenLinePositions[i] + translationArray[i % 3];
// Move vertices of green line towards red
}
rightLine.geometry.attributes.position.needsUpdate = true;
// Centres of red and green now intersect
const greenLineLength = new THREE.Vector3(
greenLinePositions[0] - greenLinePositions[3],
greenLinePositions[1] - greenLinePositions[4],
greenLinePositions[2] - greenLinePositions[5],
).length();
const redLineDirection = new THREE.Vector3(
redLinePositions[0] - redLinePositions[3],
redLinePositions[1] - redLinePositions[4],
redLinePositions[2] - redLinePositions[5],
).normalize();
// Get new positions of green on the extension of red
const greenPoint1 = redLineCenter.clone().add(redLineDirection.clone().multiplyScalar(greenLineLength * 0.5));
const greenPoint2 = redLineCenter.clone().add(redLineDirection.clone().multiplyScalar(greenLineLength * -0.5));
// Set the attribute values from the new position vectors
greenLinePositions[0] = greenPoint1.x;
greenLinePositions[1] = greenPoint1.y;
greenLinePositions[2] = greenPoint1.z;
greenLinePositions[3] = greenPoint2.x;
greenLinePositions[4] = greenPoint2.y;
greenLinePositions[5] = greenPoint2.z;
rightLine.geometry.attributes.position.needsUpdate = true;
}
To display rack structure, placing one box upon another. But y Position calculation fails.Currently creates gap between boxes. Please inform how could it be fixed, whether camera or light effect creates a problem. As per rack size, altering y position. Data contain size and starting place.
```
var data = [{"id": 10075,"size": 3,"slotNumber": 1},{"id": 10174,"size": 7,"slotNumber": 4}];
var rackListGroup;
init();
function init() {
scene = new THREE.Scene();
scene.background = new THREE.Color( 0x999999 );
var light = new THREE.AmbientLight( 0xffffff );
light.position.set( 0.5, 1.0, 0.5 ).normalize();
scene.add( light );
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.fromArray([0, 0, 140]);
scene.add( camera );
rackListGroup = new THREE.Mesh();
rackListGroup.name = "Rack List"
var i;
for (i = 0; i < 1; i++) {
rackListGroup.add(drawRack(10, i))
}
scene.add(rackListGroup);
render();
}
function drawRack(size, rackNo){
var rackGroup = new THREE.Group();
rackGroup.name = "rack "+rackNo;
var yPosition = -42;
var xPosition = -20 + parseInt(rackNo)*40;
var slot = 1, counter = 0;
var slotWidth = 5;
while(slot <= parseInt(size)){
var slotSize = data[counter].size;
slot = slot + slotSize;
yPosition = yPosition + slotSize* slotWidth;
var geometry = new THREE.BoxGeometry( 30, slotWidth*slotSize, 5 );
var material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
var shape = new THREE.Mesh( geometry, material );
shape.name = data[counter].name;
shape.position.set(xPosition, yPosition, 0);
rackGroup.add(shape);
var boxGeometry = new THREE.BoxBufferGeometry( 30, slotWidth*slotSize, 5, 1, 1, 1 );
var boxMaterial = new THREE.MeshBasicMaterial( { wireframe:true } );
var box = new THREE.Mesh( boxGeometry, boxMaterial );
box.name = data[counter].name;
box.position.set(xPosition, yPosition, 0);
rackGroup.add(box);
if(counter+1 < data.length){
counter++;
}
}
return rackGroup;
}
```
I've tried your code and I see a misunderstanding between the objects position and the objects height to be able to stack them on top of each other.
You use one variable for yPosition and you need 2 variables, the reason is that geometries are positioned based on its axes center, so it means a 15 units height mesh positioned at y=0 it will place indeed at -7.5 units below the y=0 position and the upper side of the geometry will be at 7.5. So next slot to stack will be needed to place (conceptually) at y = 7.5 + (topSlotHeight / 2).
That's why your calculation of the next slot to stack y position is wrong. I have created this fiddle with the solution, and I have added a gridHelper at y=0 for your reference and the OrbitControls to be able to check it better. Now it works perfectly doing like this, storing the accumulated base position of the previous slot in yBaseHeight and the yPosition for the slot on top:
var slotHeight = (slotSize * slotWidth);
yPosition = yBaseHeight + (slotHeight / 2);
yBaseHeight = yBaseHeight + slotHeight;
PD.- I saw you start placing objects at y=-42, I started from y=0 to show better the effect.
We are creating a three.js based game where players can eat food, currently we have a collision script but it is not working properly. Any help to get it working so our players can eat would be greatly appreciated.
The code is below.
Code snippet:
//sorry in advance for the crazy code structure o.o
//variables
var scene, renderer, rayCaster;
var WORLD, floor, FOOD, MWORLD;
var plr, camera, controls;
function debugupdate()
{
window.plr = plr
window.floor = floor
window.WORLD = WORLD
window.camera = camera
window.controls = controls
window.scene = scene
window.FOOD = FOOD
}
setInterval(debugupdate, 1000)
//setup scene for gameplay
function InitGame()
{
scene = new THREE.Scene();
renderer = new THREE.WebGLRenderer();
rayCaster = new THREE.Raycaster();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
camera.position.y = 8;
camera.position.z = 8;
controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.autoRotate = false;
controls.enablePan = false;
//controls.update() must be called after any manual changes to the camera's transform
//camera.position.set( 0, 20, 100 );
//controls.update();
//MWORLD = stuff mouse can detect
MWORLD = new THREE.Object3D();
MWORLD.name = 'MWORLD'
var floorgeo = new THREE.BoxGeometry(30, 0.5, 30);
var floormat = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
floor = new THREE.Mesh( floorgeo, floormat );
MWORLD.add(floor)
WORLD = new THREE.Object3D();
WORLD.add( MWORLD );
WORLD.name = 'WORLD';
scene.add(WORLD);
}
InitGame();
//Mouse Stuff
var MousePos;
var PlrTarget;
document.addEventListener('mousemove', MouseToWorld, false);
function MouseToWorld(event) {
event.preventDefault();
var mouse = {};
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
var vector = new THREE.Vector3(mouse.x, mouse.y, 0.5);
vector.unproject( camera );
var dir = vector.sub( camera.position ).normalize();
var distance = - camera.position.z / dir.z;
MousePos = camera.position.clone().add( dir.multiplyScalar( distance ) );
//console.log(MousePos)
rayCaster.setFromCamera(mouse, camera);
var intersects = rayCaster.intersectObjects(WORLD.getObjectByName('MWORLD').children, true);
if (intersects.length > 0)
// console.log(intersects[0].point);
PlrTarget = intersects[0].point
// Make the sphere follow the mouse
// mouseMesh.position.set(event.clientX, event.clientY, 0);
};
//Food Parent
FOOD = new THREE.Object3D();
FOOD.name = 'FOOD'
WORLD.add(FOOD)
var fid = -1
//Add Food Object should this be different?
function AddFood()
{
fid = fid + 1
var colors = ['red', 'blue', 'orange', 'yellow', 'pink', 'cyan'];
var geometry = new THREE.SphereGeometry( 0.05 * 1.5, 32 / 4, 32 / 4 );
var material = new THREE.MeshBasicMaterial( {color: colors[Math.floor(Math.random() * colors.length)]} );
var sphere = new THREE.Mesh( geometry, material );
var geometry = new THREE.BoxGeometry( 0.1 * 1.5, 10, 0.1 * 1.5);//BoxGeometry for collision detection spheres were lagging like crazy :(
var material = new THREE.MeshBasicMaterial( {color: 'red'} );
material.transparent = true
material.opacity = 0.2
var cube = new THREE.Mesh( geometry, material );
var foodrange = 15
cube.add(sphere);
cube.position.y = 0.25
cube.position.z = ((Math.random() * foodrange + 1) * (Math.round(Math.random()) * 2 - 1));
cube.position.x = ((Math.random() * foodrange + 1) * (Math.round(Math.random()) * 2 - 1));
cube.name = 'f' + fid
WORLD.getObjectByName('FOOD').add(cube)
}
//adds lots of food
function InitFood()
{
var i
for(i = 0; i < 150; i++)
{
AddFood();
}
}
InitFood();
//Eats the food working I think...
function ConsumeFood(fid)
{
FOOD.remove(FOOD.getObjectByName(fid))
plr.scale.x = plr.scale.x + 0.01
plr.scale.y = plr.scale.y + 0.01
plr.scale.z = plr.scale.z + 0.01
}
//Creates Player
function CreatePlr()
{
var geometry = new THREE.SphereGeometry( 0.5, 32, 32);//32 / 2
var material = new THREE.MeshBasicMaterial( {color: 0xffff00} );
var sphere = new THREE.Mesh( geometry, material );
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( {color: 'blue'} );
material.transparent = true
material.opacity = 0.2
var cube = new THREE.Mesh( geometry, material );
plr = new THREE.Object3D();
plr.add(sphere);
plr.add(cube);
scene.add(plr)
controls.target = plr.position
}
CreatePlr();
setTimeout(Eat, 1500)
//DETECT FOOD PLEASE HELP :(
//sometimes works ok you have to have the food fairly deep within the player to detect
//never eats as soon as you touch it
//sometimes totally fails to detect piece of food until you go over it multiple times
//sometimes random pieces of food are eaten even though they are not touched
function Eat() {
var originPoint = plr.position.clone();
for (var vertexIndex = 0; vertexIndex < plr.children[1].geometry.vertices.length; vertexIndex++)
{
var localVertex = plr.children[1].geometry.vertices[vertexIndex].clone();
var globalVertex = localVertex.applyMatrix4( plr.children[1].matrix );
var directionVector = globalVertex.sub( plr.position );
var ray = new THREE.Raycaster( originPoint, directionVector.clone().normalize() );
var collisionResults = ray.intersectObjects( FOOD.children );
if ( collisionResults.length > 0 && collisionResults[0].distance < directionVector.length() ) //if your touching the food or its in your player eat it
collisionResults.forEach(function(food){
console.log(food.object)//shows in console that food was detected and what piece of food it was
ConsumeFood(food.object.name)//consume food based on name (f1, f2, f3)
})
}
setTimeout(Eat, 50)
}
var Time = new THREE.Clock();
function PlrLerpSpeed(speed)
{
var distance = plr.position.distanceTo(PlrTarget);
var finalSpeed = (distance / speed);
return Time.deltaTime / finalSpeed
}
var animate = function () {
requestAnimationFrame( animate );
if(PlrTarget){
plr.lookAt(PlrTarget)
//plr.position.lerp(PlrTarget, PlrLerpSpeed(1));
plr.position.lerp(PlrTarget, 0.01 / (plr.position.distanceTo(PlrTarget) / 2));
}
controls.update();
//plr.position = MousePos
/*var speed = 5; // units a second, the speed we want
var currentPoint = new THREE.Vector3(); // we will re-use it
// this part is in a function of event listener of, for example, a button
currentPoint.copy(plr.position); // cube is the object to move
var distance = currentPoint.distanceTo(MousePos)
var duration = (distance / speed) * 1000; // in milliseconds
new TWEEN.Tween(plr.position)
.to(MousePos, duration) // destinationPoint is the object of destination
.start();
*/
renderer.render( scene, camera );
};
animate();
body { margin: 0; }
canvas { display: block; }
<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
Since your player and food objects are basically spheres, you can implement a super fast and accurate collision detection with bounding spheres. Try it like so:
//variables
var scene, renderer, rayCaster;
var WORLD, floor, FOOD, MWORLD;
var plr, camera, controls;
function debugupdate() {
window.plr = plr
window.floor = floor
window.WORLD = WORLD
window.camera = camera
window.controls = controls
window.scene = scene
window.FOOD = FOOD
}
setInterval(debugupdate, 1000)
//setup scene for gameplay
function InitGame() {
scene = new THREE.Scene();
renderer = new THREE.WebGLRenderer();
rayCaster = new THREE.Raycaster();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.y = 8;
camera.position.z = 8;
controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.autoRotate = false;
controls.enablePan = false;
//controls.update() must be called after any manual changes to the camera's transform
//camera.position.set( 0, 20, 100 );
//controls.update();
//MWORLD = stuff mouse can detect
MWORLD = new THREE.Object3D();
MWORLD.name = 'MWORLD'
var floorgeo = new THREE.BoxGeometry(30, 0.5, 30);
var floormat = new THREE.MeshBasicMaterial({
color: 0x00ff00
});
floor = new THREE.Mesh(floorgeo, floormat);
MWORLD.add(floor)
WORLD = new THREE.Object3D();
WORLD.add(MWORLD);
WORLD.name = 'WORLD';
scene.add(WORLD);
}
InitGame();
//Mouse Stuff
var MousePos;
var PlrTarget;
document.addEventListener('mousemove', MouseToWorld, false);
function MouseToWorld(event) {
event.preventDefault();
var mouse = {};
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
var vector = new THREE.Vector3(mouse.x, mouse.y, 0.5);
vector.unproject(camera);
var dir = vector.sub(camera.position).normalize();
var distance = -camera.position.z / dir.z;
MousePos = camera.position.clone().add(dir.multiplyScalar(distance));
//console.log(MousePos)
rayCaster.setFromCamera(mouse, camera);
var intersects = rayCaster.intersectObjects(WORLD.getObjectByName('MWORLD').children, true);
if (intersects.length > 0)
// console.log(intersects[0].point);
PlrTarget = intersects[0].point
// Make the sphere follow the mouse
// mouseMesh.position.set(event.clientX, event.clientY, 0);
};
//Food Parent
FOOD = new THREE.Object3D();
FOOD.name = 'FOOD'
WORLD.add(FOOD)
var fid = -1
//Add Food Object should this be different?
function AddFood() {
fid = fid + 1
var colors = ['red', 'blue', 'orange', 'yellow', 'pink', 'cyan'];
var geometry = new THREE.SphereGeometry(0.05 * 1.5, 32 / 4, 32 / 4);
var material = new THREE.MeshBasicMaterial({
color: colors[Math.floor(Math.random() * colors.length)]
});
var sphere = new THREE.Mesh(geometry, material);
var foodrange = 15
sphere.position.y = 0.25
sphere.position.z = ((Math.random() * foodrange + 1) * (Math.round(Math.random()) * 2 - 1));
sphere.position.x = ((Math.random() * foodrange + 1) * (Math.round(Math.random()) * 2 - 1));
sphere.name = 'f' + fid
WORLD.getObjectByName('FOOD').add(sphere)
}
//adds lots of food
function InitFood() {
var i
for (i = 0; i < 150; i++) {
AddFood();
}
}
InitFood();
//Eats the food working I think...
function ConsumeFood(fid) {
FOOD.remove(FOOD.getObjectByName(fid))
plr.scale.x = plr.scale.x + 0.01
plr.scale.y = plr.scale.y + 0.01
plr.scale.z = plr.scale.z + 0.01
}
//Creates Player
function CreatePlr() {
var geometry = new THREE.SphereGeometry(0.5, 32, 32); //32 / 2
var material = new THREE.MeshBasicMaterial({
color: 0xffff00
});
plr = new THREE.Mesh(geometry, material);
scene.add(plr)
controls.target = plr.position
}
CreatePlr();
setTimeout(Eat, 1500)
var spherePlayer = new THREE.Sphere();
var sphereFood = new THREE.Sphere();
//DETECT FOOD PLEASE HELP :(
//sometimes works ok you have to have the food fairly deep within the player to detect
//never eats as soon as you touch it
//sometimes totally fails to detect piece of food until you go over it multiple times
//sometimes random pieces of food are eaten even though they are not touched
function Eat() {
spherePlayer.copy( plr.geometry.boundingSphere ).applyMatrix4( plr.matrixWorld );
for ( var i = 0; i < FOOD.children.length; i ++ ) {
var food = FOOD.children[ i ];
sphereFood.copy( food.geometry.boundingSphere ).applyMatrix4( food.matrixWorld );
if ( spherePlayer.intersectsSphere( sphereFood ) === true ) {
ConsumeFood(food.name);
}
}
setTimeout(Eat, 50)
}
var Time = new THREE.Clock();
function PlrLerpSpeed(speed) {
var distance = plr.position.distanceTo(PlrTarget);
var finalSpeed = (distance / speed);
return Time.deltaTime / finalSpeed
}
var animate = function() {
requestAnimationFrame(animate);
if (PlrTarget) {
plr.lookAt(PlrTarget)
//plr.position.lerp(PlrTarget, PlrLerpSpeed(1));
plr.position.lerp(PlrTarget, 0.01 / (plr.position.distanceTo(PlrTarget) / 2));
}
controls.update();
//plr.position = MousePos
/*var speed = 5; // units a second, the speed we want
var currentPoint = new THREE.Vector3(); // we will re-use it
// this part is in a function of event listener of, for example, a button
currentPoint.copy(plr.position); // cube is the object to move
var distance = currentPoint.distanceTo(MousePos)
var duration = (distance / speed) * 1000; // in milliseconds
new TWEEN.Tween(plr.position)
.to(MousePos, duration) // destinationPoint is the object of destination
.start();
*/
renderer.render(scene, camera);
};
animate();
body { margin: 0; }
canvas { display: block; }
<script src="https://cdn.jsdelivr.net/npm/three#0.116.1/build/three.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three#0.116.1/examples/js/controls/OrbitControls.js"></script>
I have a basic scene in which I'm using each loops to add multiple meshes ( hundreds of simple cylinders ) to a group (for each line), and grouping the lines to cover the surfaces. The result is this:
This is the code to add these cylinders:
var base_material = new THREE.MeshPhongMaterial( {
color: 0x666666,
side: THREE.FrontSide,
});
var cylinderGeometry = new THREE.CylinderGeometry( 1, 1, 1, 4 );
var floor_geometry = new THREE.PlaneGeometry( 68, 10000, 10 );
var floor = new THREE.Mesh( floor_geometry, base_material );
floor.receiveShadow = true;
scene.add( floor );
floor.position.set(0,-15,-530);
floor.rotation.x = -Math.PI / 2;
// Add Floor Studs
for ( var i = 0; i < 15; i++ ) {
var lineGroup = new THREE.Group();
for ( var n = 0; n < 1000; n++ ) {
var cylinder = new THREE.Mesh( cylinderGeometry, base_material );
// cylinder.castShadow = true;
// cylinder.receiveShadow = true;
lineGroup.add( cylinder );
posZ = 0 - n*6;
cylinder.position.set(0,0, posZ);
}
scene.add( lineGroup );
posX = -28.4 + i*4.1;
lineGroup.position.set(posX,-14.7,0);
}
When I animate the camera to traverse through the scene the framerate is dire. Potential approaches I've come across include merging the geometry, possibly rendering out and loading in a single GLTF model with all of these cylinders, or duplicating them somehow. As you can see the geometry and material is created once and reused, however the mesh is recreated each time which I suspect is the culprit..
My question is, what is the most optimum of these approaches to do this, is there a standard best practice method?
Thanks in advance!
How can I tween the innerRadius attribute of THREE.RingGeometry() in three.js using tween.js. I don't want to scale the ring, I want to update geometry.
You will need to look at morphing the vertices, This website has great examples for different situations:
https://stemkoski.github.io/Three.js/Graphulus-Surface.html
https://stemkoski.github.io/Three.js/
Have look through the morphing samples aswell..
May be an answer if it can give idea to help.
1 - Give a name to the ring,
2 - Create a function to find, remove and redraw the ring
3 - and with Tween.js or setInterval use the function to animate.
Something like :
var rStart = 100;
var rStep = 10;
var ep = 50;
//create circle
var geometry = new THREE.RingGeometry( rStart, rStart + ep, 32,3,0, Math.PI * 2 );
var material = new THREE.MeshBasicMaterial( { color: 0xff0000, side: THREE.DoubleSide } );
var ring = new THREE.Mesh( geometry, material );
ring.name = 'the_ring';
scene.add( ring );
// function to find ring, remove and redraw
function grow(i,rStart,rStep,ep){
var ringToRemove = 'the_ring';
var ringToRemoveSelected = scene.getObjectByName(ringToRemove);
scene.remove(ringToRemoveSelected);
var newRadius = rStart + ( rStep * i);
var geometry = new THREE.RingGeometry( newRadius , newRadius + ep , 32,3,0, Math.PI * 2);
var material = new THREE.MeshBasicMaterial( { color: 0xff0000, side: THREE.DoubleSide } );
var ring = new THREE.Mesh( geometry, material );
ring.name = 'the_ring';
scene.add( ring );
}
//and animate
var i = 0;
setInterval(function () {
i++;
if(i < 100){
grow(i,rStart,rStep,ep);
}
}, 100);