console 命令行工具 X clear

console

let camera, scene, renderer, controls;

let mesh;

init();
render();

function init() {

    camera = new THREE.PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 1, 3500 );
    camera.position.z = 64;

    scene = new THREE.Scene();
    scene.background = new THREE.Color( 0x050505 );

    //

    const light = new THREE.HemisphereLight();
    light.intensity = 3;
    scene.add( light );

    //

    const geometry = new THREE.BufferGeometry();

    const indices = [];

    const vertices = [];
    const normals = [];
    const colors = [];

    // 尺寸20， 10段， 每段长2 
    const size = 20;
    const segments = 10;

    const halfSize = size / 2;
    const segmentSize = size / segments;

    const _color = new THREE.Color();

    // generate vertices, normals and color data for a simple grid geometry

    for ( let i = 0; i <= segments; i ++ ) {

        const y = ( i * segmentSize ) - halfSize;

        for ( let j = 0; j <= segments; j ++ ) {

            const x = ( j * segmentSize ) - halfSize;

            vertices.push( x, - y, 0 );
            normals.push( 0, 0, 1 );

            const r = ( x / size ) + 0.5;
            const g = ( y / size ) + 0.5;

            _color.setRGB( r, g, 1, THREE.SRGBColorSpace );

            colors.push( _color.r, _color.g, _color.b );

        }

    }
    console.log('color: ', colors)
    // x: -10 -> 10, step 2
    // y: 10 -> -10, step -2
    // console.log('verticals: ', vertices)

    // generate indices (data for element array buffer)

    for ( let i = 0; i < segments; i ++ ) {

        for ( let j = 0; j < segments; j ++ ) {

            const a = i * ( segments + 1 ) + ( j + 1 );
            const b = i * ( segments + 1 ) + j;
            const c = ( i + 1 ) * ( segments + 1 ) + j;
            const d = ( i + 1 ) * ( segments + 1 ) + ( j + 1 );

            // generate two faces (triangles) per iteration

            indices.push( a, b, d ); // face one
            indices.push( b, c, d ); // face two

        }
    }
    //

    geometry.setIndex( indices );
    geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
    geometry.setAttribute( 'normal', new THREE.Float32BufferAttribute( normals, 3 ) );
    geometry.setAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );

    const material = new THREE.MeshPhongMaterial( {
        side: THREE.DoubleSide,
        vertexColors: true,
        wireframe: true,
    } );

    mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );

    //

    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( window.innerWidth, window.innerHeight );
    // renderer.setAnimationLoop( animate );
    document.body.appendChild( renderer.domElement );

    // 添加鼠标控制，需要单独引入模块
    controls = new THREE.OrbitControls(camera, renderer.domElement);
    controls.enableDamping = true;
    controls.dampingFactor = 0.05;
    controls.addEventListener('change', render);


    window.addEventListener( 'resize', onWindowResize );

}

function onWindowResize() {

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize( window.innerWidth, window.innerHeight );

}

// 动态渲染

function animate() {

    const time = Date.now() * 0.001;

    mesh.rotation.x = time * 0.25;
    mesh.rotation.y = time * 0.5;

    renderer.render( scene, camera );

    // stats.update();

}

// 静态渲染
function render() {
    renderer.render( scene, camera );
}

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webgl</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<link type="text/css" rel="stylesheet" href="main.css">
	</head>
	<body>

		<div id="container"></div>
		<div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - buffergeometry - indexed</div>
        <script src="https://cdn.jsdelivr.net/npm/three@0.142/build/three.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/three@0.142/examples/js/controls/OrbitControls.js"></script>
	</body>
</html>