Torus Knot rendered with threejs

script.js

let scene = new THREE.Scene()
let camera = new THREE.PerspectiveCamera(75, innerWidth/innerHeight)
camera.position.z = 30

scene.add(camera)

let geometry = new THREE.TorusKnotGeometry(10, 3, 100, 16)
let loader = new THREE.TextureLoader();
let texture = loader.load("https://bruno-simon.com/prismic/matcaps/8.png")

let material = new THREE.MeshMatcapMaterial({matcap: texture})
let mesh = new THREE.Mesh(geometry, material)

scene.add(mesh)

let renderer = new THREE.WebGLRenderer({ alpha: true })

renderer.setSize(window.innerWidth, window.innerHeight)

document.body.append(renderer.domElement)

let cursor = { x: 0, y: 0}

window.addEventListener('mousemove', ( event ) => {
  cursor.x = event.clientX / window.innerWidth - 0.5
  cursor.y = event.clientY / window.innerHeight - 0.5
})

const tick = () => {
  window.requestAnimationFrame(tick)
  
  mesh.rotation.y += 0.01
  
  let camX = -cursor.x * 50
  let camY = -cursor.y * 10
  
  camera.position.x += (camX - camera.position.x)/10
  camera.position.y += (camY - camera.position.y)/10
  
  renderer.render(scene, camera)  
}
tick()

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>

style.css

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;400&display=swap');

main {
  font-family: "Montserrat",
    min-height: '100vh',
    box-sizing: border-box,
}



main {
  position: absolute;
  background-color: #fff0ff;
  min-height: 100vh;
  padding: 72px;
  font-family: 'Montserrat';
  max-width: 20vw
}

body {
  overflow: hidden;
}

TorusKnot-webgl

<main>
<h1>This is a Torus Knot rendered on the browser with the help of WebGL
 </h1>
</main>

TorusKnot-webgl.md

Torus Knot rendered with threejs

A Pen by Richard Okonicha on CodePen.

License.

his is a Torus Knot rendered on the browser with the help of WebGL