title
Three.js Crash Course for Absolute Beginners - 3D in the Browser
description
https://skl.sh/designcourse21 - First 500 people to sign up will get their first 2 months free!
https://designcourse.com - Learn UI/UX from Scratch with my new service (coming soon)
-- Today, we're going to take a look at Three.js from a beginner's perspective. Three.js is a JavaScript library for creating immersive 3D graphics in the browser. In this crash course, you will learn:
- How to setup a scene, renderer and camera
- How to add 3D primitives
- How to position, rotate and scale them.
- Using GSAP Timeline to animate 3D objects
- Using the raytracer to interact with 3D objects
...and more.
Here is the codepen for this tutorial:
https://codepen.io/designcourse/pen/bZYVVx
Enjoy!
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
My site: https://designcourse.com
My personal FB account: http://fb.com/logodesigner
Coursetro FB: http://fb.com/coursetro
Coursetro's Twitter: http://twitter.com/designcoursecom
Join my Discord! https://discord.gg/a27CKAF
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Coursetro.com.
Come to my discord server or add me on social media and say Hi!
detail
{'title': 'Three.js Crash Course for Absolute Beginners - 3D in the Browser', 'heatmap': [{'end': 752.937, 'start': 727.849, 'weight': 0.979}, {'end': 1116.013, 'start': 1062.592, 'weight': 1}, {'end': 2153.293, 'start': 2126.872, 'weight': 0.759}], 'summary': "A crash course on 3js covers introduction, 3d object animation with gsap, renderer setup, 3d graphics programming basics, object manipulation, gsap animation, and 3d animation techniques, including a special promotion for skillshare.com's sponsorship.", 'chapters': [{'end': 84.618, 'segs': [{'end': 41.637, 'src': 'embed', 'start': 0.089, 'weight': 1, 'content': [{'end': 1.757, 'text': "Today, we're going to take a look at 3JS.", 'start': 0.089, 'duration': 1.668}, {'end': 11.379, 'text': "Oh, and hey, I'd like to mention this video's sponsor, Skillshare.com.", 'start': 8.297, 'duration': 3.082}, {'end': 19.884, 'text': "Now it's a brand new year, here in 2019, and Skillshare will help keep you learning and thriving, as they offer 25, 000 different classes in coding,", 'start': 11.599, 'duration': 8.285}, {'end': 21.445, 'text': 'design, business and more.', 'start': 19.884, 'duration': 1.561}, {'end': 25.327, 'text': "For instance, you're about to watch my tutorial that utilizes a JavaScript library,", 'start': 21.565, 'duration': 3.762}, {'end': 30.07, 'text': "but you could watch this full JavaScript course at Skillshare if your JavaScript knowledge isn't quite up to par.", 'start': 25.327, 'duration': 4.743}, {'end': 34.532, 'text': 'Skillshare is also super affordable with a subscription that only costs 10 bucks a month.', 'start': 30.45, 'duration': 4.082}, {'end': 40.756, 'text': "But if you're one of the first 500 of my subscribers to click the link below here in the description, you get the first two months free.", 'start': 34.793, 'duration': 5.963}, {'end': 41.637, 'text': 'So take advantage.', 'start': 40.916, 'duration': 0.721}], 'summary': 'Skillshare offers 25,000 classes in coding, design, and business, with a $10 monthly subscription and first two months free for the first 500 subscribers.', 'duration': 41.548, 'max_score': 0.089, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6oFvqLfRnsU/pics/6oFvqLfRnsU89.jpg'}, {'end': 95.189, 'src': 'embed', 'start': 65.036, 'weight': 0, 'content': [{'end': 68.82, 'text': 'And you can see some of these are games, some of them are modern UIs.', 'start': 65.036, 'duration': 3.784}, {'end': 77.17, 'text': "And I'm going to be covering the very absolute basics, such as you know how to set up your camera, the scene,", 'start': 68.84, 'duration': 8.33}, {'end': 84.618, 'text': "the renderer and also how to get in basic 3D objects, how to interact with them through what's called a ray caster,", 'start': 77.17, 'duration': 7.448}, {'end': 90.764, 'text': "and also how to animate them with the help of GSAP, which is Green Sock Animation Platform's Tween Max.", 'start': 84.618, 'duration': 6.146}, {'end': 95.189, 'text': "Okay, so make sure to subscribe if you haven't yet, and let's get started.", 'start': 90.904, 'duration': 4.285}], 'summary': 'Covering basics of setting up camera, scene, renderer, 3d objects, interaction, and animation using gsap.', 'duration': 30.153, 'max_score': 65.036, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6oFvqLfRnsU/pics/6oFvqLfRnsU65036.jpg'}], 'start': 0.089, 'title': 'Introduction to 3js and skillshare sponsorship', 'summary': "Provides an overview of 3js, highlighting its features, while also mentioning skillshare.com's sponsorship, offering 25,000 classes and a special promotion of the first two months free for the initial 500 subscribers.", 'chapters': [{'end': 84.618, 'start': 0.089, 'title': 'Introduction to 3js and skillshare sponsorship', 'summary': 'Introduces 3js and its features, with a mention of skillshare.com offering 25,000 classes and a special offer for the first 500 subscribers to get the first two months free.', 'duration': 84.529, 'highlights': ['The chapter introduces 3JS and its features, with a mention of Skillshare.com offering 25,000 classes.', 'Skillshare.com offers a special offer for the first 500 subscribers to get the first two months free.', 'The tutorial covers setting up the camera, scene, renderer, and basic 3D objects interaction through a ray caster.']}], 'duration': 84.529, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6oFvqLfRnsU/pics/6oFvqLfRnsU89.jpg', 'highlights': ['The tutorial covers setting up the camera, scene, renderer, and basic 3D objects interaction through a ray caster.', 'Skillshare.com offers a special offer for the first 500 subscribers to get the first two months free.', 'The chapter introduces 3JS and its features, with a mention of Skillshare.com offering 25,000 classes.']}, {'end': 354.487, 'segs': [{'end': 114.186, 'src': 'embed', 'start': 84.618, 'weight': 4, 'content': [{'end': 90.764, 'text': "and also how to animate them with the help of GSAP, which is Green Sock Animation Platform's Tween Max.", 'start': 84.618, 'duration': 6.146}, {'end': 95.189, 'text': "Okay, so make sure to subscribe if you haven't yet, and let's get started.", 'start': 90.904, 'duration': 4.285}, {'end': 100.574, 'text': 'All right, so the very first thing we want to do is create an index.js.', 'start': 95.589, 'duration': 4.985}, {'end': 105.538, 'text': 'I have an empty folder here, obviously, in Visual Studio Code, a free code editor from Microsoft.', 'start': 100.754, 'duration': 4.784}, {'end': 108.221, 'text': "Here's the folder name.", 'start': 106.379, 'duration': 1.842}, {'end': 114.186, 'text': "And we're going to hit exclamation point enter to create some quick HTML scaffolding.", 'start': 108.241, 'duration': 5.945}], 'summary': 'Create an index.js and html scaffolding in visual studio code.', 'duration': 29.568, 'max_score': 84.618, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6oFvqLfRnsU/pics/6oFvqLfRnsU84618.jpg'}, {'end': 178.302, 'src': 'embed', 'start': 136.538, 'weight': 2, 'content': [{'end': 145.726, 'text': "Okay, so now the one thing that I'm not going to deal with just for this tutorial, I want it to be quick and focused just on the topic at hand.", 'start': 136.538, 'duration': 9.188}, {'end': 150.47, 'text': "I'm not going to deal with using any type of module bundlers like Webpack or Parcel.", 'start': 145.986, 'duration': 4.484}, {'end': 154.111, 'text': 'In a real project, you would probably wanna use those.', 'start': 151.91, 'duration': 2.201}, {'end': 162.135, 'text': "And if you're not sure what I'm talking about, then I did just recently release a parcel tutorial and a web pack for tutorial.", 'start': 154.512, 'duration': 7.623}, {'end': 164.216, 'text': "So you'll know what I mean after watching those.", 'start': 162.155, 'duration': 2.061}, {'end': 172.539, 'text': "All right, so with that said, we're just gonna use CDNs or content delivery networks for the different dependencies that we need.", 'start': 164.736, 'duration': 7.803}, {'end': 178.302, 'text': "So I'm just gonna paste those in and hit control B to get rid of that sidebar.", 'start': 173.019, 'duration': 5.283}], 'summary': 'The tutorial focuses on using cdns instead of module bundlers like webpack or parcel for quick and focused learning.', 'duration': 41.764, 'max_score': 136.538, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6oFvqLfRnsU/pics/6oFvqLfRnsU136538.jpg'}, {'end': 253.258, 'src': 'embed', 'start': 225.674, 'weight': 0, 'content': [{'end': 228.496, 'text': 'And then, so the second one is just going to be Tweenmax right here.', 'start': 225.674, 'duration': 2.822}, {'end': 229.177, 'text': 'All right.', 'start': 228.897, 'duration': 0.28}, {'end': 233.08, 'text': 'So this is from GSAP, which is a GreenSock animation plugin.', 'start': 229.197, 'duration': 3.883}, {'end': 238.484, 'text': "And it's going to allow us to animate our 3D objects pretty easily.", 'start': 233.5, 'duration': 4.984}, {'end': 242.527, 'text': "So you'll see how this comes into play a little bit later on.", 'start': 238.544, 'duration': 3.983}, {'end': 253.258, 'text': "Okay, so the very first thing we need to do, and we're just going to do a JavaScript right in this file is create a scene.", 'start': 243.067, 'duration': 10.191}], 'summary': 'Using tweenmax from gsap to animate 3d objects, starting with creating a javascript scene.', 'duration': 27.584, 'max_score': 225.674, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6oFvqLfRnsU/pics/6oFvqLfRnsU225674.jpg'}, {'end': 320.255, 'src': 'embed', 'start': 292.934, 'weight': 1, 'content': [{'end': 299.181, 'text': 'in. the perspective camera constructor accepts four different parameters, which is the field of view or the fob,', 'start': 292.934, 'duration': 6.247}, {'end': 302.544, 'text': 'the aspect ratio and the near and far plane.', 'start': 299.181, 'duration': 3.363}, {'end': 310.891, 'text': "so to do that we're going to save our camera equals, We'll say new three dot perspective camera.", 'start': 302.544, 'duration': 8.347}, {'end': 314.972, 'text': 'And then this is where our four properties go in here.', 'start': 311.611, 'duration': 3.361}, {'end': 320.255, 'text': 'So we could say 75 for the field of view.', 'start': 315.533, 'duration': 4.722}], 'summary': 'Perspective camera constructor takes 4 parameters: fov (field of view), aspect ratio, near and far plane.', 'duration': 27.321, 'max_score': 292.934, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6oFvqLfRnsU/pics/6oFvqLfRnsU292934.jpg'}], 'start': 84.618, 'title': 'Gsap and 3js for 3d object animation', 'summary': 'Covers setting up a project in visual studio code for gsap animation, utilizing cdns for dependencies, and introduces the use of 3js and gsap for animating 3d objects, including the creation of a scene, defining a perspective camera with specific parameters, and the use of tweenmax from gsap for animation.', 'chapters': [{'end': 202.391, 'start': 84.618, 'title': 'Gsap animation with gsap in javascript', 'summary': 'Covers setting up a project in visual studio code for gsap animation, utilizing cdns for dependencies and focusing on the topic at hand without dealing with module bundlers like webpack or parcel.', 'duration': 117.773, 'highlights': ['The chapter covers setting up a project in Visual Studio Code for GSAP animation', 'Utilizing CDNs for dependencies', 'Focusing on the topic at hand without dealing with module bundlers like Webpack or Parcel']}, {'end': 354.487, 'start': 202.851, 'title': '3d object animation with 3js and gsap', 'summary': 'Introduces the use of 3js and gsap for animating 3d objects, including the creation of a scene, defining a perspective camera with specific parameters, and the use of tweenmax from gsap for animation.', 'duration': 151.636, 'highlights': ['The chapter introduces the use of 3JS and GSAP for animating 3D objects The chapter discusses the use of 3JS and GSAP for animating 3D objects, providing an overview of the tools used for animation.', 'Creating a scene and defining a perspective camera with specific parameters The chapter explains the process of creating a scene and defining a perspective camera with specific parameters, including the field of view, aspect ratio, and near and far planes.', 'Introduction of Tweenmax from GSAP for animation The chapter introduces Tweenmax from GSAP as a tool for easily animating 3D objects, emphasizing its use in the animation process.']}], 'duration': 269.869, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6oFvqLfRnsU/pics/6oFvqLfRnsU84618.jpg', 'highlights': ['The chapter introduces the use of 3JS and GSAP for animating 3D objects', 'Creating a scene and defining a perspective camera with specific parameters', 'Utilizing CDNs for dependencies', 'Introduction of Tweenmax from GSAP for animation', 'Covers setting up a project in Visual Studio Code for GSAP animation', 'Focusing on the topic at hand without dealing with module bundlers like Webpack or Parcel']}, {'end': 1016.568, 'segs': [{'end': 402.81, 'src': 'embed', 'start': 377.456, 'weight': 0, 'content': [{'end': 383.659, 'text': 'So there are a few different types of renderers, just as there are a few different types of cameras.', 'start': 377.456, 'duration': 6.203}, {'end': 391.383, 'text': 'And that would be a WebGL renderer, a CSS 2D renderer, a CSS 3D renderer, and an SVG renderer.', 'start': 383.679, 'duration': 7.704}, {'end': 398.127, 'text': 'The WebGL renderer provides you with the most flexibility and power to create crazy scenes with no limitations.', 'start': 392.363, 'duration': 5.764}, {'end': 402.81, 'text': 'The other renderers are more simplistic, but still worth checking out for specific use cases.', 'start': 398.968, 'duration': 3.842}], 'summary': 'Different types of renderers include webgl, css 2d, css 3d, and svg, with webgl offering the most flexibility and power for scene creation.', 'duration': 25.354, 'max_score': 377.456, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6oFvqLfRnsU/pics/6oFvqLfRnsU377456.jpg'}, {'end': 455.251, 'src': 'embed', 'start': 425.795, 'weight': 1, 'content': [{'end': 431.48, 'text': "Just type 3JS webglRenderer in Google and you'll find the official docs there.", 'start': 425.795, 'duration': 5.685}, {'end': 437.444, 'text': "But we're just going to pass in one property called anti-alias and set it to true.", 'start': 431.94, 'duration': 5.504}, {'end': 441.808, 'text': 'All right, otherwise the result will look jagged.', 'start': 438.245, 'duration': 3.563}, {'end': 448.584, 'text': "Alright, so we're also going to set a clear color on our renderer.", 'start': 443.499, 'duration': 5.085}, {'end': 450.166, 'text': 'So we can do that.', 'start': 449.225, 'duration': 0.941}, {'end': 455.251, 'text': 'And this is just another way of really just saying like a background color.', 'start': 452.588, 'duration': 2.663}], 'summary': 'Set anti-alias property to true for smooth rendering and define a clear color for the background.', 'duration': 29.456, 'max_score': 425.795, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6oFvqLfRnsU/pics/6oFvqLfRnsU425795.jpg'}, {'end': 759.04, 'src': 'heatmap', 'start': 727.849, 'weight': 0.979, 'content': [{'end': 728.189, 'text': 'Save it.', 'start': 727.849, 'duration': 0.34}, {'end': 730.872, 'text': 'And there we go.', 'start': 730.251, 'duration': 0.621}, {'end': 733.3, 'text': "All right, now we're getting somewhere.", 'start': 732.099, 'duration': 1.201}, {'end': 736.383, 'text': 'Notice these scroll bars though, we want to adjust that.', 'start': 733.921, 'duration': 2.462}, {'end': 739.525, 'text': "So that's just gonna involve some quick CSS real quickly.", 'start': 736.463, 'duration': 3.062}, {'end': 743.909, 'text': "And well, I'm redundant, some quick CSS real quickly.", 'start': 739.545, 'duration': 4.364}, {'end': 752.937, 'text': 'Okay, so all we need is just a margin, zero, a height, 100 viewport heights on the body element.', 'start': 743.989, 'duration': 8.948}, {'end': 759.04, 'text': 'And then our canvas element, which is attached through a pen child, if you recall, we have to call display block.', 'start': 753.297, 'duration': 5.743}], 'summary': 'Adjust scroll bars using quick css with margin 0 and height 100 viewport heights on the body element, and set canvas element to display block.', 'duration': 31.191, 'max_score': 727.849, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6oFvqLfRnsU/pics/6oFvqLfRnsU727849.jpg'}, {'end': 957.158, 'src': 'embed', 'start': 929.195, 'weight': 2, 'content': [{'end': 931.696, 'text': 'uh, it means by width segments and height segments.', 'start': 929.195, 'duration': 2.501}, {'end': 940.103, 'text': "So in here we'll put 1 for the size, for the radius, and then 10 and 10 for the width and height segments.", 'start': 932.356, 'duration': 7.747}, {'end': 942.885, 'text': 'Alright, next we have that material.', 'start': 940.924, 'duration': 1.961}, {'end': 946.068, 'text': 'So, we got the shape, or the form, now we need the material.', 'start': 942.966, 'duration': 3.102}, {'end': 957.158, 'text': "So, we're going to say var material equals new 3, and we'll say mesh Lambert material.", 'start': 946.128, 'duration': 11.03}], 'summary': 'Configuring a 3d shape with 1 size, 10 width segments, and 10 height segments using mesh lambert material.', 'duration': 27.963, 'max_score': 929.195, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6oFvqLfRnsU/pics/6oFvqLfRnsU929195.jpg'}], 'start': 354.487, 'title': 'Setting up 3js renderer and adding 3d object', 'summary': 'Explains the setup of a webgl renderer in 3js, including setting up the scene, camera, and renderer with specific properties, and then proceeds to add a 3d sphere object with specified geometry and material properties.', 'chapters': [{'end': 1016.568, 'start': 354.487, 'title': 'Setting up 3js renderer and adding 3d object', 'summary': 'Explains the setup of a webgl renderer in 3js, including setting up the scene, camera, and renderer with specific properties, and then proceeds to add a 3d sphere object with specified geometry and material properties.', 'duration': 662.081, 'highlights': ['Setting up a WebGL renderer provides the most flexibility and power to create scenes with no limitations, while other renderers are more simplistic. The WebGL renderer provides the most flexibility and power to create scenes with no limitations, making it the preferred choice for complex 3D scenes.', 'Configuring the renderer with options like anti-aliasing, clear color, and size based on window inner width and height is essential to ensure smooth rendering and responsiveness. Configuring the renderer with options like anti-aliasing, clear color, and size based on window inner width and height is essential to ensure smooth rendering and responsiveness for the 3D scene.', 'Adding a 3D sphere involves defining its geometry by specifying parameters such as radius, width segments, and height segments, and creating a material using Mesh Lambert material with a specified color. Adding a 3D sphere involves defining its geometry by specifying parameters such as radius, width segments, and height segments, and creating a material using Mesh Lambert material with a specified color to determine the appearance of the 3D shape.']}], 'duration': 662.081, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6oFvqLfRnsU/pics/6oFvqLfRnsU354487.jpg', 'highlights': ['The WebGL renderer provides the most flexibility and power to create scenes with no limitations, making it the preferred choice for complex 3D scenes.', 'Configuring the renderer with options like anti-aliasing, clear color, and size based on window inner width and height is essential to ensure smooth rendering and responsiveness for the 3D scene.', 'Adding a 3D sphere involves defining its geometry by specifying parameters such as radius, width segments, and height segments, and creating a material using Mesh Lambert material with a specified color to determine the appearance of the 3D shape.']}, {'end': 1418.773, 'segs': [{'end': 1116.013, 'src': 'heatmap', 'start': 1017.589, 'weight': 0, 'content': [{'end': 1019.629, 'text': "So again, we don't have anything right now.", 'start': 1017.589, 'duration': 2.04}, {'end': 1021.009, 'text': 'We just have our variables.', 'start': 1019.649, 'duration': 1.36}, {'end': 1022.51, 'text': "Nothing's being added just yet.", 'start': 1021.069, 'duration': 1.441}, {'end': 1028.79, 'text': "The third thing that we need to concern ourselves with is to combine these two into what's called a mesh.", 'start': 1023.09, 'duration': 5.7}, {'end': 1035.112, 'text': 'So we do that by creating another variable mesh equals new three dot mesh.', 'start': 1029.351, 'duration': 5.761}, {'end': 1039.933, 'text': 'And we pass in our geometry first and then our material second.', 'start': 1036.012, 'duration': 3.921}, {'end': 1044.334, 'text': 'Finally, we do scene dot add.', 'start': 1041.413, 'duration': 2.921}, {'end': 1046.619, 'text': 'We add the mesh.', 'start': 1045.819, 'duration': 0.8}, {'end': 1048.841, 'text': 'All right.', 'start': 1048.481, 'duration': 0.36}, {'end': 1053.145, 'text': "So if we go back, and of course, it's not there.", 'start': 1049.822, 'duration': 3.323}, {'end': 1055.326, 'text': 'All right.', 'start': 1055.066, 'duration': 0.26}, {'end': 1059.769, 'text': 'And that is because I have an error update project matrix.', 'start': 1055.446, 'duration': 4.323}, {'end': 1062.031, 'text': 'It should be projection matrix.', 'start': 1059.79, 'duration': 2.241}, {'end': 1064.513, 'text': 'So make sure you update that.', 'start': 1062.592, 'duration': 1.921}, {'end': 1067.856, 'text': "Now, if we save it now, we're still not going to see it.", 'start': 1065.614, 'duration': 2.242}, {'end': 1070.867, 'text': "even though our error goes away, we don't see it.", 'start': 1068.945, 'duration': 1.922}, {'end': 1074.911, 'text': "And that's because we need to set a camera position on the z-axis.", 'start': 1070.907, 'duration': 4.004}, {'end': 1091.008, 'text': "So if we come back here and we set camera.position.z and we'll say 5, and then we take our renderer render method and add it at the bottom, save it.", 'start': 1075.532, 'duration': 15.476}, {'end': 1098.387, 'text': 'we will now see that we have a black ugly looking sphere of sorts.', 'start': 1092.045, 'duration': 6.342}, {'end': 1106.27, 'text': 'So to fix that and to actually be able to see the color that we set for it, we need to add in a light of some sort.', 'start': 1098.887, 'duration': 7.383}, {'end': 1111.192, 'text': 'So the way we do that is we say var light.', 'start': 1106.37, 'duration': 4.822}, {'end': 1116.013, 'text': 'And you guessed it, there are a lot of different types of lights that you can use.', 'start': 1112.772, 'duration': 3.241}], 'summary': 'Creating a mesh with geometry and material, setting camera position, and adding light to improve visibility.', 'duration': 57.322, 'max_score': 1017.589, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6oFvqLfRnsU/pics/6oFvqLfRnsU1017589.jpg'}, {'end': 1165.126, 'src': 'embed', 'start': 1134.296, 'weight': 3, 'content': [{'end': 1136.518, 'text': 'And this here, you can see the constructor.', 'start': 1134.296, 'duration': 2.222}, {'end': 1139.62, 'text': 'It takes a color, intensity, distance, and a decay.', 'start': 1136.538, 'duration': 3.082}, {'end': 1142.482, 'text': "We're not going to define all those, just three of them.", 'start': 1139.94, 'duration': 2.542}, {'end': 1146.625, 'text': "So the color, we're going to make it, I think we'll just do.", 'start': 1142.962, 'duration': 3.663}, {'end': 1151.34, 'text': 'white for now.', 'start': 1150.66, 'duration': 0.68}, {'end': 1155.842, 'text': "And we'll say one for the intensity and distance for 500.", 'start': 1152.401, 'duration': 3.441}, {'end': 1159.504, 'text': "And then we're also going to set a position.", 'start': 1155.842, 'duration': 3.662}, {'end': 1165.126, 'text': 'So light dot position, we set and this is based on XYZ.', 'start': 1159.804, 'duration': 5.322}], 'summary': 'Constructor takes color, intensity, distance. defined as white, 1, 500.', 'duration': 30.83, 'max_score': 1134.296, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6oFvqLfRnsU/pics/6oFvqLfRnsU1134296.jpg'}, {'end': 1418.773, 'src': 'embed', 'start': 1379.955, 'weight': 1, 'content': [{'end': 1383.236, 'text': 'All right, so request animation frame.', 'start': 1379.955, 'duration': 3.281}, {'end': 1392.762, 'text': 'basically taken from the 3JS documentation, it will create a loop that causes the renderer to draw the scene every time the screen is refreshed.', 'start': 1383.236, 'duration': 9.526}, {'end': 1397.824, 'text': 'And on a typical screen, this means 60 times per second or 60 FPS.', 'start': 1393.422, 'duration': 4.402}, {'end': 1404.587, 'text': "Now, if you're new to writing games in a browser, you might say why don't we create a set interval with through JavaScript?", 'start': 1399.105, 'duration': 5.482}, {'end': 1407.308, 'text': 'Well, the thing is, we could but request animation.', 'start': 1405.087, 'duration': 2.221}, {'end': 1408.909, 'text': 'frame has a number of advantages.', 'start': 1407.308, 'duration': 1.601}, {'end': 1414.111, 'text': 'Perhaps the most important one is that it pauses when the user navigates to a different browser tab,', 'start': 1408.969, 'duration': 5.142}, {'end': 1418.773, 'text': "which is ideal because you're not wasting their precious power, processing power and battery life.", 'start': 1414.111, 'duration': 4.662}], 'summary': 'Using requestanimationframe creates a 60 fps loop, pausing during tab switches to save power.', 'duration': 38.818, 'max_score': 1379.955, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6oFvqLfRnsU/pics/6oFvqLfRnsU1379955.jpg'}], 'start': 1017.589, 'title': '3d graphics programming basics', 'summary': 'Covers creating 3d mesh in three.js and explains the basics of 3d graphics programming using 3js, emphasizing the need to set a camera position on the z-axis for visibility and achieving a smooth and visually appealing output.', 'chapters': [{'end': 1074.911, 'start': 1017.589, 'title': 'Creating 3d mesh in three.js', 'summary': 'Discusses creating a 3d mesh in three.js using variables, geometry, material, and scene manipulation, emphasizing the need to set a camera position on the z-axis for visibility.', 'duration': 57.322, 'highlights': ["The third thing to concern ourselves with is to combine these two into what's called a mesh by creating a new variable mesh and passing in geometry and material.", 'It is essential to set a camera position on the z-axis to ensure visibility of the 3D mesh.', "An error 'update project matrix' should be corrected to 'projection matrix' to resolve visibility issues in the 3D mesh."]}, {'end': 1418.773, 'start': 1075.532, 'title': '3d graphics programming basics', 'summary': 'Explains the basics of 3d graphics programming using 3js, covering topics such as setting up a sphere and box, adding lights, adjusting object positions, and using request animation frame to optimize rendering, with a focus on achieving a smooth and visually appealing output.', 'duration': 343.241, 'highlights': ['The chapter explains the basics of 3D graphics programming using 3JS, covering topics such as setting up a sphere and box, adding lights, adjusting object positions, and using request animation frame to optimize rendering, with a focus on achieving a smooth and visually appealing output. Covers various aspects of 3D graphics programming using 3JS, including setting up objects, adding lights, adjusting positions, and optimizing rendering.', 'The render method uses request animation frame, which causes the renderer to draw the scene every time the screen is refreshed, typically 60 times per second, optimizing the rendering process. Request animation frame optimizes rendering by drawing the scene 60 times per second, leading to a smoother visual output.', 'Explains the advantages of using request animation frame over set interval, highlighting that it pauses when the user navigates to a different browser tab, optimizing processing power and battery life. Request animation frame pauses when the user navigates to a different browser tab, conserving processing power and battery life, which is advantageous over using set interval.', 'Demonstrates the process of adding a point light with color, intensity, and distance settings, enhancing the visual appearance of the 3D objects. Adding a point light with color, intensity, and distance settings improves the visual appearance of the 3D objects.']}], 'duration': 401.184, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6oFvqLfRnsU/pics/6oFvqLfRnsU1017589.jpg', 'highlights': ['It is essential to set a camera position on the z-axis to ensure visibility of the 3D mesh.', 'Request animation frame pauses when the user navigates to a different browser tab, conserving processing power and battery life, which is advantageous over using set interval.', 'The render method uses request animation frame, which causes the renderer to draw the scene every time the screen is refreshed, typically 60 times per second, optimizing the rendering process.', 'Adding a point light with color, intensity, and distance settings improves the visual appearance of the 3D objects.', "The third thing to concern ourselves with is to combine these two into what's called a mesh by creating a new variable mesh and passing in geometry and material."]}, {'end': 1812.55, 'segs': [{'end': 1451.458, 'src': 'embed', 'start': 1419.694, 'weight': 2, 'content': [{'end': 1433.044, 'text': "And so basically we're redrawing the renderer every time the screen refreshes and that helps this part of our code work up here for the aspect ratio.", 'start': 1419.694, 'duration': 13.35}, {'end': 1439.128, 'text': "Okay, so now that I fixed that and let's get back to our topic of actually moving things around.", 'start': 1433.644, 'duration': 5.484}, {'end': 1444.653, 'text': 'So you could see we set our position X on two.', 'start': 1440.91, 'duration': 3.743}, {'end': 1446.074, 'text': "Now let's try negative two.", 'start': 1444.893, 'duration': 1.181}, {'end': 1451.458, 'text': 'Now you can see it has moved over here on this side of the screen.', 'start': 1448.476, 'duration': 2.982}], 'summary': 'Redrawing the renderer improves aspect ratio. adjusting position x impacts screen placement.', 'duration': 31.764, 'max_score': 1419.694, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6oFvqLfRnsU/pics/6oFvqLfRnsU1419694.jpg'}, {'end': 1657.029, 'src': 'embed', 'start': 1484.102, 'weight': 0, 'content': [{'end': 1496.246, 'text': "Now we can also use a shorthand method for defining all of these by just saying set, and then we say 2,, 2, and negative 2, and we'll see.", 'start': 1484.102, 'duration': 12.144}, {'end': 1498.287, 'text': 'we have our results still working up here.', 'start': 1496.246, 'duration': 2.041}, {'end': 1512.409, 'text': "All right, what about rotation and scale? So we could simply say rotation instead, and we'll say 45, 0, and 0.", 'start': 1498.307, 'duration': 14.102}, {'end': 1523.673, 'text': "Alright, so now it's been rotated on the x-axis, and mesh.scale.set, rather, 1, 2, and 1.", 'start': 1512.409, 'duration': 11.264}, {'end': 1526.434, 'text': "So that's x, y, and z.", 'start': 1523.673, 'duration': 2.761}, {'end': 1528.435, 'text': 'So now it should be longer and rotated.', 'start': 1526.434, 'duration': 2.001}, {'end': 1534.231, 'text': "All right, so let's go ahead and get rid of those.", 'start': 1529.508, 'duration': 4.723}, {'end': 1539.134, 'text': 'And what if we wanted this object to actually move?', 'start': 1535.972, 'duration': 3.162}, {'end': 1541.936, 'text': 'maybe rotate or scale and animate while doing so?', 'start': 1539.134, 'duration': 2.802}, {'end': 1547.979, 'text': 'Okay, so what we want to do now is within this section.', 'start': 1542.696, 'duration': 5.283}, {'end': 1553.363, 'text': 'right here we can say mesh.rotation, for instance.', 'start': 1547.979, 'duration': 5.384}, {'end': 1558.666, 'text': "We'll say plus equals 0.01.", 'start': 1555.484, 'duration': 3.182}, {'end': 1569.674, 'text': "All right, so what that's doing is it's adding 0.01 every time this renderer function is called, and that's like 60 frames per second essentially.", 'start': 1558.666, 'duration': 11.008}, {'end': 1575.679, 'text': 'So we can now see it is rotating on the x-axis.', 'start': 1569.754, 'duration': 5.925}, {'end': 1577.52, 'text': 'So we can make it go faster.', 'start': 1576.299, 'duration': 1.221}, {'end': 1582.699, 'text': "Let's say 5.", 'start': 1577.54, 'duration': 5.159}, {'end': 1583.84, 'text': 'there you go.', 'start': 1582.699, 'duration': 1.141}, {'end': 1586.721, 'text': 'so very, very cool stuff that you can do.', 'start': 1583.84, 'duration': 2.881}, {'end': 1600.408, 'text': 'at this point let me bring in my brow, my uh code editor, so that we can make adjustments without having to keep on going back to the browser.', 'start': 1586.721, 'duration': 13.687}, {'end': 1606.971, 'text': 'okay, so we can also do mesh dot, rotation dot y plus equals.', 'start': 1600.408, 'duration': 6.563}, {'end': 1607.351, 'text': "we'll say 0.01.", 'start': 1606.971, 'duration': 0.38}, {'end': 1608.732, 'text': 'all right, very cool.', 'start': 1607.351, 'duration': 1.381}, {'end': 1622.4, 'text': "And let's also maybe do mesh.scale.x.", 'start': 1616.272, 'duration': 6.128}, {'end': 1626.085, 'text': 'minus equals 0.01..', 'start': 1622.4, 'duration': 3.685}, {'end': 1627.406, 'text': 'Now this would be a funny effect.', 'start': 1626.085, 'duration': 1.321}, {'end': 1631.531, 'text': "Now it's just going to invert itself and keep on growing.", 'start': 1629.048, 'duration': 2.483}, {'end': 1635.076, 'text': "All right, so let's get rid of those.", 'start': 1632.993, 'duration': 2.083}, {'end': 1638.333, 'text': "All right, we're back to our boring square.", 'start': 1636.912, 'duration': 1.421}, {'end': 1646.2, 'text': 'Now, if you wanted to perform some sort of complex animation sequence, doing it this way would probably be rather difficult.', 'start': 1639.494, 'duration': 6.706}, {'end': 1651.624, 'text': 'So we can use our GSAP or the GreenStock Animation Platform, their timeline plugin,', 'start': 1646.4, 'duration': 5.224}, {'end': 1657.029, 'text': 'to help us perform the animations and the animation sequences much more easily.', 'start': 1651.624, 'duration': 5.405}], 'summary': 'Demonstrates setting rotation, scale, and animation of 3d objects in code with an example of using gsap for complex animations.', 'duration': 172.927, 'max_score': 1484.102, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6oFvqLfRnsU/pics/6oFvqLfRnsU1484102.jpg'}, {'end': 1709.135, 'src': 'embed', 'start': 1680.928, 'weight': 7, 'content': [{'end': 1686.789, 'text': "And we're gonna delay it just by 0.3 because if not, the animation happens instantly and it's shaky.", 'start': 1680.928, 'duration': 5.861}, {'end': 1690.19, 'text': "So we're just putting like a 300 millisecond delay on that.", 'start': 1686.889, 'duration': 3.301}, {'end': 1692.651, 'text': "So we're gonna say this.tl.", 'start': 1690.69, 'duration': 1.961}, {'end': 1696.352, 'text': '2 and we reference our mesh.', 'start': 1692.651, 'duration': 3.701}, {'end': 1699.112, 'text': "So we'll say this.mesh.scale.", 'start': 1696.552, 'duration': 2.56}, {'end': 1702.673, 'text': "So we're gonna scale it initially for a duration of one.", 'start': 1699.733, 'duration': 2.94}, {'end': 1709.135, 'text': "And then in this object here, we're gonna put X, which is going to scale on the X axis.", 'start': 1703.453, 'duration': 5.682}], 'summary': 'Delay animation by 0.3s to prevent shakiness, then scale mesh on x axis.', 'duration': 28.207, 'max_score': 1680.928, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6oFvqLfRnsU/pics/6oFvqLfRnsU1680928.jpg'}], 'start': 1419.694, 'title': '3d object manipulation and gsap animation', 'summary': 'Covers manipulating 3d objects using code to achieve advanced effects and functionality, and explains using gsap to create complex animation sequences easily, including scaling, positioning, and rotation with specific durations and delays.', 'chapters': [{'end': 1631.531, 'start': 1419.694, 'title': '3d object manipulation in code', 'summary': 'Covers manipulating the position, rotation, and scale of 3d objects using code, such as setting positions on x, y, and z axes, applying rotation and scale, and animating objects with specific values, achieving advanced effects and functionality.', 'duration': 211.837, 'highlights': ['The chapter covers manipulating the position, rotation, and scale of 3D objects using code, such as setting positions on X, Y, and Z axes, applying rotation and scale, and animating objects with specific values, achieving advanced effects and functionality.', 'The code demonstrates moving an object to the left and right on the screen by setting the position X to -2 and 2, respectively, showcasing the effect of position manipulation.', 'It also showcases the manipulation of the Y and Z positions, demonstrating the ability to move the object up and down on the Y axis and forward and backward on the Z axis, depicting the versatility of position manipulation.', "The shorthand method for defining position using 'set' with values 2, -2, and -2 is introduced, reducing code length and complexity for setting X, Y, and Z positions simultaneously.", 'The chapter illustrates rotation by rotating the object 45 degrees on the x-axis and scaling by changing the dimensions on the x, y, and z axes, providing insights into applying rotation and scale to 3D objects.', 'An animation effect is demonstrated by continuously rotating the object on the x-axis at a speed of 0.01, with the option to alter the speed, showcasing the capability to animate objects in a code-driven 3D environment.', 'The process of integrating a code editor for making adjustments without switching between the browser and editor is highlighted, emphasizing the convenience of using a code editor for iterative development and testing.', 'In addition, the chapter showcases the dynamic manipulation of rotation and scale using code, including rotating the object on the y-axis and incrementally adjusting the scale on the x-axis, showcasing dynamic and interactive manipulation of 3D objects.']}, {'end': 1812.55, 'start': 1632.993, 'title': 'Using gsap for animation', 'summary': 'Explains using gsap (greensock animation platform) timeline plugin to create complex animation sequences easily, including scaling, positioning, and rotation, with specific durations and delays to achieve smooth and desired effects.', 'duration': 179.557, 'highlights': ['Using GSAP (GreenSock Animation Platform) timeline plugin to create complex animation sequences easily GSAP (GreenSock Animation Platform) is used to simplify the creation of complex animation sequences, making it easier to achieve desired effects.', 'Including scaling, positioning, and rotation with specific durations and delays to achieve smooth and desired effects The tutorial demonstrates the use of GSAP for scaling, positioning, and rotation with specific durations and delays, ensuring smooth and desired animation effects.', 'Applying exponential ease out for smooth animation transition The use of exponential ease out is highlighted for achieving smooth animation transitions, enhancing the visual appeal of the animation.']}], 'duration': 392.856, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6oFvqLfRnsU/pics/6oFvqLfRnsU1419694.jpg', 'highlights': ['The chapter covers manipulating the position, rotation, and scale of 3D objects using code, achieving advanced effects and functionality.', 'Using GSAP (GreenSock Animation Platform) timeline plugin to create complex animation sequences easily, simplifying the creation of complex animation sequences.', 'Demonstrates moving an object to the left and right on the screen by setting the position X to -2 and 2, showcasing the effect of position manipulation.', 'Illustrates rotation by rotating the object 45 degrees on the x-axis and scaling by changing the dimensions on the x, y, and z axes, providing insights into applying rotation and scale to 3D objects.', 'An animation effect is demonstrated by continuously rotating the object on the x-axis at a speed of 0.01, showcasing the capability to animate objects in a code-driven 3D environment.', "The shorthand method for defining position using 'set' with values 2, -2, and -2 is introduced, reducing code length and complexity for setting X, Y, and Z positions simultaneously.", 'The process of integrating a code editor for making adjustments without switching between the browser and editor is highlighted, emphasizing the convenience of using a code editor for iterative development and testing.', 'Including scaling, positioning, and rotation with specific durations and delays to achieve smooth and desired effects, ensuring smooth and desired animation effects.']}, {'end': 2572.339, 'segs': [{'end': 1838.924, 'src': 'embed', 'start': 1812.59, 'weight': 4, 'content': [{'end': 1823.556, 'text': "So as you can see, you can use the GreenStock's timeline to really create very interesting animations on your 3D objects.", 'start': 1812.59, 'duration': 10.966}, {'end': 1831.44, 'text': 'Alright, so what would be really cool is if we could change the scale, position, or rotation based on some sort of user interaction.', 'start': 1824.236, 'duration': 7.204}, {'end': 1838.924, 'text': 'So if you already know some basic vanilla JavaScript, which hopefully you do, for handling events, then you know this should be rather easy.', 'start': 1832.08, 'duration': 6.844}], 'summary': "Greenstock's timeline enables creating 3d animations; user interaction can change scale, position, or rotation easily with basic vanilla javascript.", 'duration': 26.334, 'max_score': 1812.59, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6oFvqLfRnsU/pics/6oFvqLfRnsU1812590.jpg'}, {'end': 1935.611, 'src': 'embed', 'start': 1906.28, 'weight': 0, 'content': [{'end': 1909.403, 'text': 'And this allows you to determine where the mouse is located on the canvas.', 'start': 1906.28, 'duration': 3.123}, {'end': 1917.272, 'text': 'and determine which object should respond to your defined behavior based on where it clicked or where it hovered or whatever.', 'start': 1910.203, 'duration': 7.069}, {'end': 1925.683, 'text': "All right, so in order to do this, we have to first create a couple things, and I'll create these just underneath here.", 'start': 1917.292, 'duration': 8.391}, {'end': 1927.986, 'text': "We're going to say var raycaster.", 'start': 1925.703, 'duration': 2.283}, {'end': 1932.75, 'text': 'is new three dot ray caster.', 'start': 1929.429, 'duration': 3.321}, {'end': 1935.611, 'text': 'So we got a ray caster instance there.', 'start': 1933.81, 'duration': 1.801}], 'summary': 'Using raycaster to determine mouse location on canvas and object interaction.', 'duration': 29.331, 'max_score': 1906.28, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6oFvqLfRnsU/pics/6oFvqLfRnsU1906280.jpg'}, {'end': 2126.872, 'src': 'embed', 'start': 2099.24, 'weight': 1, 'content': [{'end': 2107.788, 'text': 'we want to change the material color or the color of the object based on whatever we defined as this add event listener as mouse move.', 'start': 2099.24, 'duration': 8.548}, {'end': 2111.372, 'text': 'So what we would do is we say intersects.', 'start': 2108.569, 'duration': 2.803}, {'end': 2115.441, 'text': 'I dot object.', 'start': 2113.298, 'duration': 2.143}, {'end': 2118.684, 'text': 'And you can console log the object to see everything that you can do.', 'start': 2115.881, 'duration': 2.803}, {'end': 2126.872, 'text': "There's a lot that material dot color, and then dot set, and we can put in our zero x, and then we'll just change it to FF 0000.", 'start': 2118.704, 'duration': 8.168}], 'summary': 'Change material color based on defined event listener', 'duration': 27.632, 'max_score': 2099.24, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6oFvqLfRnsU/pics/6oFvqLfRnsU2099240.jpg'}, {'end': 2163.963, 'src': 'heatmap', 'start': 2126.872, 'weight': 0.759, 'content': [{'end': 2127.433, 'text': "So let's save that.", 'start': 2126.872, 'duration': 0.561}, {'end': 2128.053, 'text': 'And there we go.', 'start': 2127.453, 'duration': 0.6}, {'end': 2141.283, 'text': 'So if I refresh once again, there we go.', 'start': 2137.239, 'duration': 4.044}, {'end': 2146.027, 'text': "So now we've been able to change some sort of behavior based on our mouse move.", 'start': 2141.363, 'duration': 4.664}, {'end': 2149.049, 'text': "What about, let's say, click.", 'start': 2146.407, 'duration': 2.642}, {'end': 2152.652, 'text': 'There we go.', 'start': 2152.212, 'duration': 0.44}, {'end': 2153.293, 'text': 'Clicked it.', 'start': 2153.033, 'duration': 0.26}, {'end': 2163.963, 'text': "Okay, so now let's move our GSAP timeline code into that mouse move or the hover event, essentially.", 'start': 2155.396, 'duration': 8.567}], 'summary': 'Implemented mouse move and click events to modify behavior. moved gsap timeline code into mouse move or hover event.', 'duration': 37.091, 'max_score': 2126.872, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6oFvqLfRnsU/pics/6oFvqLfRnsU2126872.jpg'}, {'end': 2312.216, 'src': 'embed', 'start': 2284.078, 'weight': 3, 'content': [{'end': 2291.061, 'text': "So first let's create a for loop that will generate 10 different cubes or squares in random places on the canvas.", 'start': 2284.078, 'duration': 6.983}, {'end': 2291.721, 'text': 'All right.', 'start': 2291.461, 'duration': 0.26}, {'end': 2293.202, 'text': "So let's get rid of all this.", 'start': 2291.761, 'duration': 1.441}, {'end': 2298.766, 'text': "And let's also uncomment this line and this line.", 'start': 2294.603, 'duration': 4.163}, {'end': 2302.168, 'text': "And we're going to create a for loop.", 'start': 2299.626, 'duration': 2.542}, {'end': 2303.83, 'text': "But first we're going to create a property.", 'start': 2302.208, 'duration': 1.622}, {'end': 2308.873, 'text': "So we'll call mesh X equals negative 10 just for a starting point.", 'start': 2304.03, 'duration': 4.843}, {'end': 2312.216, 'text': 'So for var I equals zero.', 'start': 2309.073, 'duration': 3.143}], 'summary': 'Creating a for loop to generate 10 cubes/squares on canvas.', 'duration': 28.138, 'max_score': 2284.078, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6oFvqLfRnsU/pics/6oFvqLfRnsU2284078.jpg'}, {'end': 2503.429, 'src': 'embed', 'start': 2473.846, 'weight': 2, 'content': [{'end': 2482.112, 'text': "If we were to remove this scene, add light, so we still just have our one, you'll see how that second light affected situations.", 'start': 2473.846, 'duration': 8.266}, {'end': 2487.757, 'text': "So it's a matter of understanding how to position your lights and adjust the intensity for the intended behavior.", 'start': 2482.573, 'duration': 5.184}, {'end': 2495.082, 'text': 'So if I add that back, save it, everything has become lit up a little bit better for us.', 'start': 2488.257, 'duration': 6.825}, {'end': 2497.744, 'text': "So now let's create an H1 element.", 'start': 2495.943, 'duration': 1.801}, {'end': 2503.429, 'text': "We'll say three JS rocks.", 'start': 2500.967, 'duration': 2.462}], 'summary': "Demonstrates adjusting light positions and intensity for improved illumination and adding an h1 element with the text 'three js rocks'.", 'duration': 29.583, 'max_score': 2473.846, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6oFvqLfRnsU/pics/6oFvqLfRnsU2473846.jpg'}], 'start': 1812.59, 'title': '3d animation techniques', 'summary': "Covers greenstock's timeline for creating 3d animations with vanilla javascript, implementing user interactions and using a ray caster, as well as creating interactive 3d animations with 3js, including changing object color and position, adding lights, and overlaying html elements on the 3d canvas, providing a comprehensive guide for beginners.", 'chapters': [{'end': 2099.24, 'start': 1812.59, 'title': "Greenstock's timeline for 3d animations", 'summary': "Explains how to use greenstock's timeline for creating animations on 3d objects, including implementing user interactions through vanilla javascript, such as pausing and playing animations on click events and using a ray caster to determine object responses based on mouse interactions.", 'duration': 286.65, 'highlights': ["The chapter explains how to use GreenStock's timeline for creating animations on 3D objects, including implementing user interactions through vanilla JavaScript, such as pausing and playing animations on click events and using a ray caster to determine object responses based on mouse interactions.", 'The tutorial demonstrates how to implement user interactions in JavaScript to control the animation by pausing and playing based on click events, providing practical examples and guidance for developers.', 'It explains the utilization of a ray caster in JavaScript for determining the location of the mouse on the canvas and specifying which object should respond to the defined behavior based on mouse clicks or hovers.', 'The tutorial provides detailed guidance on implementing a ray caster, including creating a raycaster instance, defining a mouse variable, and setting up event listeners for mouse movements and click events.', 'It discusses the process of defining a function for mouse movement events, preventing default behavior, obtaining mouse position, setting up the raycaster from the camera, and identifying intersected objects based on mouse position in the scene.']}, {'end': 2572.339, 'start': 2099.24, 'title': 'Interactive 3d animation with 3js', 'summary': 'Demonstrates how to create interactive 3d animations using 3js, including changing object color and position based on mouse events, creating multiple 3d objects, adding lights for better visualization, and overlaying html elements on the 3d canvas, enabling beginners to get started with 3js.', 'duration': 473.099, 'highlights': ['Demonstrates changing object color and position based on mouse events The chapter showcases changing the material color of an object based on the mouse move event and demonstrates how to change the position of an object based on the hover event.', 'Creating multiple 3D objects and randomizing their positions The tutorial illustrates creating a for loop to generate 15 cubes in random positions on the canvas, showcasing the process of adding 3D objects and randomizing their positions using math.random and mathematical operations.', 'Adding lights for better visualization and adjusting light intensity The chapter explains adding a new light source to the scene, adjusting its intensity and position to enhance the visualization of the 3D objects, and demonstrates the impact of light positioning and intensity on the rendered scene.', "Overlaying HTML elements on the 3D canvas The tutorial demonstrates overlaying an H1 element on the 3D canvas, using CSS to position it on top of the canvas, and showcases the random nature of the 3D objects' positions, creating a dynamic visual effect."]}], 'duration': 759.749, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/6oFvqLfRnsU/pics/6oFvqLfRnsU1812590.jpg', 'highlights': ['The tutorial provides detailed guidance on implementing a ray caster, including creating a raycaster instance, defining a mouse variable, and setting up event listeners for mouse movements and click events.', 'Demonstrates changing object color and position based on mouse events The chapter showcases changing the material color of an object based on the mouse move event and demonstrates how to change the position of an object based on the hover event.', 'Adding lights for better visualization and adjusting light intensity The chapter explains adding a new light source to the scene, adjusting its intensity and position to enhance the visualization of the 3D objects, and demonstrates the impact of light positioning and intensity on the rendered scene.', 'Creating multiple 3D objects and randomizing their positions The tutorial illustrates creating a for loop to generate 15 cubes in random positions on the canvas, showcasing the process of adding 3D objects and randomizing their positions using math.random and mathematical operations.', "Overlaying HTML elements on the 3D canvas The tutorial demonstrates overlaying an H1 element on the 3D canvas, using CSS to position it on top of the canvas, and showcases the random nature of the 3D objects' positions, creating a dynamic visual effect."]}], 'highlights': ['The WebGL renderer provides the most flexibility and power to create scenes with no limitations, making it the preferred choice for complex 3D scenes.', 'The tutorial covers manipulating the position, rotation, and scale of 3D objects using code, achieving advanced effects and functionality.', 'The chapter introduces the use of 3JS and GSAP for animating 3D objects', 'The tutorial provides detailed guidance on implementing a ray caster, including creating a raycaster instance, defining a mouse variable, and setting up event listeners for mouse movements and click events.', 'Request animation frame pauses when the user navigates to a different browser tab, conserving processing power and battery life, which is advantageous over using set interval.', 'Adding a point light with color, intensity, and distance settings improves the visual appearance of the 3D objects.', 'The process of integrating a code editor for making adjustments without switching between the browser and editor is highlighted, emphasizing the convenience of using a code editor for iterative development and testing.', 'The chapter covers setting up a project in Visual Studio Code for GSAP animation.']}