bombinans/fourdjs
1
1
Fork 0
Code Issues 9 Pull Requests Packages Projects Releases Wiki Activity

feature-tapered-links-2 #22

Merged
bombinans merged 13 commits from feature-tapered-links-2 into main 2025-11-16 04:34:22 +00:00
Conversation 0 Commits 13 Files Changed 8 +90 -2
2 changed files with 90 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 43c85d0084 - Show all commits

4
index.html
View File

@ -24,9 +24,9 @@
</style> </style>
</head> </head>
<body> <body>
<script type="module" src="/main.js"></script> <script type="module" src="/linktest.js"></script>
<div id="description"></div> <div id="description"></div>
<div id="info">by <a target="_blank" href="https://mikelynch.org/">Mike Lynch</a> - <div id="info">by <a target="_blank" href="https://mikelynch.org/">Mike Lynch</a> -
<a target="_blank" href="https://git.tilde.town/bombinans/fourdjs">source</a></div> <a target="_blank" href="https://git.tilde.town/bombinans/fourdjs">source</a></div>
</body> </body>
</html> </html>

88
linktest.js Normal file
View File

@ -0,0 +1,88 @@
import * as THREE from 'three';
import { GUI } from 'lil-gui';
import { TaperedLink } from './taperedLink.js';
const FACE_OPACITY = 0.3;
const CAMERA_K = 5;
// scene, lights and camera
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
const light = new THREE.PointLight(0xffffff, 2);
light.position.set(10, 10, 10);
scene.add(light);
const light2 = new THREE.PointLight(0xffffff, 2);
light2.position.set(-10, 5, 10);
scene.add(light);
const amblight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(amblight);
camera.position.set(0, 0, CAMERA_K / 2);
camera.lookAt(0, 0, 0);
//camera.position.z = 4;
const renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.localClippingEnabled = true;
document.body.appendChild( renderer.domElement );
const NODEC = 0x3293a9;
const BACKGROUNDC = 0xd4d4d4;
scene.background = new THREE.Color(BACKGROUNDC);
const material = new THREE.MeshStandardMaterial({ color: NODEC });
const params = {
r1: 0.5,
r2: 0.6,
l: 3,
};
const gui = new GUI();
gui.add(params, "r1", 0.01, 1.5);
gui.add(params, "r2", 0.01, 1.5);
gui.add(params, "l", 0, 4);
function makeNode(material, pos, r) {
const geometry = new THREE.SphereGeometry(1);
const sphere = new THREE.Mesh(geometry, material);
updateNode(sphere, pos, r);
return sphere;
}
function updateNode(node, pos, r) {
node.scale.copy(new THREE.Vector3(r, r, r));
node.position.copy(pos);
}
const n1 = makeNode(material, new THREE.Vector3(-0.5 * params["l"], 0, 0), params["r1"]);
const n2 = makeNode(material, new THREE.Vector3(0.5 * params["l"], 0, 0), params["r2"])
//const tl = new TaperedLink(
scene.add(n1);
scene.add(n2);
function animate() {
requestAnimationFrame(animate);
updateNode(n1, new THREE.Vector3(-0.5 * params["l"], 0, 0), params["r1"]);
updateNode(n2, new THREE.Vector3(0.5 * params["l"], 0, 0), params["r2"]);
renderer.render(scene, camera);
}
animate();