Shulou(Shulou.com)06/01 Report--

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.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.