1, the preface
I have nothing to do recently. I have nothing to do for two months. I’ll be idle till the end of the year.
For the last three weeks, I’ve been studying. Learn react first, but don’t want to write after you build the basic scaffolding model. The total feeling is written later and vUE is not much different.
Then I learned c++, I learned the basics, I learned Pointers and constructors. Found that I learn C++ temporarily no benefit. Although more useful. And the tutorials are good. But the heart slowly feel that I am at present even if the primary front. Learning c++, apart from increasing the breadth of knowledge, does not help the guy who eats. And WASM has a long way to go.
Then decide between Flutter and WebGL.
In the end, ALTHOUGH WebGL is far away, I don’t think it requires too much in-depth study. Let’s start with WebGL
I personally found a video and followed it. It’s starting to ring a bell. Let me show you the first edition. This process is probably only like two or three articles.
2, open dry
1. Prepare the environment
The first is that, uncompressed threeJS:https://threejs.org/build/three.js
And git address: https://github.com/mrdoob/three.js/
Thress.js file
2. Environment directory
Demo1 assets // picture index.html index.js three.jsCopy the codeInside an HTML file
<! DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<title>demo1</title>
<script src="three.js"></script> <! --<link rel="stylesheet" href="index.css">-->
<style>
*{
margin: 0;
padding: 0;
}
html,body {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
</body>
<script src="index.js"></script>
</html>
Copy the codeJust look at the basics. There’s nothing there.
3. Create the scene and camera
'use strict';
~function() {//1, create Scene and camera const scence = new three.scene (); /*const camera = new THREE.PerspectiveCamera("View"."Refers to the ratio of window length to width."."Indicates how far away from the camera to start rendering."."How far away from the camera is the position by render 1000"); * / const camera = new THREE. PerspectiveCamera (75, window. InnerWidth/window. InnerHeight, 0.1, 1000); // create threeJS const renderer = new three.webglrenderer (); / / 4, set the renderer scene size the renderer. SetSize (document. Body. ClientWidth, document. Body. ClientHeight); / / the projection into the page document. The body. The appendChild (the renderer. DomElement accordingly); } ();Copy the codeNote the comments; the code above will then have a black background displayed on the browser
4. Create geometric models
// Create basic geometry model //const geometry = new THREE.BoxGeometry("X"."Y"."Z"); // Like long and wide high const geometry = new THREE.BoxGeometry(2, 2, 2); // Create material //const Material = new THREE.MeshBasicMaterial({color: 0x00ff00}); const material = new THREE.MeshBasicMaterial( { map: texture } ); Const cube = new THREE.Mesh(geometry, Material); // Add scence. Add (cube); camera.position.z = 6;Copy the codeAnd you’ll see that there’s a square at the top of the page, but you’ll wonder why it’s not a cube. Just keep going
Note this code: camera.position.z = 6;
This is to adjust the length of your line of sight. The larger the value, the smaller the object. See the scene with reference to reality. When the scene is very close, it is black. Can’t see
5. Add animations
// requestAnimationFrame creates the animation framefunction animate() {
requestAnimationFrame(animate); // 递归自调用
// 网格对象自旋转
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
// 渲染器渲染 场景和相机
renderer.render(scence, camera); //反复渲染
}
animate();
// 调整视角z的距离，太近看不到
camera.position.z = 6;
Copy the codeAnd then I’m going to rotate the cube
6. Adaptive screen size
// Size response window.adDeventListener ('resize', () = > {/ / initialize camera camera. The aspect = window. The innerWidth/window. The innerHeight; camera.updateProjectionMatrix(); / / modify rendering to size the renderer. SetSize (document. Body. ClientWidth, document. Body. ClientHeight); });Copy the code7, do not use color display, use pictures
Modify the above code
Const texture = new three.textureLoader ().load()"assets/mao1.jpg"); // Create material //const Material = new THREE.MeshBasicMaterial({color: 0x00ff00}); const material = new THREE.MeshBasicMaterial( { map: texture } );Copy the codeThere’s a catch: the aspect ratio of the image is 2 to the power of 1, and I don’t know why. Please leave a message if someone knows
8. Complete code
'use strict';
~function() {//1, create Scene and camera const scence = new three.scene (); /*const camera = new THREE.PerspectiveCamera("View"."Refers to the ratio of window length to width."."Indicates how far away from the camera to start rendering."."How far away from the camera is the position by render 1000"); * / const camera = new THREE. PerspectiveCamera (75, window. InnerWidth/window. InnerHeight, 0.1, 1000); // create threeJS const renderer = new three. WebGLRenderer({antialias:true}); / / 4, set the renderer scene size the renderer. SetSize (document. Body. ClientWidth, document. Body. ClientHeight); / / the projection into the page document. The body. The appendChild (the renderer. DomElement accordingly); // Create basic geometry model //const geometry = new THREE.BoxGeometry("X"."Y"."Z"); const geometry = new THREE.BoxGeometry(2, 2, 2); Const texture = new three.textureLoader ().load()"assets/mao1.jpg"); // Create material //const Material = new THREE.MeshBasicMaterial({color: 0x00ff00}); const material = new THREE.MeshBasicMaterial( { map: texture } ); Const cube = new THREE.Mesh(geometry, Material); // Add scence. Add (cube); // requestAnimationFrame creates the animation framefunction animate() { requestAnimationFrame(animate); // The grid object rotates cube. Rotation. X += 0.01; Cube. Rotation. + y = 0.01; // Render scene and camera renderer.render(scence, camera); } animate(); Camera.position. z = 6; // Size response window.adDeventListener ('resize', () = > {/ / initialize camera camera. The aspect = window. The innerWidth/window. The innerHeight; camera.updateProjectionMatrix(); / / modify rendering to size the renderer. SetSize (document. Body. ClientWidth, document. Body. ClientHeight); }); } ();Copy the codeIii. Acknowledgements:
The tutorial comes from CSDN’s video Basics tutorial