title
Getting Started with THREE.JS in 2021!

description
https://bit.ly/3vveoV6 - Become a frontend developer (50% off limited time!) -- Want to learn UI/UX? https://designcourse.com​ -- Check out Bruno's Three.js Course: https://bit.ly/3qU6elv (30% off for the first 15 students, using my code! Note, this is not a paid sponsorship.) -- Today, marks day #1 that we're going to begin learning Three.js together. I've always wanted to create immersive webgl experiences, but I never sat for long enough and gave it a go. Recently, that's changed -- and I'm going to share what I've learned with you in order to create some awesome examples. Three.js allows you to harness the power of WebGL in order to create 3D experiences in the browser. There's so much to learn, and today is just our first step. In the future, we're going to be creating more elaborate examples. The github repo for the threejs + webpack starter: https://github.com/designcourse/threejs-webpack-starter Bump map to convert to a normal map: https://coursetro.s3.amazonaws.com/height2.jpg 0:00 - Introduction 2:56 - An Awesome Offer 3:29 - Installing the Three.js Starter 5:30 - Folder Structure / Project Overview 7:22 - Three.js Boiler Plate Explained 13:10 - Starting our Project 43:09 - Adding Interactivity 51:00 - Adding Other HTML Elements 56:24 - Final Thoughts Let's get started! - - - - - - - - - - - - - - - - - - - - - - Subscribe for NEW VIDEOS! Learn UI/UX: 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 Designcourse.com. Come to my discord server or add me on social media and say Hi!

detail
{'title': 'Getting Started with THREE.JS in 2021!', 'heatmap': [{'end': 348.561, 'start': 305.544, 'weight': 1}, {'end': 1611.454, 'start': 1569.416, 'weight': 0.934}], 'summary': 'This tutorial covers the introduction to 3js, basics of web design, creating 3d spheres, object creation, texture manipulation, working with point lights, and interactive content creation, with detailed content spanning over 75 hours and a 50% off promotion for a comprehensive course on 3js.', 'chapters': [{'end': 147.212, 'segs': [{'end': 64.251, 'src': 'embed', 'start': 0.47, 'weight': 1, 'content': [{'end': 6.639, 'text': "Oh my god, today is so exciting because we're going to embark on learning 3JS.", 'start': 0.47, 'duration': 6.169}, {'end': 13.148, 'text': 'This right here is going to be our very first little project.', 'start': 6.859, 'duration': 6.289}, {'end': 15.171, 'text': 'Look at that.', 'start': 13.869, 'duration': 1.302}, {'end': 24.231, 'text': 'What is up, everybody? Gary Simon here.', 'start': 21.969, 'duration': 2.262}, {'end': 31.318, 'text': "Today, like I mentioned, we're going to really start taking a deep dive into 3JS, and that's starting today.", 'start': 24.792, 'duration': 6.526}, {'end': 36.382, 'text': 'Now, not every single video going forward will be about 3JS, but a lot of them will be.', 'start': 31.418, 'duration': 4.964}, {'end': 39.105, 'text': "And it's always something I really wanted to learn.", 'start': 36.782, 'duration': 2.323}, {'end': 47.457, 'text': 'And so just recently I started to learning 3JS primarily through a new course.', 'start': 39.645, 'duration': 7.812}, {'end': 52.545, 'text': 'And I told Bruno, who is the course creator, that I would give him a plug here.', 'start': 47.758, 'duration': 4.787}, {'end': 56.229, 'text': 'And this is his site for the course.', 'start': 53.186, 'duration': 3.043}, {'end': 58.43, 'text': 'I definitely recommend taking it.', 'start': 56.529, 'duration': 1.901}, {'end': 61.991, 'text': "I believe it's something like 30 hours or something like that.", 'start': 58.51, 'duration': 3.481}, {'end': 62.571, 'text': "I don't know.", 'start': 62.091, 'duration': 0.48}, {'end': 64.251, 'text': "Maybe I'm wrong.", 'start': 62.971, 'duration': 1.28}], 'summary': 'Embarking on learning 3js, starting with a 30-hour course, recommended by the creator.', 'duration': 63.781, 'max_score': 0.47, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pUgWfqWZWmM/pics/pUgWfqWZWmM470.jpg'}, {'end': 124.327, 'src': 'embed', 'start': 94.094, 'weight': 0, 'content': [{'end': 104.516, 'text': 'many of the sites that win awards are using 3js not all of them, but many of them, along with GSAP, which is the GreenSock animation platform.', 'start': 94.094, 'duration': 10.422}, {'end': 108.818, 'text': 'And just to show you, I mean, This is amazing.', 'start': 104.997, 'duration': 3.821}, {'end': 113.801, 'text': "This is a site that's made with 3JS.", 'start': 108.858, 'duration': 4.943}, {'end': 115.942, 'text': 'I mean, just take a look at this.', 'start': 114.081, 'duration': 1.861}, {'end': 122.726, 'text': 'Now, this is a user interface that people can use, and this is all made possible with 3JS.', 'start': 116.002, 'duration': 6.724}, {'end': 124.327, 'text': "Here's another one, Medal of Honor.", 'start': 122.766, 'duration': 1.561}], 'summary': 'Award-winning sites use 3js and gsap for animations, showcasing user interfaces made possible with 3js.', 'duration': 30.233, 'max_score': 94.094, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pUgWfqWZWmM/pics/pUgWfqWZWmM94094.jpg'}], 'start': 0.47, 'title': 'Introduction to 3js', 'summary': 'Introduces the 3js framework, emphasizing its potential for visually stunning user interfaces, its use in award-winning websites, and recommending a 30-hour in-depth course on 3js.', 'chapters': [{'end': 147.212, 'start': 0.47, 'title': 'Introduction to 3js', 'summary': 'Introduces the 3js framework, highlighting its potential for creating visually stunning user interfaces and its use in award-winning websites, along with a recommendation for a 30-hour in-depth course on 3js.', 'duration': 146.742, 'highlights': ['3JS is used in many award-winning websites, along with GSAP, the GreenSock animation platform. 3JS is utilized in award-winning websites, showcasing its industry relevance and impact.', 'Recommendation for a 30-hour in-depth course on 3JS. The speaker recommends a 30-hour in-depth course on 3JS, indicating the depth of learning available.', 'Introduction to 3JS and its potential for creating visually stunning user interfaces. The chapter introduces 3JS and its capability to create visually stunning user interfaces, indicating its potential for creative and engaging web design.']}], 'duration': 146.742, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pUgWfqWZWmM/pics/pUgWfqWZWmM470.jpg', 'highlights': ['3JS is used in many award-winning websites, along with GSAP, the GreenSock animation platform.', 'Introduction to 3JS and its potential for creating visually stunning user interfaces.', 'Recommendation for a 30-hour in-depth course on 3JS.']}, {'end': 816.606, 'segs': [{'end': 205.742, 'src': 'embed', 'start': 181.806, 'weight': 0, 'content': [{'end': 187.91, 'text': "But if you're not very great with front-end development, then you should definitely check out the front-end developer career path at scrimba.com.", 'start': 181.806, 'duration': 6.104}, {'end': 194.915, 'text': "They've recently launched their front-end development career path, which is a collection of courses that cover HTML, CSS, JavaScript, React and much,", 'start': 188.01, 'duration': 6.905}, {'end': 195.355, 'text': 'much more.', 'start': 194.915, 'duration': 0.44}, {'end': 195.775, 'text': 'as you see,', 'start': 195.355, 'duration': 0.42}, {'end': 199.177, 'text': "It's over 75 hours of awesome content.", 'start': 196.316, 'duration': 2.861}, {'end': 201.359, 'text': 'There are hundreds of interactive coding challenges,', 'start': 199.217, 'duration': 2.142}, {'end': 205.742, 'text': "and it's all geared towards helping you go from beginner to someone that's hireable as a front-end developer.", 'start': 201.359, 'duration': 4.383}], 'summary': 'Scrimba.com offers a front-end developer career path with over 75 hours of content, including html, css, javascript, and react, to help beginners become hireable developers.', 'duration': 23.936, 'max_score': 181.806, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pUgWfqWZWmM/pics/pUgWfqWZWmM181806.jpg'}, {'end': 263.591, 'src': 'embed', 'start': 236.359, 'weight': 1, 'content': [{'end': 250.385, 'text': "And it's just going to help you get up and running with WebKit and 3JS and just a quick boilerplate code because a lot of it is very boilerplate-ish.", 'start': 236.359, 'duration': 14.026}, {'end': 252.366, 'text': "That's definitely not a word.", 'start': 250.465, 'duration': 1.901}, {'end': 257.748, 'text': "And so I'm going to show you how to use this real quick if you've never cloned a repo.", 'start': 253.206, 'duration': 4.542}, {'end': 259.589, 'text': 'You just want to come here.', 'start': 258.629, 'duration': 0.96}, {'end': 261.23, 'text': 'This is in the YouTube description.', 'start': 259.608, 'duration': 1.622}, {'end': 263.591, 'text': "And we're going to come over here in code.", 'start': 261.79, 'duration': 1.801}], 'summary': 'The transcript provides a quick guide on using webkit and 3js to get up and running with boilerplate code for a repo.', 'duration': 27.232, 'max_score': 236.359, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pUgWfqWZWmM/pics/pUgWfqWZWmM236359.jpg'}, {'end': 348.561, 'src': 'heatmap', 'start': 305.544, 'weight': 1, 'content': [{'end': 314.029, 'text': "so we're going to cd into that folder three js, dc one, and then we run npm i for install.", 'start': 305.544, 'duration': 8.485}, {'end': 318.552, 'text': "of course, you're gonna have to have the node js installed along with the node package manager.", 'start': 314.029, 'duration': 4.523}, {'end': 323.154, 'text': "um, you can google it if you don't know what that is, because then you'll be able to run these commands.", 'start': 318.552, 'duration': 4.602}, {'end': 326.917, 'text': 'then, finally, when you want to start it up npm, run dev.', 'start': 323.154, 'duration': 3.763}, {'end': 329.267, 'text': 'we do this.', 'start': 328.146, 'duration': 1.121}, {'end': 335.612, 'text': "it's going to start a server right here, it's going to load this up and there we go.", 'start': 329.267, 'duration': 6.345}, {'end': 340.975, 'text': "we have a torus, a ring that's floating and stuff.", 'start': 335.612, 'duration': 5.363}, {'end': 344.938, 'text': 'now, the cool thing about this starter is that it gets a lot of the code.', 'start': 340.975, 'duration': 3.963}, {'end': 348.561, 'text': "like i said, it's very boiler, boilerplate-ish code.", 'start': 344.938, 'duration': 3.623}], 'summary': "Install three.js by running 'npm i' and start the server with 'npm run dev' to visualize a floating ring.", 'duration': 43.017, 'max_score': 305.544, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pUgWfqWZWmM/pics/pUgWfqWZWmM305544.jpg'}, {'end': 616.383, 'src': 'embed', 'start': 573.7, 'weight': 2, 'content': [{'end': 580.583, 'text': 'So you can think of it as a four step process in order to actually get something onto your canvas.', 'start': 573.7, 'duration': 6.883}, {'end': 582.944, 'text': 'First you create the geometry.', 'start': 581.003, 'duration': 1.941}, {'end': 583.905, 'text': "that's your object.", 'start': 582.944, 'duration': 0.961}, {'end': 591.288, 'text': 'you create the skin for it, your material, and then you combine them together as a mesh, and then you add it to the scene.', 'start': 584.485, 'duration': 6.803}, {'end': 595.37, 'text': "That's all it is, all right? Next up, we have lighting.", 'start': 591.928, 'duration': 3.442}, {'end': 599.292, 'text': "So there's a lot of different, oh, by the way, I should mention this.", 'start': 596.37, 'duration': 2.922}, {'end': 605.716, 'text': "When it comes to objects and geometry, there's a lot of different types of built-in geometry that you can choose from.", 'start': 599.972, 'duration': 5.744}, {'end': 609.638, 'text': 'When it comes to 3JS, you can create cubes, rectangles, spheres.', 'start': 605.756, 'duration': 3.882}, {'end': 616.383, 'text': "There's a lot of them and they're all available in the really well set up documentation for 3JS.", 'start': 610.059, 'duration': 6.324}], 'summary': 'Process involves 4 steps: create geometry, skin, combine as mesh, add to scene. 3js offers various built-in geometries like cubes, rectangles, and spheres.', 'duration': 42.683, 'max_score': 573.7, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pUgWfqWZWmM/pics/pUgWfqWZWmM573700.jpg'}, {'end': 729.889, 'src': 'embed', 'start': 703.313, 'weight': 4, 'content': [{'end': 707.156, 'text': "Again, I'm not going to go too much into detail about the absolute basics here.", 'start': 703.313, 'duration': 3.843}, {'end': 710.958, 'text': 'We could set the camera position as you can see in XYZ.', 'start': 707.996, 'duration': 2.962}, {'end': 713.16, 'text': 'See and add your camera.', 'start': 712.179, 'duration': 0.981}, {'end': 714.941, 'text': 'Then you also have to have a renderer.', 'start': 713.52, 'duration': 1.421}, {'end': 718.783, 'text': "And again, this is one of those things that's kind of set it and forget it.", 'start': 716.041, 'duration': 2.742}, {'end': 729.889, 'text': 'So the renderer takes in the canvas right here and then at the bottom we have uh, the animation portion.', 'start': 719.304, 'duration': 10.585}], 'summary': 'Setting camera position in xyz, adding renderer, and handling animation.', 'duration': 26.576, 'max_score': 703.313, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pUgWfqWZWmM/pics/pUgWfqWZWmM703313.jpg'}], 'start': 147.212, 'title': '3js basics and teaching for web design', 'summary': 'Covers teaching three.js for web design with over 75 hours of content and 50% off promotion, while also focusing on setting up the 3js project including creating a scene, adding objects, materials, lighting, and basics of cameras and rendering for animation.', 'chapters': [{'end': 361.268, 'start': 147.212, 'title': 'Teaching three.js for web design', 'summary': 'Focuses on teaching three.js for web design, offering a 3js playlist, and promoting a front-end developer career path at scrimba.com, which includes over 75 hours of content and 50% off. it also provides a quick setup for 3js with a public repository and demonstrates cloning the repository and running npm commands.', 'duration': 214.056, 'highlights': ['The chapter emphasizes teaching Three.js for web design and not for creating games, promoting a front-end developer career path at scrimba.com that covers HTML, CSS, JavaScript, React, and more, with over 75 hours of content and 50% off.', 'The speaker provides a public repository for a quick setup of 3JS, including instructions on cloning the repository and running npm commands for installation and starting the server.', 'The detailed highlight provides step-by-step instructions on cloning the public repository for 3JS, including running npm commands for installation and starting the server.']}, {'end': 816.606, 'start': 361.268, 'title': '3js basics: setting up canvas and elements', 'summary': 'Covers setting up the 3js project with a focus on creating a scene, adding objects, materials, and lighting, along with the basics of cameras and rendering for animation.', 'duration': 455.338, 'highlights': ["Setting up the Scene, Objects, Materials, and Meshes The process involves creating a scene, defining objects as geometry, materials as 'clothing', and combining them as mesh before adding to the scene, forming a four-step process.", 'Types of Geometry, Materials, and Lights in 3JS 3JS offers various built-in geometries like cubes, rectangles, spheres, along with diverse materials and types of lights including point lights, providing extensive options for customization.', 'Camera and Renderer Setup for Animation The chapter explains the need for setting up a camera, including options like perspective and orthographic, along with the renderer, which is necessary for creating the animation for the project.']}], 'duration': 669.394, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pUgWfqWZWmM/pics/pUgWfqWZWmM147212.jpg', 'highlights': ['Over 75 hours of content and 50% off promotion for teaching Three.js at scrimba.com.', 'Public repository provided for quick setup of 3JS with step-by-step instructions.', 'Creating a scene, defining objects, materials, and adding to the scene in 4 steps.', '3JS offers various built-in geometries, materials, and types of lights for customization.', 'Explanation of setting up camera options and renderer for creating animation.']}, {'end': 1217.027, 'segs': [{'end': 870.618, 'src': 'embed', 'start': 844.19, 'weight': 2, 'content': [{'end': 852.833, 'text': "you can name this whatever you want, and we're going to say new three sphere or buffer geometry, all right?", 'start': 844.19, 'duration': 8.643}, {'end': 864.177, 'text': 'And it takes in a few different properties and this would be a good point here to get into the habit of looking at the three JS documentation.', 'start': 853.673, 'duration': 10.504}, {'end': 865.338, 'text': "So if there's a.", 'start': 864.217, 'duration': 1.121}, {'end': 870.618, 'text': 'sphere buffer geometry and you have no clue what it is.', 'start': 867.515, 'duration': 3.103}], 'summary': 'Introducing a new three.js sphere buffer geometry with different properties.', 'duration': 26.428, 'max_score': 844.19, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pUgWfqWZWmM/pics/pUgWfqWZWmM844190.jpg'}, {'end': 935.428, 'src': 'embed', 'start': 912.224, 'weight': 3, 'content': [{'end': 919.08, 'text': "but because we're only gonna be dealing with this project with just one sphere, it doesn't really matter all that much, All right,", 'start': 912.224, 'duration': 6.856}, {'end': 920.141, 'text': 'and of course you could play with these.', 'start': 919.08, 'duration': 1.061}, {'end': 922.822, 'text': 'And by the way, this is that dat GUI debug panel.', 'start': 920.161, 'duration': 2.661}, {'end': 926.984, 'text': "We're going to be able to create some of our own and control exactly as we want.", 'start': 922.902, 'duration': 4.082}, {'end': 935.428, 'text': "All right, so we're going to put 0.5 and then also 64 by 64 for the different segments.", 'start': 928.184, 'duration': 7.244}], 'summary': 'Using one sphere, adjust settings to 0.5 and 64 by 64 segments.', 'duration': 23.204, 'max_score': 912.224, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pUgWfqWZWmM/pics/pUgWfqWZWmM912224.jpg'}, {'end': 1001.05, 'src': 'embed', 'start': 962.583, 'weight': 0, 'content': [{'end': 965.264, 'text': 'So there are a lot of different type of materials.', 'start': 962.583, 'duration': 2.681}, {'end': 967.645, 'text': 'Like this is a mesh basic material.', 'start': 965.304, 'duration': 2.341}, {'end': 970.847, 'text': 'We can set the color as you can see by material.color.', 'start': 968.025, 'duration': 2.822}, {'end': 972.428, 'text': 'Like this is red.', 'start': 971.287, 'duration': 1.141}, {'end': 979.951, 'text': 'We can go 00FF00 here, make it green.', 'start': 973.988, 'duration': 5.963}, {'end': 981.714, 'text': 'Not that exciting.', 'start': 980.812, 'duration': 0.902}, {'end': 988.402, 'text': "We're gonna use what's called the mesh standard material.", 'start': 983.356, 'duration': 5.046}, {'end': 1001.05, 'text': 'And this is a really powerful type of material that really allows you to, convey the real world as much as possible, if that makes sense.', 'start': 988.582, 'duration': 12.468}], 'summary': 'Discussion on different materials in 3d modeling, including mesh basic and mesh standard materials.', 'duration': 38.467, 'max_score': 962.583, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pUgWfqWZWmM/pics/pUgWfqWZWmM962583.jpg'}, {'end': 1045.3, 'src': 'embed', 'start': 1014.875, 'weight': 1, 'content': [{'end': 1022.118, 'text': 'All right, so PBR, physically based rendering, and this is what the mesh standard material gives us.', 'start': 1014.875, 'duration': 7.243}, {'end': 1025.579, 'text': 'Look at all these different properties that it has.', 'start': 1022.738, 'duration': 2.841}, {'end': 1045.3, 'text': 'quite a bit, and one of the great ways to be able to experiment with what these properties do is by using the dat.gui little debug control panel,', 'start': 1027.037, 'duration': 18.263}], 'summary': 'Pbr enables a wide range of material properties to be manipulated for experimentation using dat.gui control panel.', 'duration': 30.425, 'max_score': 1014.875, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pUgWfqWZWmM/pics/pUgWfqWZWmM1014875.jpg'}, {'end': 1194.25, 'src': 'embed', 'start': 1164.72, 'weight': 4, 'content': [{'end': 1176.389, 'text': 'but I kinda just wanted to do it within the browser is we can make the background of Three.js transparent and then we can see whatever we want based on the website background.', 'start': 1164.72, 'duration': 11.669}, {'end': 1181.213, 'text': 'So what we can do is, where we do that is in the renderer.', 'start': 1177.43, 'duration': 3.783}, {'end': 1183.695, 'text': 'So where is the renderer? Right here.', 'start': 1181.833, 'duration': 1.862}, {'end': 1187.718, 'text': 'We put it in the options, we put alpha true.', 'start': 1184.095, 'duration': 3.623}, {'end': 1194.25, 'text': 'We save and now we can see our black ball.', 'start': 1189.107, 'duration': 5.143}], 'summary': "Using three.js, the renderer's alpha setting was changed to true, allowing a transparent background and enabling the display of objects over the website background.", 'duration': 29.53, 'max_score': 1164.72, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pUgWfqWZWmM/pics/pUgWfqWZWmM1164720.jpg'}], 'start': 817.266, 'title': 'Creating 3d spheres in three.js', 'summary': 'Covers creating 3d spheres in three.js, using three sphere buffer geometry, adjusting segments and size, applying mesh standard material with properties like color, roughness, metalness, and experimenting with dat.gui debug panel for appearance control.', 'chapters': [{'end': 870.618, 'start': 817.266, 'title': 'Creating sphere in 3js', 'summary': 'Discusses creating a sphere in 3js using the `three` library, emphasizing the use of `three sphere buffer geometry` and the importance of referring to the 3js documentation for guidance.', 'duration': 53.352, 'highlights': ['The chapter emphasizes the use of `three sphere buffer geometry` for creating a sphere in 3JS.', 'It mentions the importance of referring to the 3JS documentation for guidance.']}, {'end': 1217.027, 'start': 870.618, 'title': 'Creating 3d sphere and applying material', 'summary': 'Demonstrates creating a 3d sphere using three.js, adjusting its segments and size, applying mesh standard material with properties like color, roughness, metalness, and experimenting with dat.gui debug panel to control the appearance.', 'duration': 346.409, 'highlights': ['Creating a 3D sphere with 64x64 segments and size 0.5 The speaker specifies the dimensions and segments for the sphere, using a size of 0.5 and 64x64 segments to control its appearance.', 'Using mesh standard material with properties like color, roughness, and metalness The speaker demonstrates the use of mesh standard material and its properties such as color, roughness, and metalness to convey realistic appearances in the 3D object.', 'Experimenting with dat.gui debug panel to control material properties The speaker emphasizes using the dat.gui debug panel to experiment and control material properties, allowing for real-time adjustments and understanding of the visual impact.', 'Making Three.js background transparent and adjusting CSS background to view the 3D object The speaker explains the process of making the Three.js background transparent and adjusting the CSS background to view the 3D object against a specific color, enhancing the visual presentation.']}], 'duration': 399.761, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pUgWfqWZWmM/pics/pUgWfqWZWmM817266.jpg', 'highlights': ['The speaker demonstrates the use of mesh standard material and its properties such as color, roughness, and metalness to convey realistic appearances in the 3D object.', 'The speaker emphasizes using the dat.gui debug panel to experiment and control material properties, allowing for real-time adjustments and understanding of the visual impact.', 'The chapter emphasizes the use of `three sphere buffer geometry` for creating a sphere in 3JS.', 'The speaker specifies the dimensions and segments for the sphere, using a size of 0.5 and 64x64 segments to control its appearance.', 'The speaker explains the process of making the Three.js background transparent and adjusting the CSS background to view the 3D object against a specific color, enhancing the visual presentation.', 'It mentions the importance of referring to the 3JS documentation for guidance.']}, {'end': 1892.517, 'segs': [{'end': 1306.957, 'src': 'embed', 'start': 1284.226, 'weight': 1, 'content': [{'end': 1292.688, 'text': "And bump maps are grayscale, but it's the same thing, except normal maps provide you with more detail.", 'start': 1284.226, 'duration': 8.462}, {'end': 1295.329, 'text': 'Not you, it provides whatever.', 'start': 1292.788, 'duration': 2.541}, {'end': 1298.469, 'text': "And by the way, normal maps aren't just specific to 3JS.", 'start': 1295.349, 'duration': 3.12}, {'end': 1300.71, 'text': 'This is a 3D terminology and concept.', 'start': 1298.489, 'duration': 2.221}, {'end': 1306.957, 'text': "But what it means is basically, if we apply this, it's just like a picture, like a PNG file.", 'start': 1301.25, 'duration': 5.707}], 'summary': 'Normal maps provide more detail in 3d graphics.', 'duration': 22.731, 'max_score': 1284.226, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pUgWfqWZWmM/pics/pUgWfqWZWmM1284226.jpg'}, {'end': 1390.961, 'src': 'embed', 'start': 1362.508, 'weight': 0, 'content': [{'end': 1369.39, 'text': "So we're going to take that pattern and we're going to convert it from the gray scale to a normal map that looks like this.", 'start': 1362.508, 'duration': 6.882}, {'end': 1370.147, 'text': 'All right.', 'start': 1369.827, 'duration': 0.32}, {'end': 1372.409, 'text': "so what I've done real quickly.", 'start': 1370.147, 'duration': 2.262}, {'end': 1384.256, 'text': "we're going to right-click here in Static and we're going to Reveal in File Explorer and we're going to go in there and we're going to create a Textures folder and I'm going to paste in a file.", 'start': 1372.409, 'duration': 11.847}, {'end': 1390.961, 'text': "Now, I'm going to try to remember to link this directly in the YouTube description so you can follow along and do the same thing.", 'start': 1384.416, 'duration': 6.545}], 'summary': 'Converting grayscale pattern to normal map for textures.', 'duration': 28.453, 'max_score': 1362.508, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pUgWfqWZWmM/pics/pUgWfqWZWmM1362508.jpg'}, {'end': 1517.472, 'src': 'embed', 'start': 1492.184, 'weight': 4, 'content': [{'end': 1497.027, 'text': "But first, before we do that, we're gonna use what's called a texture loader.", 'start': 1492.184, 'duration': 4.843}, {'end': 1498.088, 'text': 'All right.', 'start': 1497.808, 'duration': 0.28}, {'end': 1502.729, 'text': "So there's a lot of different type of loaders in 3JS and there's a loader for textures.", 'start': 1498.168, 'duration': 4.561}, {'end': 1510.03, 'text': 'And you want to use these texture loaders, especially when you have projects that have a lot of different assets,', 'start': 1503.109, 'duration': 6.921}, {'end': 1517.472, 'text': "because then you'll be able to create like a little loading thing and then like a loading graphic, like a lot of those 3JS sites and examples have.", 'start': 1510.03, 'duration': 7.442}], 'summary': 'Using a texture loader in 3js is beneficial for projects with multiple assets, allowing for loading graphics and smoother performance.', 'duration': 25.288, 'max_score': 1492.184, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pUgWfqWZWmM/pics/pUgWfqWZWmM1492184.jpg'}, {'end': 1611.454, 'src': 'heatmap', 'start': 1569.416, 'weight': 0.934, 'content': [{'end': 1574.678, 'text': "So it's going to be in textures forward slash normal map dot png.", 'start': 1569.416, 'duration': 5.262}, {'end': 1580.379, 'text': 'All right, so now of course we have to reference that under our materials.', 'start': 1576.298, 'duration': 4.081}, {'end': 1584.08, 'text': "So we're going to say material dot loader.", 'start': 1581.239, 'duration': 2.841}, {'end': 1589.476, 'text': 'normal map equals normal texture.', 'start': 1585.009, 'duration': 4.467}, {'end': 1593.923, 'text': 'All right, let me make sure I have that all well and good.', 'start': 1589.496, 'duration': 4.427}, {'end': 1598.571, 'text': "All right, so let's save this and see what ends up happening.", 'start': 1593.943, 'duration': 4.628}, {'end': 1601.632, 'text': 'All right, interesting.', 'start': 1600.612, 'duration': 1.02}, {'end': 1603.973, 'text': 'So we have.', 'start': 1601.752, 'duration': 2.221}, {'end': 1605.813, 'text': "it's kind of hard to see what's happening, right?", 'start': 1603.973, 'duration': 1.84}, {'end': 1611.454, 'text': "I mean we have this white light and there's something cool happening, but we can't really tell what.", 'start': 1605.873, 'duration': 5.581}], 'summary': 'Adding a normal map to the material loader, resulting in unclear visual effect.', 'duration': 42.038, 'max_score': 1569.416, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pUgWfqWZWmM/pics/pUgWfqWZWmM1569416.jpg'}, {'end': 1656.257, 'src': 'embed', 'start': 1628.237, 'weight': 2, 'content': [{'end': 1634.642, 'text': "if you don't use something like that with those easy to use, you know, graphic user interface controls like the sliders and stuff try.", 'start': 1628.237, 'duration': 6.405}, {'end': 1639.745, 'text': 'you have to then just rely on typing in values and going back and forth.', 'start': 1634.642, 'duration': 5.103}, {'end': 1641.066, 'text': "it's a crap way.", 'start': 1639.745, 'duration': 1.321}, {'end': 1651.033, 'text': 'so what we want to do is we want to be able to use dat.gui to start positioning things all right.', 'start': 1641.066, 'duration': 9.967}, {'end': 1656.257, 'text': "so before we do that, let's add another light.", 'start': 1651.033, 'duration': 5.224}], 'summary': 'Using dat.gui for easy positioning of elements, adding another light.', 'duration': 28.02, 'max_score': 1628.237, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pUgWfqWZWmM/pics/pUgWfqWZWmM1628237.jpg'}], 'start': 1225.711, 'title': '3d object creation and texture manipulation in 3js', 'summary': 'Covers creating 3d objects with normal maps for added texture and depth, as well as using texture loaders and dat.gui for interactive control, including precision adjustments with minimum, maximum, and step values.', 'chapters': [{'end': 1492.124, 'start': 1225.711, 'title': 'Creating 3d objects with normal maps', 'summary': 'Introduces the concept of normal maps in 3d modeling, explaining how they can be used to add 3d texture and depth to objects, and demonstrates the process of converting grayscale textures to normal maps using a generator tool.', 'duration': 266.413, 'highlights': ['Explaining the concept of normal maps and their use in 3D modeling. Normal maps add 3D texture and depth to objects without creating actual vertices, and are not specific to 3JS but a 3D terminology and concept.', 'Demonstrating the process of converting grayscale textures to normal maps using a generator tool. Using a normal map generator tool to convert a grayscale pattern to a normal map, adjusting options like blurring and strength, and downloading the generated normal map.']}, {'end': 1892.517, 'start': 1492.184, 'title': 'Using texture loader and dat.gui in 3js', 'summary': 'Introduces the use of texture loaders in 3js for handling various assets and demonstrates the implementation of dat.gui for interactive control of light positions, with a focus on the red light, including the use of minimum, maximum, and step values for precision adjustments.', 'duration': 400.333, 'highlights': ['Implementing texture loader to handle various assets in 3JS projects The chapter emphasizes the importance of using texture loaders in 3JS for projects with multiple assets to enable proper loading and create loading graphics, enhancing the user experience.', 'Introduction and utilization of Dat.GUI for interactive control of light positions The use of Dat.GUI is demonstrated for the interactive control of light positions, providing a convenient and user-friendly way to adjust properties, such as the position of the red light, leading to enhanced scene setup.', 'Incorporating minimum, maximum, and step values for precise adjustments in Dat.GUI The chapter explains the incorporation of minimum and maximum values, such as -3 and 3, and step values, like 0.01, within Dat.GUI for precision adjustments, offering enhanced control over light position settings.']}], 'duration': 666.806, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pUgWfqWZWmM/pics/pUgWfqWZWmM1225711.jpg', 'highlights': ['Demonstrating the process of converting grayscale textures to normal maps using a generator tool. Using a normal map generator tool to convert a grayscale pattern to a normal map, adjusting options like blurring and strength, and downloading the generated normal map.', 'Explaining the concept of normal maps and their use in 3D modeling. Normal maps add 3D texture and depth to objects without creating actual vertices, and are not specific to 3JS but a 3D terminology and concept.', 'Introduction and utilization of Dat.GUI for interactive control of light positions The use of Dat.GUI is demonstrated for the interactive control of light positions, providing a convenient and user-friendly way to adjust properties, such as the position of the red light, leading to enhanced scene setup.', 'Incorporating minimum, maximum, and step values for precise adjustments in Dat.GUI The chapter explains the incorporation of minimum and maximum values, such as -3 and 3, and step values, like 0.01, within Dat.GUI for precision adjustments, offering enhanced control over light position settings.', 'Implementing texture loader to handle various assets in 3JS projects The chapter emphasizes the importance of using texture loaders in 3JS for projects with multiple assets to enable proper loading and create loading graphics, enhancing the user experience.']}, {'end': 2515.698, 'segs': [{'end': 2013.505, 'src': 'embed', 'start': 1979.121, 'weight': 1, 'content': [{'end': 1983.926, 'text': "And so there's different helpers based on the type of light that you have, and there is a point light helper.", 'start': 1979.121, 'duration': 4.805}, {'end': 1989.551, 'text': "So what we'll do is I create that real quickly.", 'start': 1985.149, 'duration': 4.402}, {'end': 1994.133, 'text': "So let's go ahead and put that right here.", 'start': 1990.331, 'duration': 3.802}, {'end': 2001.496, 'text': 'So const point light helper equals new three point light helper.', 'start': 1994.633, 'duration': 6.863}, {'end': 2007.118, 'text': "And we're going to pass in our point light two.", 'start': 2003.857, 'duration': 3.261}, {'end': 2011.523, 'text': "and we're also gonna specify one here.", 'start': 2009.282, 'duration': 2.241}, {'end': 2013.505, 'text': 'I forget what that second parameter is.', 'start': 2011.543, 'duration': 1.962}], 'summary': 'Different helpers for different light types. creating a point light helper.', 'duration': 34.384, 'max_score': 1979.121, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pUgWfqWZWmM/pics/pUgWfqWZWmM1979121.jpg'}, {'end': 2123.987, 'src': 'embed', 'start': 2089.317, 'weight': 0, 'content': [{'end': 2091.458, 'text': 'So all these values now we can plug in.', 'start': 2089.317, 'duration': 2.141}, {'end': 2099.701, 'text': "So I, when we're setting the position of point light to appear, this is the X, Y, and Z.", 'start': 2092.299, 'duration': 7.402}, {'end': 2102.182, 'text': 'Make sure you put, you know, not Y then X.', 'start': 2099.701, 'duration': 2.481}, {'end': 2118.562, 'text': "So it's negative 1.86 on the first, on the second, It is, on the Y it's one and then on Z it's negative 1.65.", 'start': 2102.182, 'duration': 16.38}, {'end': 2123.987, 'text': 'Now when we save this, oh and the intensity we agreed is just gonna be 10.', 'start': 2118.562, 'duration': 5.425}], 'summary': 'Set point light position to x: -1.86, y: 1, z: -1.65 with intensity 10.', 'duration': 34.67, 'max_score': 2089.317, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pUgWfqWZWmM/pics/pUgWfqWZWmM2089317.jpg'}, {'end': 2182.437, 'src': 'embed', 'start': 2150.478, 'weight': 2, 'content': [{'end': 2151.378, 'text': "Let's get rid of this.", 'start': 2150.478, 'duration': 0.9}, {'end': 2156.62, 'text': 'So what we can do is just copy from here all the way down.', 'start': 2152.298, 'duration': 4.322}, {'end': 2162.852, 'text': 'We can just do like light one, or light two rather.', 'start': 2158.991, 'duration': 3.861}, {'end': 2164.472, 'text': 'This will be light three.', 'start': 2163.632, 'duration': 0.84}, {'end': 2170.434, 'text': 'All right, so now we have a bunch of things to change.', 'start': 2164.492, 'duration': 5.942}, {'end': 2171.654, 'text': 'Point light three.', 'start': 2170.874, 'duration': 0.78}, {'end': 2177.956, 'text': "And for this one, we're going to, we're not gonna change the color.", 'start': 2174.275, 'duration': 3.681}, {'end': 2182.437, 'text': "We're gonna use dat.gui to experiment with the color, which is really awesome as well.", 'start': 2178.576, 'duration': 3.861}], 'summary': 'Using dat.gui to experiment with color for light three.', 'duration': 31.959, 'max_score': 2150.478, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pUgWfqWZWmM/pics/pUgWfqWZWmM2150478.jpg'}, {'end': 2289.101, 'src': 'embed', 'start': 2249.551, 'weight': 3, 'content': [{'end': 2255.795, 'text': 'All right, so now instead of referencing GUI, we reference light1 right here.', 'start': 2249.551, 'duration': 6.244}, {'end': 2263.211, 'text': 'Now that first light is gonna be in its own little folder group that we can now extend.', 'start': 2259.127, 'duration': 4.084}, {'end': 2267.997, 'text': "Now let's do the same thing real quick over here.", 'start': 2264.012, 'duration': 3.985}, {'end': 2274.524, 'text': 'This is gonna be light two.', 'start': 2273.443, 'duration': 1.081}, {'end': 2279.869, 'text': 'Oops There we go.', 'start': 2278.288, 'duration': 1.581}, {'end': 2284.895, 'text': 'So now, we have both of our lights here that we can control.', 'start': 2280.33, 'duration': 4.565}, {'end': 2289.101, 'text': "Let's also give ourselves the ability to change the color.", 'start': 2285.717, 'duration': 3.384}], 'summary': 'Referenced light1 and light2 in gui, enabling control of both lights and color change.', 'duration': 39.55, 'max_score': 2249.551, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pUgWfqWZWmM/pics/pUgWfqWZWmM2249551.jpg'}, {'end': 2474.635, 'src': 'embed', 'start': 2442.687, 'weight': 5, 'content': [{'end': 2448.911, 'text': "So that's how you can use the debugger to really help set up everything.", 'start': 2442.687, 'duration': 6.224}, {'end': 2453.374, 'text': 'Not just lights, of course, but all the various properties that you have access to.', 'start': 2449.812, 'duration': 3.562}, {'end': 2455.476, 'text': 'So this looks really cool.', 'start': 2454.255, 'duration': 1.221}, {'end': 2455.996, 'text': 'I like it.', 'start': 2455.556, 'duration': 0.44}, {'end': 2461.108, 'text': "let's go ahead now and kind of switch things up.", 'start': 2458.126, 'duration': 2.982}, {'end': 2462.689, 'text': "we don't need our helpers anymore.", 'start': 2461.108, 'duration': 1.581}, {'end': 2473.174, 'text': 'so what we can do is we can take this and comment those out.', 'start': 2462.689, 'duration': 10.485}, {'end': 2474.635, 'text': 'save it, they should go away.', 'start': 2473.174, 'duration': 1.461}], 'summary': 'Using the debugger to set up properties and remove helpers.', 'duration': 31.948, 'max_score': 2442.687, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pUgWfqWZWmM/pics/pUgWfqWZWmM2442687.jpg'}], 'start': 1892.637, 'title': 'Working with point lights and helpers and using dat.gui for 3js debugging', 'summary': 'Discusses positioning point lights in a 3d space, adjusting intensity, and visualizing their location. it also details using dat.gui for controlling lights and colors in 3js, including creating folders for individual lights and changing colors.', 'chapters': [{'end': 2213.812, 'start': 1892.637, 'title': 'Working with point lights and helpers', 'summary': 'Discusses the process of positioning point lights in a 3d space, adjusting their intensity, and visualizing their location using light helpers, with a focus on replicating and modifying code for multiple point lights.', 'duration': 321.175, 'highlights': ['Positioning and adjusting intensity of point lights The process involves setting the X, Y, and Z coordinates for the point lights, with specific examples such as X at negative six and intensity ranging from zero to 10.', 'Visualizing point light location with helpers The use of light helpers, such as the point light helper, to visualize and adjust the position and scale of point lights in the 3D space.', 'Replicating and modifying code for multiple point lights The transcript demonstrates the process of replicating and modifying code to create and customize multiple point lights, as well as utilizing dat.gui for color experimentation.']}, {'end': 2515.698, 'start': 2214.352, 'title': 'Using dat.gui for 3js debugging', 'summary': 'Details the use of dat.gui for controlling lights and colors in 3js, including creating folders for individual lights, changing colors using dat.gui, and utilizing the debugger for setting up various properties.', 'duration': 301.346, 'highlights': ["Creating folders for individual lights Creating folders with dat.gui for individual lights, such as 'light1' and 'light2', to control each light separately.", 'Changing colors using dat.gui Demonstrating the process of changing colors using dat.gui, including adding a color property and utilizing addColor method to control the color of the lights.', 'Utilizing the debugger for setting up various properties Explaining how to use the debugger to set up not just lights, but also various properties in 3JS, and the ability to hide or collapse elements as needed.']}], 'duration': 623.061, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pUgWfqWZWmM/pics/pUgWfqWZWmM1892637.jpg', 'highlights': ['Positioning and adjusting intensity of point lights The process involves setting the X, Y, and Z coordinates for the point lights, with specific examples such as X at negative six and intensity ranging from zero to 10.', 'Visualizing point light location with helpers The use of light helpers, such as the point light helper, to visualize and adjust the position and scale of point lights in the 3D space.', 'Replicating and modifying code for multiple point lights The transcript demonstrates the process of replicating and modifying code to create and customize multiple point lights, as well as utilizing dat.gui for color experimentation.', "Creating folders for individual lights Creating folders with dat.gui for individual lights, such as 'light1' and 'light2', to control each light separately.", 'Changing colors using dat.gui Demonstrating the process of changing colors using dat.gui, including adding a color property and utilizing addColor method to control the color of the lights.', 'Utilizing the debugger for setting up various properties Explaining how to use the debugger to set up not just lights, but also various properties in 3JS, and the ability to hide or collapse elements as needed.']}, {'end': 3410.09, 'segs': [{'end': 2783.368, 'src': 'embed', 'start': 2750.932, 'weight': 0, 'content': [{'end': 2762.436, 'text': "And the reason to do is just to make it a more interesting, um smoother scroll in terms of how it's going to affect the sphere that we we move around.", 'start': 2750.932, 'duration': 11.504}, {'end': 2763.377, 'text': 'All right.', 'start': 2763.097, 'duration': 0.28}, {'end': 2769.659, 'text': "So, and we're going to listen for mouse move.", 'start': 2763.477, 'duration': 6.182}, {'end': 2771.74, 'text': "So we're going to document ad event listener.", 'start': 2769.779, 'duration': 1.961}, {'end': 2780.305, 'text': "mouse move and we're going to call a function that we're going to create called on document mouse.", 'start': 2774.039, 'duration': 6.266}, {'end': 2782.387, 'text': 'most mouse move.', 'start': 2780.305, 'duration': 2.082}, {'end': 2783.368, 'text': 'all right.', 'start': 2782.387, 'duration': 0.981}], 'summary': 'Enhance scroll for smoother sphere movement using mouse move event.', 'duration': 32.436, 'max_score': 2750.932, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pUgWfqWZWmM/pics/pUgWfqWZWmM2750932.jpg'}, {'end': 3014.54, 'src': 'embed', 'start': 2975.6, 'weight': 1, 'content': [{'end': 2983.525, 'text': "this time it's going to add to itself 0.5 times target x minus sphere.rotation.y.", 'start': 2975.6, 'duration': 7.925}, {'end': 2988.668, 'text': "Let's save it, and it should work in relation to our mouse.", 'start': 2984.445, 'duration': 4.223}, {'end': 2989.268, 'text': 'There it goes.', 'start': 2988.708, 'duration': 0.56}, {'end': 2991.23, 'text': 'Look at that.', 'start': 2990.329, 'duration': 0.901}, {'end': 2996.993, 'text': "So it's off the screen.", 'start': 2995.953, 'duration': 1.04}, {'end': 2999.495, 'text': 'It keeps on going, but then we interrupt it.', 'start': 2997.213, 'duration': 2.282}, {'end': 3005.713, 'text': "Now let's add that for the other two axes.", 'start': 3001.089, 'duration': 4.624}, {'end': 3014.54, 'text': 'X, this is gonna be Y, and this is gonna be X.', 'start': 3006.653, 'duration': 7.887}], 'summary': 'Code adds 0.5 times target x minus sphere.rotation.y. works with mouse.', 'duration': 38.94, 'max_score': 2975.6, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pUgWfqWZWmM/pics/pUgWfqWZWmM2975600.jpg'}, {'end': 3087.384, 'src': 'embed', 'start': 3059.144, 'weight': 2, 'content': [{'end': 3068.42, 'text': 'Now, What else can we do? All right, so we can also make this respond to the scroll position.', 'start': 3059.144, 'duration': 9.276}, {'end': 3075.282, 'text': "And in order to do that, we're first going to get back into our index.html and we're going to add a little bit of markup here.", 'start': 3069.121, 'duration': 6.161}, {'end': 3081.703, 'text': "So we're going to have a container class and it's going to be h1 fill the sphere.", 'start': 3075.302, 'duration': 6.401}, {'end': 3087.384, 'text': "After it, we're going to have an empty section so that we can create some scroll.", 'start': 3083.823, 'duration': 3.561}], 'summary': 'Adding markup to index.html to create a scroll-responsive container.', 'duration': 28.24, 'max_score': 3059.144, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pUgWfqWZWmM/pics/pUgWfqWZWmM3059144.jpg'}, {'end': 3337.912, 'src': 'embed', 'start': 3304.729, 'weight': 3, 'content': [{'end': 3316.903, 'text': "update sphere equals event and And inside of here we'll just say sphere dot, position dot y.", 'start': 3304.729, 'duration': 12.174}, {'end': 3318.064, 'text': "So I guess we'll just move it up.", 'start': 3316.903, 'duration': 1.161}, {'end': 3319.984, 'text': 'Instead of scaling, you could scale it as well.', 'start': 3318.284, 'duration': 1.7}, {'end': 3326.467, 'text': 'If you wanted, window dot scroll y times something really small.', 'start': 3321.065, 'duration': 5.402}, {'end': 3337.912, 'text': "Because if you leave it by default with just scroll y without multiplying it by a smaller number, it'll just shoot out really fast, like instantly.", 'start': 3328.408, 'duration': 9.504}], 'summary': 'Using window.scrolly to move the sphere position in programming.', 'duration': 33.183, 'max_score': 3304.729, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pUgWfqWZWmM/pics/pUgWfqWZWmM3304729.jpg'}], 'start': 2516.078, 'title': 'Interactive 3d content creation', 'summary': 'Demonstrates creating an interactive sphere animation with smooth movement based on mouse input and covers creating interactive 3d content with 3js, resulting in a parallax effect and transparency. it also includes a recommendation for further learning at 3js journey.', 'chapters': [{'end': 3056.403, 'start': 2516.078, 'title': 'Interactive sphere animation', 'summary': 'Demonstrates the process of creating an interactive sphere animation by specifying position values, adding interactivity based on mouse position, and adjusting sphere movement using target values and rotation. the animation achieves smooth and dynamic movement based on mouse input.', 'duration': 540.325, 'highlights': ['The animation achieves smooth and dynamic movement based on mouse input The interactive animation demonstrates smooth and dynamic movement based on mouse input, enhancing user experience and engagement.', 'Adjusting sphere movement using target values and rotation The process involves adjusting sphere movement using target values and rotation, allowing for precise and controlled animation behavior.', 'Adding interactivity based on mouse position The chapter explains the addition of interactivity based on mouse position, creating a more engaging and responsive animation experience for users.', 'Specifying position values for the animation The process involves specifying position values for the animation, contributing to the accurate placement and appearance of the animated sphere.']}, {'end': 3410.09, 'start': 3059.144, 'title': 'Creating interactive 3d content with 3js', 'summary': 'Covers creating interactive 3d content with 3js including adding scroll position response, adjusting size and position of the sphere, and applying mix blend mode for transparency, resulting in a parallax effect and a crash course in 3js, with a recommendation for further learning at 3js journey.', 'duration': 350.946, 'highlights': ['The chapter covers creating interactive 3D content with 3JS including adding scroll position response, adjusting size and position of the sphere, and applying mix blend mode for transparency. The chapter covers creating interactive 3D content with 3JS including adding scroll position response, adjusting size and position of the sphere, and applying mix blend mode for transparency.', 'The parallax effect is achieved by adjusting the position of the sphere based on window scroll, creating a visually appealing interaction. The parallax effect is achieved by adjusting the position of the sphere based on window scroll, creating a visually appealing interaction.', 'A recommendation is made for further learning at 3JS Journey, indicating the comprehensive nature of the topic and the potential for deeper understanding. A recommendation is made for further learning at 3JS Journey, indicating the comprehensive nature of the topic and the potential for deeper understanding.']}], 'duration': 894.012, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/pUgWfqWZWmM/pics/pUgWfqWZWmM2516078.jpg', 'highlights': ['The animation achieves smooth and dynamic movement based on mouse input, enhancing user experience and engagement.', 'The process involves adjusting sphere movement using target values and rotation, allowing for precise and controlled animation behavior.', 'The chapter covers creating interactive 3D content with 3JS including adding scroll position response, adjusting size and position of the sphere, and applying mix blend mode for transparency.', 'The parallax effect is achieved by adjusting the position of the sphere based on window scroll, creating a visually appealing interaction.']}], 'highlights': ['Over 75 hours of content and 50% off promotion for teaching Three.js at scrimba.com.', 'Creating a scene, defining objects, materials, and adding to the scene in 4 steps.', 'The speaker demonstrates the use of mesh standard material and its properties such as color, roughness, and metalness to convey realistic appearances in the 3D object.', 'The animation achieves smooth and dynamic movement based on mouse input, enhancing user experience and engagement.', 'The process involves adjusting sphere movement using target values and rotation, allowing for precise and controlled animation behavior.']}