Materials: Phong, face, depth, lambert and more - all with smooth-shading, texture, shininess and more.Lights: Hemisphere, directional, area, ambient, spot and point lights shadows: cast and receive.Cameras: Orthographic and perspective controllers: FPS, trackball, path and more.Scenes: Add/remove objects at run-time linear and exponential fog.Renderers: ,, WebGL, CSS3D, DOM, Software effects: stereo, crosseyed, anaglyph, and more.Best of all, you can use Three.js scripts in conjunction with the HTML5 canvas, SVG, CSS3D or WebGL. With Three.js, you’ll be able to easily create objects, cameras, materials, lights, and much more. Three.js runs in all WebGL supported browsers and enables you create GPU-accelerated 3D animations by making use of JavaScript as part of a website. While a simple cube in raw WebGL turns out hundreds of lines of Shader and JavaScript code, a Three.js equivalent is only a part of that. Three.js is an open source and lightweight JavaScript 3D library that allows you to create and display animated, interactive 3D computer graphics on any compatible web browser without having to rely on proprietary browser plug-ins.
Let’s start understanding Three.js! What is Three.js? Hopefully, this tutorial will help you a lot especially if you’re new to 3D world. In "Getting Started with Three.js" section, I’ve explained how to make a rotating 3D cube with live working code and demo, so you could understand how Three.js actually works. This tutorial is written with the intention of making you exposed to the power of Three.js. With Three.js, you can build 3D environments in your browser with a very low level of complexity. But creating 3D with pure JavaScript requires a large amount of code, and that’s where Three.js shows its magic. This leads to the final method used for texture mapping called UV mapping.Have you ever created a 3D object using JavaScript? Of course, you might have done. Again, this is very cool, but creating and loading an image for every face of our model becomes very impractical as the face count increases in our 3D models. As you watch the cube spin you will see a different texture for each face of the cube. To: mesh = new THREE.Mesh(geometry, meshFaceMaterial) Change the following line: mesh = new THREE.Mesh(geometry, material )
We then use this array of materials to create a MeshFaceMaterial.įinally, we need to tell our geometry to use this array of materials. What we just did with the lines above was to create an array of materials, each material having a different texture. Var material = new THREE.MeshPhongMaterial( ) var materials = var meshFaceMaterial = new THREE.MeshFaceMaterial( materials ) Var geometry = new THREE.CubeGeometry( 10, 10, 10) Var light = new THREE.DirectionalLight( 0xffffff )
Camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000)
0 kommentar(er)
