So I have a turquoise diamond, I would like to add a directional camera from the camera. This will be a bg in a WordPress section (also don’t know how to do.
So my issue here is I have created a wireframe here that is over the diamond, but I am trying to get 3d spheres to stick onto every intersection of lines, I don’t know why it never seems to work, I have read the wireframe mesh page of three.js but nothing moves. what am I doing wrong?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Amba</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<!-- <link type="text/css" rel="stylesheet" href="main.css"> -->
<style>
body {
margin: 0;
background-color: #000;
color: #fff;
font-family: Monospace;
font-size: 13px;
line-height: 24px;
overscroll-behavior: none;
}
a {
color: #ff0;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
button {
cursor: pointer;
text-transform: uppercase;
}
#info {
position: absolute;
top: 0px;
width: 100%;
padding: 10px;
box-sizing: border-box;
text-align: center;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
pointer-events: none;
z-index: 1; /* TODO Solve this in HTML */
}
a, button, input, select {
pointer-events: auto;
}
.lil-gui {
z-index: 2 !important; /* TODO Solve this in HTML */
}
@media all and ( max-width: 640px ) {
.lil-gui.root {
right: auto;
top: auto;
max-height: 50%;
max-width: 80%;
bottom: 0;
left: 0;
}
}
#overlay {
position: absolute;
font-size: 16px;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background: rgba(0,0,0,0.7);
}
#overlay button {
background: transparent;
border: 0;
border: 1px solid rgb(255, 255, 255);
border-radius: 4px;
color: #ffffff;
padding: 12px 18px;
text-transform: uppercase;
cursor: pointer;
}
#notSupported {
width: 50%;
margin: auto;
background-color: #f00;
margin-top: 20px;
padding: 10px;
}
</style>
</head>
<body>
<script type="importmap">
{
"imports": {
"three": "../build/three.module.js",
"three/addons/": "./jsm/",
"three-subdivide": "https://unpkg.com/[email protected]/build/index.module.js"
}
}
</script>
<script type="module">
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
let camera, scene, renderer, controls;
let diamond, wireframe, circle1, circle2;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 100);
camera.position.set(0, 0, 10);
scene = new THREE.Scene();
// Directional light
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(0, 1, 1);
scene.add(directionalLight);
// Directional light
const directionalLight2 = new THREE.DirectionalLight(0x008080, 1);
directionalLight2.position.set(-1, 0, 2);
scene.add(directionalLight2);
// Create diamond geometry
const diamondGeometry = new THREE.IcosahedronGeometry(3.5, 0);
const diamondMaterial = new THREE.MeshPhongMaterial({ color: 0x008080, specular: 0x00ff00, shininess: 50 });
diamond = new THREE.Mesh(diamondGeometry, diamondMaterial);
scene.add(diamond);
// // Create wireframe geometry
// const wireframeGeometry = new THREE.EdgesGeometry(diamondGeometry);
// const wireframeMaterial = new THREE.LineBasicMaterial({ color: 0xffffff });
// wireframe = new THREE.LineSegments(wireframeGeometry, wireframeMaterial, wireframeLinejoin );
// wireframe.scale.set(1.5, 1.5, 1.5); // Double the size
// scene.add(wireframe);
// Create wireframe geometry
const wireframeGeometry = new THREE.EdgesGeometry(diamondGeometry);
const wireframeMaterial = new THREE.LineBasicMaterial({ color: 0xffffff });
// Create wireframe using LineSegments
wireframe = new THREE.LineSegments(wireframeGeometry, wireframeMaterial);
wireframe.scale.set(1.5, 1.5, 1.5); // Double the size
// Add spheres at the end of each line segment
const vertices = diamondGeometry.attributes.position.array;
const numVertices = vertices.length / 3;
const sphereGeometry = new THREE.SphereGeometry(0.1, 16, 16);
const sphereMaterial = new THREE.MeshPhongMaterial({ color: 0xffffff });
for (let i = 0; i < numVertices; i++) {
const x = vertices[i * 3];
const y = vertices[i * 3 + 1];
const z = vertices[i * 3 + 2];
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphere.position.set(x, y, z);
scene.add(sphere);
}
scene.add(wireframe);
// mesh = new THREE.Mesh( geometry, material );
// scene.add( mesh );
// var wireframe = new THREE.LineSegments( wireframeGeometry, wireframeMaterial );
// mesh.add( wireframe );
// renderer = new THREE.WebGLRenderer( { antialias: true } );
// renderer.setSize( window.innerWidth, window.innerHeight );
// document.body.appendChild( renderer.domElement );
// Add circles at the ends of each line in the wireframe
addCirclesAtWireframeEnds(wireframe);
const circleGeometry1 = new THREE.CircleGeometry(0.2, 10);
const circleMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff });
circle1 = new THREE.Mesh(circleGeometry1, circleMaterial);
scene.add(circle1);
const circleGeometry2 = new THREE.CircleGeometry(0.2, 32);
circle2 = new THREE.Mesh(circleGeometry2, circleMaterial);
scene.add(circle2);
const floorGeometry = new THREE.PlaneGeometry(100, 100);
const floorMaterial = new THREE.ShadowMaterial({ opacity: 0.5, color: new THREE.Color(1, 1, 1) });
const floor = new THREE.Mesh(floorGeometry, floorMaterial);
floor.rotation.x = -Math.PI / 2;
floor.position.y = -3.5; // Adjusted the position to be below the diamond
floor.receiveShadow = true;
scene.add(floor);
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
document.body.appendChild(renderer.domElement);
controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.25;
controls.screenSpacePanning = false;
controls.maxPolarAngle = Math.PI / 2;
controls.enableZoom = false; // Disable zooming
window.addEventListener('resize', onWindowResize);
}
function addCirclesAtWireframeEnds(wireframe) {
const circleGeometry = new THREE.SphereGeometry(0.1, 40, 10);
const circleMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff });
const vertices = wireframe.geometry.attributes.position.array;
for (let i = 0; i < vertices.length; i += 6) {
const x = vertices[i];
const y = vertices[i +1 ];
const z = vertices[i + 2];
const circle = new THREE.Mesh(circleGeometry, circleMaterial);
circle.position.set(x, y, z);
scene.add(circle);
}
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
requestAnimationFrame(animate);
diamond.rotation.x += 0.005;
diamond.rotation.y += 0.01;
wireframe.rotation.x += 0.005;
wireframe.rotation.y += 0.01;
controls.update();
renderer.render(scene, camera);
}
</script>
</body>
</html>
I am so sorry for not putting cdn’s, they don’t seem to work, I amworking on this file in the three.js examples folder.
So this is my reference image of ideally what I would have liked as a shape
And here would be the end result on each corner :
