Question

以下代码是使用相同材料创建的两个立方体。使用new THREE.BoxGeometry()创建第一个立方体几何体，并从混合器加载第二个立方体几何体。第一个看起来像预期通过显示从图像加载的纹理而第二个看起来像只显示图像中的一种颜色（see result）。有什么区别以及如何正确设置从搅拌机加载的立方体上的材料？

提前谢谢！

test.js：

var scene, camera, renderer;

function init() {
    scene = new THREE.Scene();
    scene.fog = new THREE.FogExp2(0xcccccc, 0.002);
    var light = new THREE.AmbientLight(0xffffff);
    scene.add(light);
    initObjects();
    camera = new THREE.PerspectiveCamera(20, window.innerWidth / window.innerHeight, 1, 1000);
    camera.position.set(20, 20, 20);
    camera.lookAt(scene.position);
    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
}

function initObjects() {
    var material_leather_brown = new THREE.MeshLambertMaterial({map: THREE.ImageUtils.loadTexture('brown_leather.jpg')});
    scene.add(new THREE.Mesh(new THREE.BoxGeometry(2, 2, 2), material_leather_brown.clone()));
    var loader = new THREE.JSONLoader();
    loader.load('cube.json', function (geometry) {
        scene.add(new THREE.Mesh(geometry, material_leather_brown.clone()));});
}

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

init();
render();

cube.json：

{
    "metadata": {
        "type": "Geometry",
        "generator": "io_three",
        "uvs": 0,
        "faces": 6,
        "version": 3,
        "vertices": 8,
        "normals": 8
    },
    "uvs": [],
    "faces": [33,0,1,2,3,0,1,2,3,33,4,7,6,5,4,5,6,7,33,0,4,5,1,0,4,7,1,33,1,5,6,2,1,7,6,2,33,2,6,7,3,2,6,5,3,33,4,0,3,7,4,0,3,5],
    "normals": [0.577349,-0.577349,-0.577349,0.577349,-0.577349,0.577349,-0.577349,-0.577349,0.577349,-0.577349,-0.577349,-0.577349,0.577349,0.577349,-0.577349,-0.577349,0.577349,-0.577349,-0.577349,0.577349,0.577349,0.577349,0.577349,0.577349],
    "vertices": [1,0.000214,-6.19525,1,0.000214,-4.19525,-1,0.000214,-4.19525,-1,0.000214,-6.19525,1,2.00021,-6.19525,0.999999,2.00021,-4.19525,-1,2.00021,-4.19525,-1,2.00021,-6.19525],
    "name": "CubeGeometry"
}

的test.html：

<!doctype html>
<html style="height: 100%;">
<head>
    <title>Test</title>
    <style>
        html, body {height: 100%;}
    </style>
</head>
<body>
    <script src="three.min.js"></script>
    <script src="test.js"></script>
</body>
</html>

brown_leather.jpg

Answer 1

材质（纹理）必须作为UV贴图分配给对象，并且从blender导出的是JSON文件，因此参数＆＃34; uvs＆＃34;必须填写;

"uvs": [],

Check this example three.js r.73 in jsfiddle

Make a practice with examples

基于图像的纹理未在从blender加载的网格上按预期呈现

1 个答案: