Zhongyifeng digital model controller documentation ==>>The entry file ManewPage.vue (the screenshot is at the end of the document)
please replace the resource path when it is released
Model controller folder Viewers (the screenshot is at the end of the document)
model controller index.ts The screenshot of the file part is as follows.
Some methods have comments, and the parts without comments need to find the three.js documentation by themselves.
Creating a scene
This section will give a brief introduction to three.js; we'll start by building a scene that includes a rotating cube. There is a completed example at the bottom of the page, you can take a look when you run into trouble or need help.
before the start
Before you start using three.js, you need a place to display it. Save the following HTML code as an HTML file on your computer and open the HTML file in your browser.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My first three.js app</title>
<style>
body { margin: 0; }
</style>
</head>
<body>
<script type="module">
import * as THREE from 'https://unpkg.com/three/build/three.module.js';
// Our Javascript will go here.
</script>
</body>
</html>
Ok, all the following code will write to the empty
create a scene
In order to really display your scene with three.js, we need the following objects: scene, camera and renderer, so that we can render the scene through the camera.
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
Let's take a moment to explain what's going on here. We have now set up the scene, camera and renderer.
There are several different cameras in three.js, here, we are using PerspectiveCamera (perspective camera).
The first parameter is the field of view (FOV). The viewing angle is the range of the scene you can see on the display at any time, and its unit is angle (distinguished from radians).
The second parameter is the aspect ratio. That is, you divide the width of an object by its height. For example, when you play an old movie on a widescreen TV, the image can appear squashed.
The next two parameters are the near section (near) and the far section (far). When some parts of the object are farther than the camera's far section or closer than the near section, those parts will not be rendered into the scene. Maybe you don't have to worry about the impact of this value now, but in the future, in order to get better rendering performance, you will be able to set it in your application.
Next is the renderer. This is where the magic happens. In addition to the WebGLRenderer renderer we use here, Three.js also provides several other renderers, which can be used when the browser used by the user is too old or does not support WebGL for other reasons The renderer is downgraded.
In addition to creating an instance of a renderer, we also need to set a renderer's size in our application. For example, we can use the width and height of the required rendering area to make the scene rendered by the renderer fill our application. Therefore, we can set the width and height of the renderer to the width and height of the browser window. For performance-sensitive applications, you can use setSize to pass in a smaller value, such as window.innerWidth/2 and window.innerHeight/2, which will make the application render with half the length and width Render the scene.
If you wish to keep your app's size, but render at a lower resolution, you can call setSize with updateStyle (the third parameter) set to false. For example, assuming your label now has a width and height of 100%, calling setSize(window.innerWidth/2, window.innerHeight/2, false) will cause your application to render at half the resolution.
The last step is important, we add the renderer's dom element (renderer.domElement) to our HTML document. This is what the renderer uses to display the scene for us to see.
"Hmm, that looks great, so where's that cube you were talking about?" Next, let's add the cube.
const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );
To create a cube, we need a BoxGeometry (cube) object. This object contains all the vertices (vertices) and faces (faces) in a cube. We will conduct more explorations in this area in the future.
Next, for this cube, we need to give it a material to give it a color. Three.js comes with several materials, here we use MeshBasicMaterial. All materials have objects that hold properties applied to them. For the sake of simplicity here, we only set a color attribute with a value of 0x00ff00, which is green. What you do here is the same as how you set colors in CSS or Photoshop using the hex colors format.
The third step, we need a Mesh (grid). A mesh consists of a geometry and a material applied to it. We can directly place the mesh object into our scene and let it move freely in the scene.
By default, when we call scene.add(), the object will be added at (0,0,0) coordinates. But will make the camera and cube next to each other. To prevent this from happening, we just need to move the camera slightly outwards.
render scene
Now, if you copy the code you wrote earlier into an HTML file, you won't see anything on the page. This is because we haven't actually rendered it yet. To do this, we need to use something called a "render loop" or "animate loop".
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
animate();
Here we create a loop that enables the renderer to draw the scene every time the screen refreshes (typically 60 refreshes/second on most screens). If you are new to browser game development, you may say "Why don't we just use setInterval to implement the refresh function?" Of course, we can indeed use setInterval, but requestAnimationFrame has many advantages. Perhaps most importantly, it pauses when the user switches to another tab, so it doesn't waste the user's precious processor resources or drain battery life.
animate the cube
Before starting, if you have written the above code into the file you created, you can see a green square. Let's do something more interesting -- make it spin.
Add the following code above the call to renderer.render in the animate() function:
cube.rotation.x += 0.01; cube.rotation.y += 0.01;
This code will be executed every frame (normally 60 times/ seconds), which gives the cube a nice-looking rotation animation. Basically, when the application is running, if you want to move or change anything in the scene, you have to go through this animation loop. Of course, you can call other functions in this animation loop, so you don't write an animate function with hundreds of lines of code.
result
congratulations! You have now successfully completed your first Three.js application. While it's simple, you now have a starting point to get started.
Below is the complete code, which can be run and edited in the live example; running or modifying the code will help you better understand how it works.
Author: Xu Meng