Torus light track

Developer
Ross B
Size
4,909 Kb
Views
14,168
  1. Torus light track Previews
  2. Torus light track HTML Codes
  3. Torus light track CSS Codes
  4. Torus light track JS Codes

How do I make an torus light track?

THREE.js - light orb racing along the surface of a torus knot.. What is a torus light track? How do you make a torus light track? This script and codes were developed by Ross B on 24 November 2022, Thursday.

Torus light track Previews
IQ Test

Torus light track - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Torus light track</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src='https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/r82/three.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Torus light track - Script Codes CSS Codes

canvas { display: block;
}

Torus light track - Script Codes JS Codes

'use strict';
/* init */
var scene = new THREE.Scene();
var sWidth = window.innerWidth;
var sHeight = window.innerHeight;
var sRatio = sWidth / sHeight;
var camera = new THREE.PerspectiveCamera(75, sRatio, 0.1, 1000);
camera.position.z = 10;
var vFOV = camera.fov * Math.PI / 180;
var renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(sWidth, sHeight);
function setDimensions() { sWidth = window.innerWidth; sHeight = window.innerHeight; sRatio = sWidth / sHeight; renderer.setSize(sWidth, sHeight); camera.aspect = sRatio; camera.updateProjectionMatrix(); vFOV = camera.fov * Math.PI / 180;
}
window.addEventListener('resize', setDimensions);
document.body.appendChild(renderer.domElement);
var stats = new Stats();
stats.setMode(1);
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.zIndex = 2;
stats.domElement.style.top = '0px';
document.body.appendChild(stats.domElement);
camera.position.z = 30;
/* end init */
/* start light */
var spotLight = new THREE.SpotLight(0xcccccc, 0.1, 0, Math.PI / 2);
spotLight.position.set(50, 0, 500);
scene.add(spotLight);
var ambience = new THREE.AmbientLight(0xFFFFFFF); // soft white light
scene.add(ambience);
var hemisphere = new THREE.HemisphereLight(0xffffbb, 0x080820, 1);
scene.add(hemisphere);
var light = new THREE.PointLight(0xeeeeee, 1, 10);
scene.add(light);
var orbGeometry = new THREE.SphereGeometry(0.5, 64, 64);
var orbMaterial = new THREE.LineBasicMaterial();
var orb = new THREE.Mesh(orbGeometry, orbMaterial);
orb.position.copy(light.position);
scene.add(orb);
/* end light */
/* start torus knot mesh */
var phongMaterial = new THREE.MeshPhongMaterial({ color: 0xdddddd, specular: 0x999999, shininess: 50, shading: THREE.FlatShading
});
var standardMaterial = new THREE.MeshStandardMaterial({ color: 0xFFFFFF, roughness: 0.4, metalness: 1.0
});
var geometryYRepeat = 10;
var geometry = new THREE.TorusKnotGeometry(9, 1.5, 300, geometryYRepeat);
var torusKnot = new THREE.Mesh(geometry, standardMaterial);
torusKnot.rotation.x = -0.7;
torusKnot.rotation.y = -0.2;
scene.add(torusKnot);
/* end torus knot mesh */
/* start upate & render */
var faceCenter = function faceCenter(geom, faceIndex) { var face = geom.faces[faceIndex]; var vertices = [geom.vertices[face.a], geom.vertices[face.b], geom.vertices[face.c]]; return average(vertices).add(face.normal).applyEuler(torusKnot.rotation);
};
var faceIndex = 12;
var orbPosition = new THREE.Vector3(0, 0, 0);
var update = function update(time) { orbPosition = faceCenter(geometry, faceIndex); faceIndex = faceIndex + geometryYRepeat * 2; if (faceIndex >= geometry.faces.length) { faceIndex -= geometry.faces.length; } light.position.copy(orbPosition); orb.position.copy(orbPosition);
};
var render = function render(time) { requestAnimationFrame(render); stats.update(); update(time); renderer.render(scene, camera);
};
render();
/* end update & render */
// TODO: OPTIMIZE BY CALCULATING UP FRONT
function subdividePath(vertices) { var subdivide = arguments.length <= 1 || arguments[1] === undefined ? 0 : arguments[1];
}
function average(vertices) { return vertices.reduce(function (curr, next) { if (!curr) return next.clone(); return curr.lerp(next, 0.5); }, undefined);
}
function interpolatePathAlongFaces(geometry) { var startFaceIndex = arguments.length <= 1 || arguments[1] === undefined ? 0 : arguments[1]; var faceIndexIncrement = arguments.length <= 2 || arguments[2] === undefined ? 1 : arguments[2]; var subdivide = arguments.length <= 3 || arguments[3] === undefined ? 0 : arguments[3]; var maxPathLength = arguments.length <= 4 || arguments[4] === undefined ? 10000 : arguments[4]; var faces = geometry.faces; var vertices = geometry.vertices; var path = []; var index = startFaceIndex; var iterations = 0; var maxIterations = 1000000; do { index++; var face = faces[index]; var faceVertices = [vertices[face.a], vertices[face.b], vertices[face.c]]; path.push(average(faceVertices)); index += faceIndexIncrement; if (index >= geometry.faces.length) { index -= geometry.faces.length; } iterations++; if (iterations > maxIterations) { throw 'Too many iterations interpolating path'; } } while (index !== startFaceIndex && path.length < maxPathLength); return path;
}
// let path = interpolatePathAlongFaces(geometry, 40, geometryYRepeat * 2)
Torus light track - Script Codes
Torus light track - Script Codes
Home Page Home
Developer Ross B
Username rocbear
Uploaded November 24, 2022
Rating 4.5
Size 4,909 Kb
Views 14,168
Do you need developer help for Torus light track?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Ross B (rocbear) Script Codes
Name
Plane vertex manipulation experiment
Spin button
Canvas blend modes
Responsive grid based FLIP.js demo
A Pen by Ross B
Full page scroll-over with ScrollMagic
UFO
Unfolding circular menu
Wobbly list
Spear checkboxes
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!