We Keep Coding

Add Thickness to faces

i create walls by creating faces with some points i have.
The creation of the walls does work without an issue.
Now i want to add some thickness to my walls but iam not quite sure how to.
here is my code for creating my walls:
makeWall(start, end) {
let v1 = this.helpers.toVec3(start); //0
let v2 = this.helpers.toVec3(end); //1
let v3 = v2.clone(); //2
v3.y = this.wallHeight;
let v4 = v1.clone(); //3
v4.y = this.wallHeight;
let points = [ v1.clone(), v2.clone(), v3.clone(), v4.clone() ];
console.log("Points", points )
let mesh:THREE.Mesh;
let geometry = new THREE.Geometry();
let label: THREE.Sprite;
let walldirection;
geometry.vertices = [v1, v2, v3, v4];
geometry.faces.push(new THREE.Face3(0, 1, 2));
geometry.faces.push(new THREE.Face3(0, 2, 3));
geometry = this.helpers.assignUVs(geometry);
mesh = new THREE.Mesh(geometry, this.wallMaterial);
...
}
at the end the walls form a closed Room together.
For Example the points are:
(4) [p, p, p, p]
0: p {x: 200, y: 0, z: -500}
1: p {x: 200, y: 0, z: 300}
2: p {x: 200, y: 277, z: 300}
3: p {x: 200, y: 277, z: -500}
length: 4
thanks for looking into it
Update//
i think iam on the right track now.
i added 4 more points with a offset and created faces for them but there is still something wrong. Probably the Faces are wrong ?
let v1ex = v1.clone(); // 4
v1ex.x = v1ex.x - 10;
let v2ex = v2.clone(); // 5
v2ex.x = v1ex.x + 10;
let v3ex = v3.clone(); // 6
v3ex.x = v3ex.x + 10;
let v4ex = v4.clone(); // 7
v4ex.x = v4ex.x - 10;
let points = [ v1.clone(), v2.clone(), v3.clone(), v4.clone() , v1ex , v2ex , v3ex , v4ex ];
let mesh:THREE.Mesh;
let geometry = new THREE.Geometry( );
let label: THREE.Sprite;
let walldirection;
geometry.vertices = [v1, v2, v3, v4 , v1ex , v2ex , v3ex , v4ex];
geometry.faces.push(new THREE.Face3( 0 , 1 , 2 ) );
geometry.faces.push(new THREE.Face3( 0 , 2 , 3 ) );
geometry.faces.push(new THREE.Face3( 4 , 5 , 6 ) );
geometry.faces.push(new THREE.Face3( 4 , 6 , 7 ) );
geometry.faces.push(new THREE.Face3( 7 , 3 , 6 ) );
geometry.faces.push(new THREE.Face3( 7 , 3 , 2 ) );
geometry.faces.push(new THREE.Face3( 0 , 5 , 1 ) );
geometry.faces.push(new THREE.Face3( 0 , 5 , 4 ) );

Just a concept of how you can do it, using a mesh with thin THREE.BoxGeometry():
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(2, 3, 5).setLength(10);
camera.lookAt(scene.position);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var controls = new THREE.OrbitControls(camera, renderer.domElement);
scene.add(new THREE.GridHelper(10, 10));
var pointStart = new THREE.Vector3(-1, 0, 3);
var pointEnd = new THREE.Vector3(-1, 0, -3);
var height = 4;
var thickness = 0.1;
var boxW = pointEnd.clone().sub(pointStart).length();
var boxH = height;
var boxD = thickness;
var boxGeometry = new THREE.BoxGeometry(boxW, boxH, boxD);
boxGeometry.translate(boxW * 0.5, boxH * 0.5, 0);
boxGeometry.rotateY(-Math.PI * 0.5);
var wall = new THREE.Mesh(boxGeometry, new THREE.MeshBasicMaterial({
color: "red",
wireframe: true
}));
wall.position.copy(pointStart);
wall.lookAt(pointEnd);
scene.add(wall);
addPoint(pointStart, "green");
addPoint(pointEnd, "yellow");
function addPoint(position, color) {
let p = new THREE.Mesh(new THREE.SphereGeometry(0.125, 4, 2), new THREE.MeshBasicMaterial({
color: color
}));
p.position.copy(position);
scene.add(p);
}
render();
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
}
body {
overflow: hidden;
margin: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/92/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

Raycaster with Three.js and whitestormJS

I'm having an issue with Raycasting with Three.js and WhitestormJS.
Maybe I didn't understood well some of the underlying principle of this particular element.
What I'm trying to do is syncing the direction of the raycaster with my camera.
So, once it intersect an element, this element will be added to the intersect array.
The problem is that my "intersect" array stay empty even if I move my camera in the direction of an element.
On codepen : https://codepen.io/paulbonneau/pen/zdVeJx?editors=1111
My code :
const app = new WHS.App([
new WHS.ElementModule({
container: document.getElementById('app')
}),
new WHS.SceneModule(),
new WHS.DefineModule('camera', new WHS.PerspectiveCamera({
position: new THREE.Vector3(0, 6, 18),
far: 10000
})),
new WHS.CameraModule({
position: {
y: 2,
z: 2,
x: 1,
},
}),
new WHS.RenderingModule({
bgColor: 0x162129,
renderer: {
antialias: true,
shadowmap: {
type: THREE.PCFSoftShadowMap
}
}
}, {shadow: true}),
new WHS.OrbitControlsModule(
),
new WHS.ResizeModule()
]);
app.modules[5].controls.enableZoom = false
var camera = app.get('camera');
crosshair = new THREE.Vector2(0,0);
// Rendu de la skybox càd l'environnement dans lequel se déroule le jeu
var path = "img/skybox/";
var format = '.jpg';
var urls = [
'./skybox/EH_0.front.jpg',
'./skybox/EH_0.back.jpg' ,
'./skybox/EH_0.top.jpg',
'./skybox/EH_0.bottom.jpg',
'./skybox/EH_0.left.jpg',
'./skybox/EH_0.right.jpg',
];
var reflectionCube = THREE.ImageUtils.loadTextureCube(urls, null);
reflectionCube.format = THREE.RGBFormat;
var shader = THREE.ShaderLib[ "cube" ];
shader.uniforms[ "tCube" ].value = reflectionCube;
var material = new THREE.ShaderMaterial( {
fragmentShader: shader.fragmentShader,
vertexShader: shader.vertexShader,
uniforms: shader.uniforms,
depthWrite: false,
side: THREE.BackSide
});
//End test
const world = new WHS.Box({ // Create box to contain the 3D space where the game happen
geometry: {
width: 100,
height: 100,
depth: 100
},
material: material
});
world.addTo(app);
var material = new THREE.MeshBasicMaterial( { color: 0xffffff, envMap: reflectionCube } );
var points = [];
for ( var deg = 0; deg <= 180; deg += 6 ) {
var rad = Math.PI * deg / 180;
var point = new THREE.Vector2( ( 0.72 + .08 * Math.cos( rad ) ) * Math.sin( rad ), - Math.cos( rad ) ); // the "egg equation"
//console.log( point ); // x-coord should be greater than zero to avoid degenerate triangles; it is not in this formula.
points.push( point );
}
const sphere = new WHS.Sphere({
geometry: {
radius: 100
},
material: new THREE.MeshBasicMaterial({
color: 0xffffff
}),
position: {
y: 1,
x: 1,
z: 0
}
});
for (var i = 0; i < 20; i++) {
egg_size = Math.random() * 10-2;
egg = new WHS.Lathe({
geometry: {
points: points
},
material: material,
position: {
y: Math.random() * 100 - 50,
x: Math.random() * 100 - 50 ,
z: Math.random() * 100 - 50
},
rotation: {
x: Math.random() * Math.PI/2,
y: Math.random() * Math.PI/2,
z: Math.random() * Math.PI/2
},
scale:{
x : egg_size,
z : egg_size,
y : egg_size
}
});
egg.addTo(sphere);
}
sphere.addTo(world);
raycaster = new THREE.Raycaster(camera, camera.position);
var intersects = raycaster.intersectObjects( app.children );
new WHS.Loop(() => {
raycaster.setFromCamera( camera.position , camera );
sphere.rotation.x += 0.01;
sphere.rotation.y += 0.01;
for (var i = 0; i < sphere.children.length-1; i++) {
sphere.children[i].rotation.x += 0.05;
sphere.children[i].rotation.y += 0.05;
sphere.children[i].rotation.z += 0.05;
}
}).start(app);
// Start the app
app.start();

You're constructing the raycaster in the wrong way (as of r87).
raycaster = new THREE.Raycaster(camera, camera.position);
As shown in the documentation, the raycaster is constructed like so:
var raycaster = new THREE.Raycaster();
The rest of the code looks correct, so I assume that is the problem.
Here's a working example

Three.js - Mesh with fewer morph targets be affected by one with more morph targets?

As title, it's so weird that the Object3D with fewer morph targets will be affected by another one with more morph targets.
I duplicated the error here by adding a cube with 4 morph targets into Three.js official example webgl_morphtargets. The original example only has one cube with 8 morph targets.
In the example, top 8 input bars change the morphTargetInfluences of gray cube, and bottom 4 bars change the blue cube. Two cubes have different geometries and materials, but adjusting the top 8 input bars affects the blue cube.
The part of morphTargets codes were pasted below. Have been troubled by this for days and couldn't figure it out. Any guidance will be much appreciated, thanks!
// first cube
var geometry = new THREE.BoxGeometry( 100, 100, 100 );
var material = new THREE.MeshLambertMaterial( { color: 0xffffff, morphTargets: true } );
// construct 8 blend shapes
for ( var i = 0; i < geometry.vertices.length; i ++ ) {
var vertices = [];
for ( var v = 0; v < geometry.vertices.length; v ++ ) {
vertices.push( geometry.vertices[ v ].clone() );
if ( v === i ) {
vertices[ vertices.length - 1 ].x *= 2;
vertices[ vertices.length - 1 ].y *= 2;
vertices[ vertices.length - 1 ].z *= 2;
}
}
geometry.morphTargets.push( { name: "target" + i, vertices: vertices } );
}
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
// second cube
var geometry2 = new THREE.BoxGeometry( 100, 100, 100 );
var material2 = new THREE.MeshLambertMaterial( { color: 0x00ffff, morphTargets: true } );
// construct 4 blend shapes
for ( var i = 0; i < geometry2.vertices.length/2; i ++ ) {
var vertices = [];
for ( var v = 0; v < geometry2.vertices.length; v ++ ) {
vertices.push( geometry2.vertices[ v ].clone() );
if ( v === i ) {
vertices[ vertices.length - 1 ].x *= 2;
vertices[ vertices.length - 1 ].y *= 2;
vertices[ vertices.length - 1 ].z *= 2;
}
}
geometry2.morphTargets.push( { name: "target" + i, vertices: vertices } );
}
geometry2.computeMorphNormals();
mesh2 = new THREE.Mesh( geometry2, material2 );
mesh2.position.x = 200;
scene.add( mesh2 );

It's a bug and it's solved in the new library now.

Three.js shape from random points

I have a N number of random points (in this case 20), with a X,Y and Z constrains.
How can I create ANY (preferably closed) shape (using Three.js library) , given and starting only from N random points.
There are probably many variants, please share yours.
var program = new Program(reset,step)
program.add('g',false)
function reset() {
scene.clear()
scene.add(new THREE.GridHelper(100,1))
}
function step() {
}
program.startup()
var numpoints = 20;
var dots = []; //If you want to use for other task
for (var i = 0 ; i < numpoints ; i++){
var x = Math.random() * (80 - 1) + 1 //Math.random() * (max - min) + min
var y = Math.random() * (80 - 1) + 1
var z = Math.random() * (80 - 1) + 1
var dotGeometry = new THREE.Geometry();
dots.push(dotGeometry);
dotGeometry.vertices.push(new THREE.Vector3( x, y, z));
var dotMaterial = new THREE.PointsMaterial( { size: 3, sizeAttenuation: false, color: 0xFF0000 } );
var dot = new THREE.Points( dotGeometry, dotMaterial );
scene.add(dot);
}
Triangulation, Voronoi, I don't care, just show me ANY ideas you have, will help me learn a lot!

You can create a polyhedron which is the convex hull of a set of 3D points by using a pattern like so:
var points = [
new THREE.Vector3( 100, 0, 0 ),
new THREE.Vector3( 0, 100, 0 ),
...
new THREE.Vector3( 0, 0, 100 )
];
var geometry = new THREE.ConvexGeometry( points );
var material = new THREE.MeshPhongMaterial( {
color: 0xff0000,
shading: THREE.FlatShading
} );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
You must include the following in your project
<script src="/examples/js/geometries/ConvexGeometry.js"></script>
three.js r.78

THREE.js - position particles evenly on objects faces rather than verticies

Currently I've managed to create a particleCloud with the particles appearing at each vertex of an object I've imported. However I'm trying to get the particles to firstly position on the flat faces of the object rather than the points between them and secondly evenly distribute particles on those faces.
Basically I'm trying to get my 3d object made out of particles
This is what I have so far:
var loader = new THREE.JSONLoader();
loader.load('./resources/model.json', function (geometry, materials) {
var material = new THREE.MeshFaceMaterial(materials);
var model = new THREE.Mesh(geometry, material);
var particleCount = geometry.vertices.length,
particles = new THREE.Geometry(),
pMaterial = new THREE.PointCloudMaterial({
color: 0xFFFFFF,
size: 1
});
for (var p = 0; p < particleCount; p ++) {
particle = model.geometry.vertices[p];
particles.vertices.push(particle);
}
particleSystem = new THREE.PointCloud(particles, pMaterial);
particleSystem.position.set(0, -100, 0)
particleSystem.scale.set(100,100,100)
scene.add(particleSystem);
});
EDIT - 1
I've attached an image to try describe what i currently have and what i'm trying to achieve. Its using the front on a cube as an example. My object will have more sides to it.

EDIT: The previous answer was outdated.
You can now use MeshSurfaceSampler to generate random samples on the surface of a mesh.
The MeshSurfaceSampler.js file is located in the examples/jsm/math directory.
three.js r.128

You have to set the position of each particle individually to build up your 3d object out of particles. Here's an example that makes a cube:
var particles = 500000;
var geometry = new THREE.BufferGeometry();
var positions = new Float32Array( particles * 3 );
var colors = new Float32Array( particles * 3 );
var color = new THREE.Color();
var n = 1000, n2 = n / 2; // particles spread in the cube
for ( var i = 0; i < positions.length; i += 3 ) {
// positions
var x = Math.random() * n - n2;
var y = Math.random() * n - n2;
var z = Math.random() * n - n2;
positions[ i ] = x;
positions[ i + 1 ] = y;
positions[ i + 2 ] = z;
// colors
var vx = ( x / n ) + 0.5;
var vy = ( y / n ) + 0.5;
var vz = ( z / n ) + 0.5;
color.setRGB( vx, vy, vz );
colors[ i ] = color.r;
colors[ i + 1 ] = color.g;
colors[ i + 2 ] = color.b;
}
geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 3 ) );
geometry.computeBoundingSphere();
//
var material = new THREE.PointCloudMaterial( { size: 15, vertexColors: THREE.VertexColors } );
particleSystem = new THREE.PointCloud( geometry, material );
scene.add( particleSystem );
source: this threejs example