We Keep Coding

threejs transparent material blending

Blending multiple transparent meshes causes strange behavior: only the first mesh is drawn, the inner meshes are hidden at the intersection. This only happens within a certain camera angle range.
Can is be fixed? Why does this only happen at certain angles?
Tested with r142 and r143. Browser Chrome 104.0.5112.81.
Partially expected behaviour:
Strange blending:
Expected behaviour:
canvas {
position: absolute;
top: 0;
left: 0;
}
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three#0.142.0/build/three.module.js",
"OrbitControls": "https://unpkg.com/three#0.142.0/examples/jsm/controls/OrbitControls.js"
}
}
</script>
<script type="module">
import * as THREE from "three";
import { OrbitControls } from "OrbitControls";
/* -- */
const renderer = new THREE.WebGLRenderer();
document.body.appendChild(renderer.domElement);
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x111111);
const ambientLight = new THREE.AmbientLight(0xffffff);
scene.add(ambientLight);
const camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
camera.position.set(0, 0, 5);
const controls = new OrbitControls(camera, renderer.domElement);
/* -- */
const length = 7;
const points = [
new THREE.Vector3(0, -length / 2, 0),
new THREE.Vector3(0, length / 2, 0)
];
const curve = new THREE.CatmullRomCurve3(points);
const createMeshOnScene = (scene, geometry, material, position) => {
const mesh = new THREE.Mesh(geometry, material);
mesh.position.copy(position);
scene.add(mesh);
return mesh;
};
const transparentMaterial = (color) => {
return new THREE.MeshStandardMaterial({
color: color,
side: THREE.DoubleSide,
transparent: true,
opacity: 0.6,
metalness: 0,
roughness: 1
});
};
const opaqueMaterial = new THREE.MeshStandardMaterial({
color: 0xffffff,
metalness: 0,
roughness: 1
});
createMeshOnScene(
scene,
new THREE.TubeGeometry(curve, 2, 0.2, 16),
opaqueMaterial,
new THREE.Vector3(0, -0.4, 0)
);
createMeshOnScene(
scene,
new THREE.ConeGeometry(2, 2, 4, 1, true, 0, Math.PI * 1.6),
transparentMaterial(0xaa0000),
new THREE.Vector3(0, 0, 0)
);
createMeshOnScene(
scene,
new THREE.ConeGeometry(2, 2, 4, 1, true, 0, Math.PI * 1.6),
transparentMaterial(0xaaaa00),
new THREE.Vector3(0, -0.3, 0)
);
createMeshOnScene(
scene,
new THREE.ConeGeometry(2, 2, 4, 1, true, 0, Math.PI * 1.6),
transparentMaterial(0x00aa00),
new THREE.Vector3(0, -0.6, 0)
);
createMeshOnScene(
scene,
new THREE.ConeGeometry(2, 2, 4, 1, true, 0, Math.PI * 1.6),
transparentMaterial(0x00aaaa),
new THREE.Vector3(0, -0.9, 0)
);
/* -- */
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
/* -- */
window.addEventListener("resize", resize);
function resize() {
let width = window.innerWidth;
let height = window.innerHeight;
camera.aspect = width / height;
camera.updateProjectionMatrix();
renderer.setSize(width, height);
}
resize();
</script>

Remove widthSegments and heightSegments in PlaneGeometry threejs

I am trying to remove the widthSegments and heightSegments.
If i change this
var tergeo= new THREE.PlaneGeometry(100, 100, 1, 1);
to
var tergeo= new THREE.PlaneGeometry(100, 100, 0, 0);
It does not work
How can i remove widthSegments and heightSegments in this jsFiddle ?

Here is an option with an indexed buffer geometry:
body{
overflow: hidden;
margin: 0;
}
<script type="module">
import * as THREE from "https://cdn.skypack.dev/three#0.136.0";
let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 1000);
camera.position.set(0, 0, 10);
let renderer = new THREE.WebGLRenderer();
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);
let g = QuadGeometry(THREE.MathUtils.randInt(5, 10), THREE.MathUtils.randInt(5, 10));
let m = new THREE.LineBasicMaterial({color: "yellow"});
let quad = new THREE.Line(g, m);
scene.add(quad);
function QuadGeometry(w, h){
let pts = [
[0.5, 0.5],
[-0.5, 0.5],
[-0.5, -0.5],
[0.5, -0.5]
].map(p => {return new THREE.Vector2(p[0], p[1])});
let g = new THREE.BufferGeometry().setFromPoints(pts);
g.setIndex([0, 1, 2, 3, 0]);
g.scale(w, h, 1);
return g;
}
renderer.setAnimationLoop(() => {
renderer.render(scene, camera);
});
</script>

Replace plane in space with ThreeJS

I want to replace a plane in ThreeJS to a specific Z value.
I create a shapeBufferGeometry with shape which contains Vector3s containing the x y and z value.
here is my code and what I obtain. I want the white plane to match the position of aqua lines.
The code bellow allow me to render the scene with my plane the different points in it and the vertices around it.
I know that I can use translate to move the plane but I don't know how to properly use it. And how can I know on which axis should a translate my geometry depending on my vector values.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My first three.js app</title>
<style>
body { margin: 0; }
</style>
</head>
<body>
<canvas id="c" width="800" height="500"></canvas>
<script>
</script>
<script type="module">
import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r127/build/three.module.js';
import {OrbitControls} from 'https://threejsfundamentals.org/threejs/resources/threejs/r127/examples/jsm/controls/OrbitControls.js';
import {GUI} from 'https://threejsfundamentals.org/threejs/../3rdparty/dat.gui.module.js';
import { ConvexGeometry } from 'https://threejsfundamentals.org/threejs/resources/threejs/r127/examples/jsm/geometries/ConvexGeometry.js'
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 2000);
camera.position.set(0, 20, 40);
camera.lookAt(scene.position);
var renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var controls = new OrbitControls(camera, renderer.domElement);
controls.target = new THREE.Vector3(10, 0, 10);
controls.update();
var grid = new THREE.GridHelper(50, 50, 0x808080, 0x202020); // xy-grid
grid.geometry.rotateX(Math.PI * 0.5);
scene.add(grid);
var points = [ // all of them are on the xz-plane
// new THREE.Vector3(5, 0, 5),
// new THREE.Vector3(25, 0, 5),
// new THREE.Vector3(25, 0, 15),
// new THREE.Vector3(15, 0, 15),
// new THREE.Vector3(15, 0, 25),
// new THREE.Vector3(5, 0, 25),
// new THREE.Vector3(5, 0, 5)
new THREE.Vector3(199.2353333,7.6714966, 32),
new THREE.Vector3(199.0974316,276.6667291, 32),
new THREE.Vector3(75.2343077,276.6715748, 32),
new THREE.Vector3(75.2343077,232.6714966, 32),
new THREE.Vector3(101.1792999,232.6714966, 32),
new THREE.Vector3(101.1792999,194.6807462, 32),
new THREE.Vector3(75.2343077,194.6714966, 32),
new THREE.Vector3(75.2343077,7.6714966, 32),
new THREE.Vector3(199.2353333,7.6714966, 32)
]
var geom = new THREE.BufferGeometry().setFromPoints(points);
var pointsObj = new THREE.Points(geom, new THREE.PointsMaterial({
color: "red"
}));
scene.add(pointsObj);
var line = new THREE.LineLoop(geom, new THREE.LineBasicMaterial({
color: "aqua"
}));
scene.add(line);
// normals
var normal = new THREE.Vector3(0, 0, 1); // I already know the normal of xz-plane ;)
scene.add(new THREE.ArrowHelper(normal, new THREE.Vector3(10, 0, 10), 5, 0xffff00)); //yellow
var normalZ = new THREE.Vector3(0, 0, 1); // base normal of xy-plane
scene.add(new THREE.ArrowHelper(normalZ, scene.position, 5,'#FF001F' )); // aqua
// 1 quaternions
var quaternion = new THREE.Quaternion().setFromUnitVectors(normal, normalZ);
var quaternionBack = new THREE.Quaternion().setFromUnitVectors(normalZ, normal);
// 2 make it parallel to xy-plane
points.forEach(p => {
p.applyQuaternion(quaternion)
});
// 3 create shape and shapeGeometry
var shape = new THREE.Shape(points);
var shapeGeom = new THREE.ShapeBufferGeometry(shape);
shapeGeom.computeFaceNormals();
shapeGeom.computeVertexNormals();
// 4 put our points back to their origins
points.forEach(p => {
p.applyQuaternion(quaternionBack)
});
// 5 assign points to .vertices
shapeGeom.vertices = points;
var shapeMesh = new THREE.Mesh(shapeGeom, new THREE.MeshBasicMaterial({
color: '#FF001F ',
side: THREE.DoubleSide
}));
scene.add(shapeMesh);
// scene.add( new THREE.FaceNormalsHelper( shapeMesh ) );
render();
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
}
</script>
</body>
</html>
the result I have:

No need to add the last point to close the contour.
And your step // 5 assign points to .vertices needs the check for CCW for points via ShapeUtils. Assigning an array of Vector3 to .vertices of a buffer geometry is useless, as that type of geometry doesn't have that property, so you're working with buffer attributes. Calling of shapeGeom.computeFaceNormals(); is also useless.
body{
overflow: hidden;
margin: 0;
}
<script type="module">
import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r127/build/three.module.js';
import {OrbitControls} from 'https://threejsfundamentals.org/threejs/resources/threejs/r127/examples/jsm/controls/OrbitControls.js';
import {GUI} from 'https://threejsfundamentals.org/threejs/../3rdparty/dat.gui.module.js';
import { ConvexGeometry } from 'https://threejsfundamentals.org/threejs/resources/threejs/r127/examples/jsm/geometries/ConvexGeometry.js'
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 2000);
camera.position.set(0, 20, 40).setLength(500).add(new THREE.Vector3(150, 150, 0));
camera.lookAt(150, 150, 0);
var renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var controls = new OrbitControls(camera, renderer.domElement);
controls.target = new THREE.Vector3(10, 0, 10);
controls.update();
var grid = new THREE.GridHelper(50, 50, 0x808080, 0x202020); // xy-grid
grid.geometry.rotateX(Math.PI * 0.5);
scene.add(grid);
var points = [ // all of them are on the xz-plane
// new THREE.Vector3(5, 0, 5),
// new THREE.Vector3(25, 0, 5),
// new THREE.Vector3(25, 0, 15),
// new THREE.Vector3(15, 0, 15),
// new THREE.Vector3(15, 0, 25),
// new THREE.Vector3(5, 0, 25),
// new THREE.Vector3(5, 0, 5)
new THREE.Vector3(199.2353333,7.6714966, 32),
new THREE.Vector3(199.0974316,276.6667291, 32),
new THREE.Vector3(75.2343077,276.6715748, 32),
new THREE.Vector3(75.2343077,232.6714966, 32),
new THREE.Vector3(101.1792999,232.6714966, 32),
new THREE.Vector3(101.1792999,194.6807462, 32),
new THREE.Vector3(75.2343077,194.6714966, 32),
new THREE.Vector3(75.2343077,7.6714966, 32)/*,
new THREE.Vector3(199.2353333,7.6714966, 32)*/
]
var geom = new THREE.BufferGeometry().setFromPoints(points);
var pointsObj = new THREE.Points(geom, new THREE.PointsMaterial({
color: "red"
}));
scene.add(pointsObj);
var line = new THREE.LineLoop(geom, new THREE.LineBasicMaterial({
color: "aqua"
}));
scene.add(line);
// normals
var normal = new THREE.Vector3(0, 0, 1); // I already know the normal of xz-plane ;)
scene.add(new THREE.ArrowHelper(normal, new THREE.Vector3(10, 0, 10), 5, 0xffff00)); //yellow
var normalZ = new THREE.Vector3(0, 0, 1); // base normal of xy-plane
scene.add(new THREE.ArrowHelper(normalZ, scene.position, 5,'#FF001F' )); // aqua
// 1 quaternions
var quaternion = new THREE.Quaternion().setFromUnitVectors(normal, normalZ);
var quaternionBack = new THREE.Quaternion().setFromUnitVectors(normalZ, normal);
// 2 make it parallel to xy-plane
points.forEach(p => {
p.applyQuaternion(quaternion)
});
// 3 create shape and shapeGeometry
var shape = new THREE.Shape(points);
var shapeGeom = new THREE.ShapeBufferGeometry(shape);
shapeGeom.computeFaceNormals();
shapeGeom.computeVertexNormals();
// 4 put our points back to their origins
points.forEach(p => {
p.applyQuaternion(quaternionBack)
});
// 5 assign points to .vertices
if (!THREE.ShapeUtils.isClockWise(points)) points.reverse(); // CCW order
points.forEach((p, idx) => {
shapeGeom.attributes.position.setXYZ(idx, p.x, p.y, p.z);
});
console.log(points.length, shapeGeom.attributes.position.count);
var shapeMesh = new THREE.Mesh(shapeGeom, new THREE.MeshBasicMaterial({
color: "#FF001F",
//side: THREE.DoubleSide
}));
scene.add(shapeMesh);
// scene.add( new THREE.FaceNormalsHelper( shapeMesh ) );
render();
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
}
</script>

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>

Add Dots to Vertices in Three.js

I have a wireframe sphere, and I'd like to add dots to the vertices. Something similar to this:
.:
Here's all my js:
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer( { alpha: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var geometry = new THREE.SphereGeometry( 3.25, 32, 20 );
var material = new THREE.MeshLambertMaterial( { color: 0x43CC4C, wireframe: true } );
var sphere = new THREE.Mesh( geometry, material );
scene.add( sphere );
var pointLight = new THREE.PointLight(0xFFFFFF);
pointLight.position.x = 80;
pointLight.position.y = 80;
pointLight.position.z = 130;
scene.add(pointLight);
camera.position.z = 5;
function render() {
renderer.render( scene, camera );
}
render();
[codepen here]
How do I add a dot to each vertex?

Here's an example how you can achieve similar results.
I've added an extra geometry type called IcosahedronGeometry and I'm using it's vertices to create points, for the lines I'm using MeshPhongMaterial with wireframe set to true.
You can change the point's size or replace them with shapes/textures.
// Extra geometry
THREE.IcosahedronGeometry = function(radius, detail) {
var t = (1 + Math.sqrt(5)) / 2;
var vertices = [-1, t, 0, 1, t, 0, -1, -t, 0, 1, -t, 0,
0, -1, t, 0, 1, t, 0, -1, -t, 0, 1, -t,
t, 0, -1, t, 0, 1, -t, 0, -1, -t, 0, 1
];
var indices = [
0, 11, 5, 0, 5, 1, 0, 1, 7, 0, 7, 10, 0, 10, 11,
1, 5, 9, 5, 11, 4, 11, 10, 2, 10, 7, 6, 7, 1, 8,
3, 9, 4, 3, 4, 2, 3, 2, 6, 3, 6, 8, 3, 8, 9,
4, 9, 5, 2, 4, 11, 6, 2, 10, 8, 6, 7, 9, 8, 1
];
THREE.PolyhedronGeometry.call(this, vertices, indices, radius, detail);
this.type = 'IcosahedronGeometry';
this.parameters = {
radius: radius,
detail: detail
};
};
THREE.IcosahedronGeometry.prototype = Object.create(THREE.PolyhedronGeometry.prototype);
THREE.IcosahedronGeometry.prototype.constructor = THREE.IcosahedronGeometry;
// Scene
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer({
antialias: 1
});
renderer.setClearColor(0xf7f7f7);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
scene.fog = new THREE.Fog(0xd4d4d4, 8, 20);
// Create vertex points
var mesh = new THREE.IcosahedronGeometry(10, 1); // radius, detail
var vertices = mesh.vertices;
var positions = new Float32Array(vertices.length * 3);
for (var i = 0, l = vertices.length; i < l; i++) {
vertices[i].toArray(positions, i * 3);
}
var geometry = new THREE.BufferGeometry();
geometry.addAttribute('position', new THREE.BufferAttribute(positions, 3));
var material = new THREE.PointsMaterial({
size: 0.4,
vertexColors: THREE.VertexColors,
color: 0x252525
});
var points = new THREE.Points(geometry, material);
var object = new THREE.Object3D();
object.add(points);
object.add(new THREE.Mesh(
mesh,
new THREE.MeshPhongMaterial({
color: 0x616161,
emissive: 0xa1a1a1,
wireframe: true,
fog: 1
})
));
scene.add(object);
camera.position.z = 20;
var render = function() {
requestAnimationFrame(render);
object.rotation.x += 0.01;
object.rotation.y += 0.01;
renderer.render(scene, camera);
};
render();
body {
margin: 0;
}
canvas {
width: 100%;
height: 100%
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/threejs/r76/three.min.js"></script>