当前位置：网站首页>Three. JS introductory learning notes 10:three JS grid

Three. JS introductory learning notes 10:three JS grid

2022-07-07 15:48:00 【Jiang Duoduo_ Mostly Harmless 】

Reference learning ：
https://www.ituring.com.cn/book/miniarticle/52525

One . Grid concept

One of the most commonly used objects is the grid （Mesh）, The mesh is made up of vertices , edge , An object, such as a face . Other objects include line segments （Line）, bones （Bone）, particle system （ParticleSystem） etc. . Creating objects requires specifying geometry and materials , among , Geometry determines the vertex position and other information of the object , Material determines the color of objects , Texture and other information .

Two . Create grid

Constructors

Mesh(geometry, material)

Example

 var material = new THREE.MeshLambertMaterial({
    
                color:0xffff00    
                    });
            var geometry = new THREE.CubeGeometry(5,10,20);
            var mesh = new THREE.Mesh(geometry, material);
                scene.add(mesh);

If material and geometry If it will not be reused later , It can also be written together as ：
Note that there should be no semicolon at the end of the color statement

       var mesh = new THREE.Mesh(new THREE.CubeGeometry(5, 10, 20), 
        new THREE.MeshLambertMaterial({
    
            color: 0xffff00
             })
        );

Complete code

<!DOCTYPE html>
<html lang="en">
<head>
<title>3D</title>
<meta charset="utf-8">
</head>
<body>
<script src="js/three.js"></script> 
<script src="js/OrbitControls.js"></script> 
<script>
        var renderer, scene, camera;
        var controls, group;
        init();
        animate();
        function init() {
    
            // init renderer
            renderer = new THREE.WebGLRenderer( {
     antialias: true } );
// renderer.setPixelRatio( window.devicePixelRatio );
            renderer.setSize( window.innerWidth, window.innerHeight );
            document.body.appendChild( renderer.domElement );
            // init scene
            scene = new THREE.Scene();
            scene.background = new THREE.Color( 0xffffff );
              
            // init camera
            camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
            camera.position.set( 15, 15, 15 );
            camera.lookAt(new THREE.Vector3(0, 0, 0));
            scene.add(camera);
              
            //light
            var light = new THREE.DirectionalLight(0xffffff);
                light.position.set(3,10,0);
                scene.add(light);
            
            //mesh
       /* var material = new THREE.MeshLambertMaterial({ color:0xffff00 }); var geometry = new THREE.CubeGeometry(5,10,20); var mesh = new THREE.Mesh(geometry, material); scene.add(mesh);*/
            
            //mesh  Another way of writing 
            var mesh = new THREE.Mesh(new THREE.CubeGeometry(5, 10, 20), 
            new THREE.MeshLambertMaterial({
    
                color: 0xffff00
                })
            );
            scene.add(mesh);      
            
            }

            
        function animate() {
    
            renderer.render( scene, camera );
            requestAnimationFrame( animate );
        }      
    </script>
</body>
</html>

3、 ... and . Modify properties

1. texture of material

After the mesh is created , You can also modify the material
Change to red

var geometry = new THREE.CubeGeometry(1,2,3);
var material = new THREE.MeshLambertMaterial({
    
color:0xffff00;
});
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

mesh.material = new THREE.MeshLambertMaterial({
    
color:0xff0000
});

Insert picture description here

2. Location 、 The zoom 、 rotate

THREE.Mesh Basis since THREE.Object3D, Include scale,rotation,position. They are all THREE.Vector3 example , The method of modifying its value is the same .

THREE.Vector3 Yes x,y,z Three attributes , How to set only one of these properties , You can use the following methods ：

mesh.position.z=1

Set multiple properties at the same time , There are two ways to do this

mesh.position.set(1.5, -0.5, 0);

mesh.position = new THREE.Vector3(1.5, -0.5 ,0);

Example

 mesh.position.set(10,10,10);
 mesh.scale.set(0.1,0.1,0.1);
 mesh.rotation.x = 60;