Главная » Языки программирования

3d модели для html

Содержание
  1. 45 CSS 3D Examples
  2. Related Articles
  3. Author
  4. Links
  5. Made with
  6. About a code
  7. Santa in 3D-Pixel Grid
  8. Author
  9. Links
  10. Made with
  11. About a code
  12. 3D Chimneys Field Tessellated Pattern
  13. Author
  14. Links
  15. Made with
  16. About a code
  17. Impossible Waterfall Illusion — Pure CSS
  18. Author
  19. Links
  20. Made with
  21. About a code
  22. Advent Calendar 3D
  23. Author
  24. Links
  25. Made with
  26. About a code
  27. 3D Fractured Pyramid
  28. Author
  29. Links
  30. Made with
  31. About a code
  32. 3D-pixel Grid
  33. Author
  34. Links
  35. Made with
  36. About a code
  37. 3D Sphere with Filling Animation
  38. Author
  39. Links
  40. Made with
  41. About a code
  42. 3D Ice Cream Truck
  43. Author
  44. Links
  45. Made with
  46. About a code
  47. EAT SLEEP RAVE — 3D ROTATE
  48. Author
  49. Links
  50. Made with
  51. About a code
  52. 3D Cute Lion
  53. Author
  54. Links
  55. Made with
  56. About a code
  57. Animated 3D Jedi
  58. Author
  59. Links
  60. Made with
  61. About a code
  62. Animated 3D Bee
  63. Author
  64. Links
  65. Made with
  66. About a code
  67. 3D CSS: Interactive SNES Controller
  68. Author
  69. Links
  70. Made with
  71. About a code
  72. Cards Carousel on 3D Cube — CSS Only
  73. Author
  74. Links
  75. Made with
  76. About a code
  77. Spirited Away Bathhouse — 3D CSS
  78. Author
  79. Links
  80. Made with
  81. About a code
  82. The Gift of CSS
  83. Author
  84. Links
  85. Made with
  86. About a code
  87. Extra Touches
  88. Author
  89. Links
  90. Made with
  91. About a code
  92. 150ml of vanilla CSS
  93. Author
  94. Links
  95. Made with
  96. About a code
  97. 3D Ice Cream Parlor in CSS
  98. Author
  99. Links
  100. Made with
  101. About a code
  102. CSS in 3D in CSS
  103. Author
  104. Links
  105. Made with
  106. About a code
  107. Bubbly
  108. Author
  109. Links
  110. Made with
  111. About a code
  112. 3D iMac — CSS Only
  113. Author
  114. Links
  115. Made with
  116. About a code
  117. Great Pyramid of Giza — 3D Model — Pure CSS
  118. Author
  119. Links
  120. Made with
  121. About a code
  122. Explode A Node: 3D Box Model
  123. Author
  124. Links
  125. Made with
  126. About a code
  127. Pure CSS 3D Shaded Rotating Golden
  128. Author
  129. Links
  130. Made with
  131. About a code
  132. CSS 3D Guitar with 5 Texture Variation
  133. Author
  134. Links
  135. Made with
  136. About a code
  137. 3D Room — Pure CSS
  138. Author
  139. Links
  140. Made with
  141. About a code
  142. 3D Modern House — Pure CSS
  143. Author
  144. Links
  145. Made with
  146. About a code
  147. CSS Cab
  148. Author
  149. Links
  150. Made with
  151. About a code
  152. 3D Printer
  153. Author
  154. Links
  155. Made with
  156. About a code
  157. CasioPT-1.css
  158. Author
  159. Links
  160. Made with
  161. About a code
  162. Town
  163. Author
  164. Add 3D Model to WebSite in 5 Minutes – Three.js Tutorial
  165. The Model
  166. Basic Setup
  167. The Lighting
  168. Loading Model
  169. 360 Degrees Viewer
  170. Source Code
  171. HTML
  172. CSS
Читайте также:  Python write into new file

45 CSS 3D Examples

Collection of free HTML and CSS 3D code examples from Codepen, GitHub and other resources. Update of March 2022 collection. 16 new items.

Demo image: Santa in 3D-Pixel Grid

  1. jQuery 3D Effects

Author

Made with

About a code

Santa in 3D-Pixel Grid

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: 3D Chimneys Field Tessellated Pattern

Author

Made with

About a code

3D Chimneys Field Tessellated Pattern

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Impossible Waterfall Illusion - Pure CSS

Author

Made with

About a code

Impossible Waterfall Illusion — Pure CSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Advent Calendar 3D

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: 3D Fractured Pyramid

Author

Made with

About a code

3D Fractured Pyramid

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

3D-pixel Grid

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

3D Sphere with Filling Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: 3D Ice Cream Truck

Author

Made with

About a code

3D Ice Cream Truck

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: EAT SLEEP RAVE - 3D ROTATE

Author

Made with

About a code

EAT SLEEP RAVE — 3D ROTATE

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: 3D Cute Lion

Author

Made with

About a code

3D Cute Lion

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Animated 3D Jedi

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Animated 3D Bee

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: 3D CSS: Interactive SNES Controller

Author

Made with

About a code

3D CSS: Interactive SNES Controller

An interactive Super Nintendo Entertainment System (SNES) controller coded in HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

3D cube with cards on each face. CSS only checkbox hack for rotations.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Spirited Away Bathhouse - 3D CSS

Author

Made with

About a code

Spirited Away Bathhouse — 3D CSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

The Gift of CSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Extra Touches

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: 150ml of vanilla CSS

Author

Made with

About a code

150ml of vanilla CSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: 3D Ice Cream Parlor in CSS

Author

Made with

About a code

3D Ice Cream Parlor in CSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: CSS in 3D in CSS

Author

Made with

About a code

CSS in 3D in CSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Bubbly

Author

Made with

About a code

Bubbly

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: 3D iMac - CSS Only

Author

Made with

About a code

3D iMac — CSS Only

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Great Pyramid of Giza - 3D Model - Pure CSS

Author

Made with

About a code

Great Pyramid of Giza — 3D Model — Pure CSS

3D model of the Egyptian Great Pyramid of Cheops in Giza. Discovering the possibilities of 3D modeling with CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Explode A Node: 3D Box Model

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Pure CSS 3D Shaded Rotating Golden

Author

Made with

About a code

Pure CSS 3D Shaded Rotating Golden

Make your own by changing var s on 1st line of Pug.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: CSS 3D Guitar with 5 Texture Variation

Author

Made with

About a code

CSS 3D Guitar with 5 Texture Variation

CSS 3D Guitar is a guitar model, made possible using mask-image , background-image and transform properties. The design is created with elements and is completely customizable through CSS Variables. Camera simulation and Control panel synchronization powered by a few lines of JavaScript.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: 3D Room - Pure CSS

Author

Made with

About a code

3D Room — Pure CSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: 3D Modern House - Pure CSS

Author

Made with

About a code

3D Modern House — Pure CSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: CSS Cab

Author

Made with

About a code

CSS Cab

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: 3D Printer

Author

Made with

About a code

3D Printer

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: CasioPT-1.css

Author

Made with

About a code

CasioPT-1.css

Vintage Casio PT-1 keyboard drawn entirely with HTML and CSS; using div s, gradient s and box-shadow s.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Town

Author

Made with

About a code

Town

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: 3D Cube (CSS3 Transform)

Author

Источник

Add 3D Model to WebSite in 5 Minutes – Three.js Tutorial

add-3d-model-website

In this tutorial, we’re going to show you how to put a 3D model on your website with 360 degrees viewer using Three.js and JavaScript in just a few minutes.

The Model

First of all, we’ll need to find a suitable 3D model. There are lots of free models available on the internet. However, Three.js recommended to use a model with glTF format due to small file size and efficiency. So I’m going to download the one that already in glTF format. But if you already have a model in other formats, three.js is also support FBX and obj file as well.

Here is the free Datson car model from Sketchfab

add-3d-model-website-2

Once model was downloaded, put all files (and folders if any) in the web directory.

add-3d-model-website-3

Basic Setup

Let’s work on the JavaScript. First include the latest version of Three.js to your page.

Next create a scene, camera and renderer. I’m going to place the camera in front of the car and rotate them by 45 degrees. Then, to scale down the car, we’ll get our car model inside the callback function and use scale.set. I’m going to reduce the size by half.

scene = new THREE.Scene(); scene.background = new THREE.Color(0xdddddd); camera = new THREE.PerspectiveCamera(40,window.innerWidth/window.innerHeight,1,5000); camera.rotation.y = 45/180*Math.PI; camera.position.x = 800; camera.position.y = 100; camera.position.z = 1000; renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth,window.innerHeight); document.body.appendChild(renderer.domElement);

The basic setup is completed. Next, we’ll add the lighting and load our model.

The Lighting

Then I’ll add a soft white ambient light to illuminate the scene globally.

Then add directional light from above. I’m going to set the castShadow property to true then add it to the scene. I’m going to also add 4 point lights and place them around the car. Point light is similar to the light bulb in the real world and It automatically cast shadow.

hlight = new THREE.AmbientLight (0x404040,100); scene.add(hlight); directionalLight = new THREE.DirectionalLight(0xffffff,100); directionalLight.position.set(0,1,0); directionalLight.castShadow = true; scene.add(directionalLight); light = new THREE.PointLight(0xc4c4c4,10); light.position.set(0,300,500); scene.add(light); light2 = new THREE.PointLight(0xc4c4c4,10); light2.position.set(500,100,0); scene.add(light2); light3 = new THREE.PointLight(0xc4c4c4,10); light3.position.set(0,100,-500); scene.add(light3); light4 = new THREE.PointLight(0xc4c4c4,10); light4.position.set(-500,300,500); scene.add(light4);

Loading Model

We’ll use GLTFLoader class. Then use load method to load our model file. Also the model is too big for our scene so let’s scale down the car by 50%

let loader = new THREE.GLTFLoader(); loader.load('scene.gltf', function(gltf)< car = gltf.scene.children[0]; car.scale.set(0.5,0.5,0.5); scene.add(gltf.scene); animate(); >);

add-3d-model-website-1

360 Degrees Viewer

We’ll use three.js OrbitControl plugin to add a 360 degrees viewer that let the users rotate the camera. Get the OrbitControls.js from github and include it to the page.

Then create the control object from our camera and add change event listener to track the mouse control.

let controls = new THREE.OrbitControls(camera); controls.addEventListener('change', renderer);

We’ll need to create an animation loop to update the scene when users rotate the camera.

Check the final result in the video below

And that’s it. You can get the full source code below. Hope you guys enjoy. Don’t forget to like our Facebook and subscribe our Youtube Channel to stay connected. See you next time Bye!

Source Code

HTML

CSS

TK Engineer, Web Developer, Ex-Mutual Funds Software Developer. He founded Red Stapler in 2015 to share useful resources for everyone interested in web design, web development and programming. Subscribe his YouTube Channel or Twitter for weekly tips and tutorials.

Источник

Оцените статью
© 2024 Программирование