开发简单 Web 应用程序的 Three.JS 基础短期课程
Three.JS Basics Short Course for Developing a Simple Web App
- 1. Introduction to the Course
- 1. What are you going to develop
- 2. What will you learn while developing the web app
- 2. Setup the HTML, CSS & JS files
- 1. How to link the ThreeJS file to the HTML file
- 2. How to import the ThreeJS library to the JS file
- 3. How to add a Drag and Drop Box
- 4. How to style the webpage using CSS
- 3. Create a Scene and Render it with Camera
- 1. How to create a Scene
- 2. How to create a Camera and position it in the ThreeJS Scene
- 3. How to Render a Scene with the Camera
- 4. How to resize the Renderer with the Window Size
- 4. Create a Sphere with Sphere Geometry & Material
- 1. How to create a Sphere Geometry
- 2. How to assign a Material to the Sphere
- 3. How to Mesh the Material with the Sphere Geometry
- 5. Add Lightings
- 1. What is Ambient Light and how to add it to the Scene
- 2. What is Directional Light and how to add it to the Scene
- 6. Animate the Scene
- 1. How to Animate the Scene using the Animate function
- 7. Handling User Interaction
- 1. How to add Event Listeners for Drag and Drop of Images
- 2. How to add Event Listener for Clicking on the Box
- 3. How to handle a selected Image File
- 4. How to add Event Listener for mouse wheel Zoom Events
- 8. Conclusion
- 1. Final Words