Three.js texture Map Cube Rotation animation effect

Online Demo

Use the three.js generated cube to select the 3D effect.

Recommended for use in modern browsers such as Chrome (WEBGL support required)

If you are interested in Three.js, please visit the following course library:

Javascript Class Library Three.js Basics Introduction

Related code:

2. var scene = new three. Scene();
6. var camera = new three. Perspectivecamera( //vertical field of view (from bottom to top) in degrees /c9>
8. //aspect ratio where the height of the element divides the width
10. 5, //near clipping plane
12. ); //far clipping plane
16. var renderer = new three. Webglrenderer();
20. Renderer. SetSize(a );
24. Document. Body. AppendChild(renderer. DomElement);
28. var geometry = new three. Boxgeometry(1, 1, 3);
32. var cratetexture = new three. Imageutils. Loadtexture("http://www.gbtags.com/gb/networks/themes/img/weixin.jpg");
38. var material =new Three. Meshbasicmaterial ({map: cratetexture< Span class= "pun" >, Color: 0xffffff, Wireframe: false
40. var cube = new three. Mesh(geometry, material);
50. Scene. Add(cube);
54. Camera. Position. Z = + ;
62. Modify render scene to lens for animation
64. function render() {
66. Requestanimationframe(render);
68. Cube. Rotation. X + = 0.03;
70. Cube. Rotation. Y + = 0.03;
72. Renderer. Render(scene, camera);
74. }
78. Call the Render method
80. Render();

Three.js texture Map Cube Rotation animation effect