How to use Three.js framework for development
This article mainly introduces how to use the Three.js framework for development related knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe that everyone after reading this article on how to use the Three.js framework for development will have a harvest, let's take a look at it.
Three.js is a relatively comprehensive open source framework, which well encapsulates various elements of the 3D scene. You can use it to easily create cameras, models, lighting, materials, and so on. You can also choose different renderers, Three.js provides a variety of rendering methods, you can choose to use canvas to render, you can also use WebGL or SVG to render.
In addition, Three.js can load 3D files in many formats, and your model files can come from Blender,Maya,Chinema4D,3DMax and so on. And built-in more basic things: (sphere) Spheres, (aircraft) Planes, (cube) Cubes, (cylinder) Cylinders. It will be very easy for Three.js to create these objects.
All right, cut the crap and look directly at the code:
ThreeJSDemo
Body
{
Margin:0px
Background-color:#B0B0B0
Overload:hidden
}
Var camera,scene,renderer
Var mesh
Init ()
Animate ()
Function init () {
Scene = new THREE.Scene ()
Camera = new THREE.PerspectiveCamera (70 century window.innerWidth / window.innerHeight,1,1000)
Camera.position.z = 400
Scene.add (camera)
Geometry = new THREE.CubeGeometry (200200200)
Material = new THREE.MeshBasicMaterial ({color: 0xff0000, wireframe: true})
Mesh = new THREE.Mesh (geometry,material)
Scene.add (mesh)
Renderer = new THREE.WebGLRenderer ()
Renderer.setSize (window.innerWidth,window.innerHeight)
Document.body.appendChild (renderer.domElement)
}
Function animate () {
RequestAnimationFrame (animate)
Mesh.rotation.x + = 0.05
Mesh.rotation.y + = 0.05
Renderer.render (scene, camera)
}
This is the whole code, which is simply too simple compared to the previous code that uses WebGL's API.
The code is intuitive, just a few steps:
1. Create a scene scene.
two。 Create a camera camera.
3. Create / load the model geometry.
4. Load the material material.
5. Render the model object mesh, which is made up of geometry and material.
6. Enable animation.
This is the end of the article on "how to develop with the Three.js framework". Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "how to use Three.js framework for development". If you want to learn more, you are welcome to follow the industry information channel.
