Question

我正在尝试从点生成网格。我已经读过here的生成网格的方法是

var mesh = new THREE.ConvexGeometry( vertices_array );

在this example中，他们像下面这样声明了vertices_array

var vertices = new THREE.DodecahedronGeometry( 10 ).vertices;

我需要理解的是，如何使用以下代码为使用vertices_array创建的点定义THREE.BufferGeometry。

非常感谢您

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Three.js</title>
        <meta charset="utf-8">
        <script src="js/three.js"></script>
        <script src="js/TrackballControls.js"></script>
        <script src="js/WebGL.js"></script>
        <script src="js/ConvexGeometry.js"></script>
        <script src="js/QuickHull.js"></script>
    </head>
    <body>
        <script>

        if ( WEBGL.isWebGLAvailable() === false ) {
            document.body.appendChild( WEBGL.getWebGLErrorMessage() );
        }
        var camera, scene, renderer, controls;

        init();
        animate();

        function init() {

            renderer = new THREE.WebGLRenderer( { antialias: true } );
            renderer.setPixelRatio( window.devicePixelRatio );
            renderer.setSize( window.innerWidth, window.innerHeight );
            document.body.appendChild( renderer.domElement );
            scene = new THREE.Scene();
            camera = new THREE.PerspectiveCamera( 45.0, window.innerWidth / window.innerHeight, 5, 3500 );
            camera.position.z = 2500;
            controls = new THREE.TrackballControls( camera, renderer.domElement );
            createScene();
        }

        function createScene() {
                scene = new THREE.Scene();
                scene.background = new THREE.Color( 0x000000 );
                var geometry = new THREE.BufferGeometry();
                var positions = [];


                for ( var i = 0; i < 20; i ++ ) {
                    for ( var j = 0; j < 20; j ++ ) {
                    var y = j;
                    var x = i; 
                    var z = 0;
                    positions.push( new THREE.Vector3(x, y, z) );
                    //positions.push( x, y, z );

                    }
                }


                //geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) );

                //var material = new THREE.PointsMaterial( {color: 0xFF0000} );
                //points = new THREE.Points( geometry, material );
                //scene.add( points );

                var meshMaterial = new THREE.MeshBasicMaterial( {color: 0xffffff,} );
                var meshGeometry = new THREE.ConvexBufferGeometry( positions );
                var mesh = new THREE.Mesh( meshGeometry, meshMaterial );
                scene.add( mesh );


        }


        function animate( time ) {

            requestAnimationFrame( animate );
            controls.update();
            renderer.render( scene, camera );

        }

        </script>
    </body>
</html>

根据Three.js

0 个答案: