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

This article shares with you the content of a sample analysis of the basics of Three.js. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

1. The official website of Three.js and the three necessary conditions for using Three.js

1.Three.js official website https://threejs.org/

two。 Three necessary conditions for using Three.js

To actually be able to display anything with Three.js, we need three things: a scene, a camera, and a renderer so we can render the scene with the camera.

It roughly means that anything that can be displayed using three.js must meet three conditions: a scene scene, a camera camera, and a renderer renderer. All three are indispensable.

Second, the relationship between the three necessary conditions for using Three.js (a scene scene, a camera camera, a renderer renderer)

As shown above, to illustrate the relationship among a scene scene, a camera camera, and a renderer renderer [/ code]

1. The scene scene is a container of objects, and developers can put the characters they need into the scene, such as Apple and Grape. At the same time, the character itself manages its position in the scene.

two。 The function of the camera camera is to face the scene, take a suitable scene in the scene, and photograph it. [you can imagine the eyes of adults]

3. The function of the renderer renderer is to display the pictures taken by the camera in the browser.

Third, use the above theory to practice the official website case.

The effect picture is as follows

Official website case implementation source code

My first three.js app body {margin: 0;} canvas {width: 100%; height: 100%} / / create a scene object var scene = new THREE.Scene (); / / create a camera object var camera = new THREE.PerspectiveCamera (75, window.innerWidth/window.innerHeight, 0.1,1000); / / create a renderer object var renderer = new THREE.WebGLRenderer () / / set the canvas size renderer.setSize (window.innerWidth, window.innerHeight); / / set the canvas color renderer.setClearColor (0x00AABB, 1.0); / / add the rendered canvas to the browser so that the scene taken by the camera is left behind (renderer.domElement); / / create a geometry object with a length, width and height of 1 geometry object var geometry = new THREE.BoxGeometry (1, 1, 1) / material, skin var material = new THREE.MeshBasicMaterial ({color: 0x00ff00}); / / add material material to geometry geometry to produce new object geometry cube var cube = new THREE.Mesh (geometry, material); / / add geometry to scene scene.add (cube); / / set camera z axis, vertical computer screen position camera.position.z = 5; var render = function () {/ * requestAnimationFrame (render) / / render in a loop cube.rotation.x + = 0.1 renderer.render camera / x axis rotates 60 times per second cube.rotation.y + = 0.1 renderer.render beat y axis 60 times per second; / / render the geometry captured by the camera into the scene in real time; render ()

Through the case of the official website, it is not difficult to find that the default viewing direction of the camera camera is the direction of the screen (negative z axis). When the coordinates are changed, the camera must be pointed to the origin before the object can be observed.

Z axis negative direction? Therefore, it is necessary to talk about three-dimensional coordinates (such as the following figure).

The camera points to the origin. Let's talk about the camera (very important! Imagine what it's like to be blind.

In this case, a perspective camera is used (the closer the point of view is, the larger the object is, and the smaller the distant object is drawn, which is consistent with the way we look at objects in daily life. )

Var camera = new THREE.PerspectiveCamera (fov, aspect, near,far)

New THREE.PerspectiveCamera (fov, aspect, near,far) perspective camera

Visual angle: fov, the larger the visual angle (called shooting distance in some places), the smaller the object in the scene, the smaller the angle of view, the larger the object in the scene.

Aspect ratio: aspect

The closest distance to the apparent volume of the camera: near

The farthest distance from the apparent volume of the camera: far

To sum up, I believe that combining the above three-dimensional coordinates and camera pictures to understand the camera should become very simple. Next, we will modify the above case (indicating that in the later case, mouse scrolling and 3D rotation are all based on the camera)

Fourth, modify the official website and set the camera orientation and camera position

Use the [lookAt] method to set the center of the camera's field of view. The parameter to "lookAt ()" is an object whose property contains the central coordinates "x"y"z".

Set the upward direction of the camera to the positive y axis camera.up.x = 0; camera.up.y = 1Universe * camera facing-y axis above the camera * /; camera.up.z = 0

Fifth, realize the rotating cube

Principle of rotation Animation the camera rotates around the y-axis, constantly modifies the position of the camera's x-axis and z-axis, and keeps the objects in the scene in the camera's field of view all the time. The pictures taken by the camera are displayed in the browser in real time.

/ / the camera rotates around the y-axis, constantly modifies the position of the camera's x and z axes, and keeps objects in the scene in the camera's field of view all the time. / / Real-time rendering function animation () {var timer = Date.now () * 0.0001; camera.position.x = Math.cos (timer) * 100; camera.position.z = Math.sin (timer) * 100; camera.lookAt (scene.position) / / set camera field of view center renderer.render (scene, camera); requestAnimationFrame (animation); / / render callback function}

The implementation effect is as follows

Rotating cube-case source code

Rotate the cube # canvas-frame {width: 100%; height: 600px;}

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.