Welcome to Day 07 of learning Threejs! Today, we will be exploring the concept of raycasting and how we can apply it to create an interactive portfolio website using Threejs.
Raycasting is a technique used in computer graphics to detect objects along a ray’s path. In Threejs, raycasting allows us to determine which objects in our 3D scene are being intersected by a ray, giving us the ability to create interactive experiences for users.
To get started, make sure you have a basic understanding of HTML, CSS, and Threejs. If not, I recommend going back to the earlier days of this tutorial series to familiarize yourself with the basics.
First, let’s set up our HTML file with the necessary tags to include Threejs and create a basic structure for our portfolio website:
<!DOCTYPE html>
<html>
<head>
<title>My Threejs Portfolio</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="canvas"></div>
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/build/three.min.js"></script>
<script src="script.js"></script>
</body>
</html>In the above code, we have linked a CSS file for styling our portfolio website and included the Threejs library using a CDN link. We have also included a <div> element with an id of "canvas" where our 3D scene will be rendered.
Next, let’s create a script.js file where we will write our Threejs code:
// Set up Threejs scene
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('canvas').appendChild(renderer.domElement);
// Create a cube for portfolio item
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// Set camera position
camera.position.z = 5;
// Raycasting setup
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();
// Render function
function render() {
requestAnimationFrame(render);
// Update raycaster with mouse position
raycaster.setFromCamera(mouse, camera);
// Check for intersections
const intersects = raycaster.intersectObjects(scene.children);
// Highlight hovered object
if (intersects.length > 0) {
intersects[0].object.material.color.set(0xff0000);
} else {
cube.material.color.set(0x00ff00);
}
// Render the scene
renderer.render(scene, camera);
}
// Mouse events
function onMouseMove(event) {
event.preventDefault();
// Calculate mouse position in normalized device coordinates
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
}
window.addEventListener('mousemove', onMouseMove, false);
// Start rendering the scene
render();In the script.js file, we set up the Threejs scene, created a cube to represent a portfolio item, set up the camera position, and configured raycasting with a raycaster object. We also defined a render function that checks for intersections between the ray and objects in the scene, highlighting the hovered object accordingly. Lastly, we added a mouse event listener to update the mouse position for raycasting.
Now, let’s create a styles.css file to add some basic styling to our portfolio website:
body {
margin: 0;
overflow: hidden;
}
#canvas {
width: 100vw;
height: 100vh;
}
In the styles.css file, we set the body margin to 0 and hide overflow to ensure the canvas takes up the full viewport. We also defined the dimensions of the canvas element to fill the entire screen.
That’s it! You now have a basic portfolio website using Threejs with raycasting functionality. Feel free to customize the appearance of the portfolio items, add more interactivity, and experiment with different 3D elements to create a unique and engaging user experience. Happy coding!
Watch out for seizure warning mate
Where did you learnt ? Some course here in youtube ? Share it with us please