如何让Three.js中的“地形”显示为3D?

时间:2016-04-13 21:38:41

标签: javascript 3d three.js terrain perlin-noise

我正在使用Three.js和ImprovedNoise.js创建3D地形。使用Three.js网站上的示例,我设法创建了看似是地形的东西,但它是2D(不扩展到z轴)。

在尝试创建此场景时,我在示例代码中遇到了错误。有些事情我需要稍微改变以使其正常工作,例如:

geometry.rotateX(-Math.PI)

我改为

geometry.rotateX = -Math.PI

但是抛出错误的一件事是THREE.CanvasTexture不是一个函数。 CanvasTexture出现在我可以找到的每三个.js示例中,我找不到任何关于它被更改的文档。但是,CanvasTexture不在three.js网站的文档中,所以我假设它已经被弃用了。

无论如何,我现在的问题是,虽然我尚未解决我的问题,但我尝试逐字复制并粘贴示例代码,以便我可以向后工作以尝试更好地理解代码,但即使是示例代码来自在我的电脑上运行时,three.js网站出现了2D。

下面是示例代码(稍作修改以避免上述错误):

如果有人能告诉我这是否适用于他们或我错过了什么,我将不胜感激。

谢谢

我正在使用这些库:

    <script src="js/three.min.js"></script>
    <script src="js/PointerLockControls.js"></script>
    <script src="js/OrbitControls.js"></script>
    <script src="js/ImprovedNoise.js"></script>
    <script src="js/FirstPersonControls.js"></script>
    <script src="js/Detector.js"></script>

这是js: (我改变的唯一另一件事是我没有包含统计数据库,所以相应的代码在下面被注释掉)

        var container, stats;
        var camera, controls, scene, renderer;
        var mesh, texture;
        var worldWidth = 256, worldDepth = 256,
        worldHalfWidth = worldWidth / 2, worldHalfDepth = worldDepth / 2;
        var clock = new THREE.Clock();
        var helper;
        var raycaster = new THREE.Raycaster();
        var mouse = new THREE.Vector2();
        init();
        animate();
        function init() {
            container = document.getElementById( 'blocker' );
            camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 20000 );
            scene = new THREE.Scene();
            controls = new THREE.OrbitControls(camera);
            controls.center.set( 0.0, 100.0, 0.0 );
            controls.userPanSpeed = 100;
            data = generateHeight( worldWidth, worldDepth );
            controls.center.y = data[ worldHalfWidth + worldHalfDepth * worldWidth ] + 500;
            camera.position.y =  controls.center.y + 2000;
            camera.position.x = 2000;
            var geometry = new THREE.PlaneBufferGeometry( 7500, 7500, worldWidth - 1, worldDepth - 1 );
            geometry.rotateX = - Math.PI / 2 ;
            var vertices = geometry.attributes.position.array;
            for ( var i = 0, j = 0, l = vertices.length; i < l; i ++, j += 3 ) {
                vertices[ j + 1 ] = data[ i ] * 10;
            }
            geometry.computeFaceNormals();
            texture = new THREE.Texture( generateTexture( data, worldWidth, worldDepth ) );
            texture.wrapS = THREE.ClampToEdgeWrapping;
            texture.wrapT = THREE.ClampToEdgeWrapping;
            mesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { map: texture } ) );
            scene.add( mesh );
            var geometry = new THREE.CylinderGeometry( 0, 20, 100, 3 );
            geometry.translate = 0, 50, 0 ;
            geometry.rotateX = Math.PI / 2 ;
            helper = new THREE.Mesh( geometry, new THREE.MeshNormalMaterial() );
            scene.add( helper );
            renderer = new THREE.WebGLRenderer();
            renderer.setClearColor( 0xbfd1e5 );
            renderer.setPixelRatio( window.devicePixelRatio );
            renderer.setSize( window.innerWidth, window.innerHeight );
            container.innerHTML = "";
            container.appendChild( renderer.domElement );
            container.addEventListener( 'mousemove', onMouseMove, false );
            //stats = new Stats();
            //stats.domElement.style.position = 'absolute';
            //stats.domElement.style.top = '0px';
            //container.appendChild( stats.domElement );
            //
            window.addEventListener( 'resize', onWindowResize, false );
        }
        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize( window.innerWidth, window.innerHeight );
        }
        function generateHeight( width, height ) {
            var size = width * height, data = new Uint8Array( size ),
            perlin = new ImprovedNoise(), quality = 1, z = Math.random() * 100;
            for ( var j = 0; j < 4; j ++ ) {
                for ( var i = 0; i < size; i ++ ) {
                    var x = i % width, y = ~~ ( i / width );
                    data[ i ] += Math.abs( perlin.noise( x / quality, y / quality, z ) * quality * 1.75 );
                }
                quality *= 5;
            }
            return data;
        }
        function generateTexture( data, width, height ) {
            var canvas, canvasScaled, context, image, imageData,
            level, diff, vector3, sun, shade;
            vector3 = new THREE.Vector3( 0, 0, 0 );
            sun = new THREE.Vector3( 1, 1, 1 );
            sun.normalize();
            canvas = document.createElement( 'canvas' );
            canvas.width = width;
            canvas.height = height;
            context = canvas.getContext( '2d' );
            context.fillStyle = '#000';
            context.fillRect( 0, 0, width, height );
            image = context.getImageData( 0, 0, canvas.width, canvas.height );
            imageData = image.data;
            for ( var i = 0, j = 0, l = imageData.length; i < l; i += 4, j ++ ) {
                vector3.x = data[ j - 2 ] - data[ j + 2 ];
                vector3.y = 2;
                vector3.z = data[ j - width * 2 ] - data[ j + width * 2 ];
                vector3.normalize();
                shade = vector3.dot( sun );
                imageData[ i ] = ( 96 + shade * 128 ) * ( 0.5 + data[ j ] * 0.007 );
                imageData[ i + 1 ] = ( 32 + shade * 96 ) * ( 0.5 + data[ j ] * 0.007 );
                imageData[ i + 2 ] = ( shade * 96 ) * ( 0.5 + data[ j ] * 0.007 );
            }
            context.putImageData( image, 0, 0 );
            // Scaled 4x
            canvasScaled = document.createElement( 'canvas' );
            canvasScaled.width = width * 4;
            canvasScaled.height = height * 4;
            context = canvasScaled.getContext( '2d' );
            context.scale( 4, 4 );
            context.drawImage( canvas, 0, 0 );
            image = context.getImageData( 0, 0, canvasScaled.width, canvasScaled.height );
            imageData = image.data;
            for ( var i = 0, l = imageData.length; i < l; i += 4 ) {
                var v = ~~ ( Math.random() * 5 );
                imageData[ i ] += v;
                imageData[ i + 1 ] += v;
                imageData[ i + 2 ] += v;
            }
            context.putImageData( image, 0, 0 );
            return canvasScaled;
        }
        //
        function animate() {
            requestAnimationFrame( animate );
            render();
            //stats.update();
        }
        function render() {
            controls.update( clock.getDelta() );
            renderer.render( scene, camera );
        }
        function onMouseMove( event ) {
            mouse.x = ( event.clientX / renderer.domElement.clientWidth ) * 2 - 1;
            mouse.y = - ( event.clientY / renderer.domElement.clientHeight ) * 2 + 1;
            raycaster.setFromCamera( mouse, camera );
            // See if the ray from the camera into the world hits one of our meshes
            var intersects = raycaster.intersectObject( mesh );
            // Toggle rotation bool for meshes that we clicked
            if ( intersects.length > 0 ) {
                helper.position.set( 0, 0, 0 );
                helper.lookAt( intersects[ 0 ].face.normal );
                helper.position.copy( intersects[ 0 ].point );
            }
        }

1 个答案:

答案 0 :(得分:0)

看起来像data数组,只有高度信息(即y轴值)。它还应包含与高度值对应的x轴和z轴值。

generateHeight()循环j做什么?看起来你要覆盖data数组4次。