0

虽然我知道你们中的许多人可能没有弄乱 OWF（Ozone Widge 框架），但它只是通过服务器上的订阅服务进行通信的 wigetized html 页面。

我正在使用的简单示例：http: //blog.thematicmapping.org/2013/10/textural-terrains-with-threejs.html

在导航到 Google Chrome 中的 html 页面时，我可以通过 THREE.ImageUtils.loadTexture() 成功添加纹理。但是，当我在 Google Chrome 中使用 OWF 并将我的小部件指向 html 页面时，我只能让它加载网格。如果我尝试加载纹理，它完全是黑色的。因此，它与 (chrome --allow-file-access-from-files) 无关。我已经验证了我从threejs.org 尝试过的几个示例会发生这种情况。显然，它与 OWF 实现有关，但我的印象是这些框架继承了运行它的浏览器的属性（我可能完全错了）......因此，我认为它会起作用。

编辑：我犯了一个糟糕的错误，即假设它是导致麻烦的小部件化框架。我将其中一个小部件直接链接到节点网站，无法成功渲染地形材质。然后，我尝试通过 node.js 服务器访问它，但没有成功。

这是代码，如果有人能告诉我为什么它是黑色的......

<!doctype html>
<html lang="en">
<head>
<title>three.js - Jotunheimen</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
    body { margin: 0; overflow: hidden; }
</style>
</head>
<body>
<div id="webgl"></div>
<script src="jsANDcss/3D/three.min.js"></script>
<script src="jsANDcss/3D/TrackballControls.js"></script> 
<script src="jsANDcss/3D/TerrainLoader.js"></script> 
<script>

    window.addEventListener( 'resize', onWindowResize, false );
    var width  = window.innerWidth,
        height = window.innerHeight;

    var scene = new THREE.Scene();
    /*scene.add(new THREE.AmbientLight(0xeeeeee));*/

    var camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000);
    camera.position.set(0, -30, 30);
    var controls = new THREE.TrackballControls(camera); 

    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height);

    var material;
    var texture;
    var terrainLoader = new THREE.TerrainLoader();
    terrainLoader.load('jsANDcss/3D/jotunheimen.bin', function(data) {

        var geometry = new THREE.PlaneGeometry(60, 60, 199, 199);

        for (var i = 0, l = geometry.vertices.length; i < l; i++) {
            geometry.vertices[i].z = data[i] / 65535 * 5;
        }

        var texture = THREE.ImageUtils.loadTexture('jsANDcss/3D/jotunheimen-texture.jpg');
        var material = new THREE.MeshPhongMaterial({
            map: texture

            /*wireframe: true*/
        });


        var plane = new THREE.Mesh(geometry, material);
        material.needsUpdate = true;
        scene.add(plane);

    });





    render();
    document.getElementById('webgl').appendChild(renderer.domElement);


    function render() {
        controls.update();    
        requestAnimationFrame(render);
        renderer.render(scene, camera);
    }
    function onWindowResize() {

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

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

        controls.handleResize();

    }

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

1 回答 1

0

如果使用MeshPhongMaterial，则需要在场景中添加灯光。如果您不想添加灯光，请使用MeshBasicMaterial.

另外，不要设置material.needsUpdate = true;. 装载机为你做这件事。加载是异步的，needsUpdate需要在正确的时间设置标志。

考虑在加载程序回调中将飞机添加到场景中，而不是。

此外，如果您正在修改顶点，则需要重新计算一些东西：

geometry.computeCentroids();
geometry.computeFaceNormals();
geometry.computeVertexNormals();    // required if you want your terrain "smooth"

三.js r.62

于 2013-10-29T13:41:36.427 回答