Three.js 立方体,每个面都有不同的纹理

Posted

技术标签:

【中文标题】Three.js 立方体,每个面都有不同的纹理【英文标题】:Three.js cube with different texture on each face 【发布时间】:2013-06-29 09:06:50 【问题描述】:

我正在尝试创建一个三.js 立方体,每个面上都有不同的纹理。

基本上是一个骰子。这是在我的沙盒环境中,所以应该只制作一个旋转立方体,每边都有骰子图像(1-6)。完成后,我打算将其用于浏览器基础游戏。这个示例我只在 Chrome 中进行了测试,但我正在考虑将其更改为画布渲染器以获得额外的浏览器支持。

在这里查看了一些关于 SO 的问题以及大量其他谷歌搜索,虽然我得到了答案(实际上看起来相当简单),但我根本无法让它发挥作用。

我对 three.js 相当陌生,但不是 javascript

我用来参考的页面是

SO - three.js cube with different texture on each face

SO - three.js cube with different texture faces

evanz - Test three.js cube

和enriquemorenotent.com - three.js building a cube with different materials on each face

我的代码

var camera, scene, renderer, dice;

init();
animate();

function init() 
    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
    camera.position.set(110, 110, 250);
    camera.lookAt(scene.position);
    scene.add(camera);


    var materials = [
       new THREE.MeshLambertMaterial(
           map: THREE.ImageUtils.loadTexture('/Content/Images/dice-1-hi.png')
       ),
       new THREE.MeshLambertMaterial(
           map: THREE.ImageUtils.loadTexture('/Content/Images/dice-2-hi.png')
       ),
       new THREE.MeshLambertMaterial(
           map: THREE.ImageUtils.loadTexture('/Content/Images/dice-3-hi.png')
       ),
       new THREE.MeshLambertMaterial(
           map: THREE.ImageUtils.loadTexture('/Content/Images/dice-4-hi.png')
       ),
       new THREE.MeshLambertMaterial(
           map: THREE.ImageUtils.loadTexture('/Content/Images/dice-5-hi.png')
       ),
       new THREE.MeshLambertMaterial(
           map: THREE.ImageUtils.loadTexture('/Content/Images/dice-6-hi.png')
       )
    ];
    dice = new THREE.Mesh(
        new THREE.CubeGeometry(562, 562, 562, 1, 1, 1, materials),
        new THREE.MeshFaceMaterial());
    scene.add(dice);



function animate() 
    requestAnimationFrame(animate);
    dice.rotation.x += .05;
    dice.rotation.y += .05;
    dice.rotation.z += .05;
    renderer.render(scene, camera);

我得到的错误是

Uncaught TypeError: Cannot read property 'map' of undefined 

从 three.js 第 19546 行(不是最低版本)WHichi 是 bufferGuessUVType(material) 函数 - 材料未定义。这使我相信我的一个/所有材料定义中有些地方是不正确的。

使用three.js r58。

实际上没有 html 或 CSS,此时只有 JS

我可以很高兴地让一个立方体在所有六个面上旋转相同的图像,但不能使用不同的图像。图像只是一个骰子点的图像,1 - 6。

如果需要的话,如果有更多的时间,我可以做一个小提琴

【问题讨论】:

【参考方案1】:

编辑:THREE.MultiMaterial 已被弃用。您现在可以将材料数组直接传递给构造函数。像这样:

dice = new THREE.Mesh( new THREE.BoxGeometry( 562, 562, 562, 1, 1, 1 ), materials );

scene.add( dice );

小心从网上复制旧示例。

请始终查看Migration Wiki 以获取升级到当前版本的帮助。

three.js r.85

【讨论】:

魔法!!我想知道为什么 three.js 文档没有 CubeGeometry 构造函数的 7 个参数。干杯 具有讽刺意味的是,迁移 wiki 链接本身已腐烂:P @WestLangley 这不适用于使用 GLTFLoader 加载的对象 @CodeDezk 需要为材质设置特定位置的网格,来自其他来源的任意模型可能不像 BoxGeometry 那样具有。您可能需要为它打开一个单独的问题。

以上是关于Three.js 立方体,每个面都有不同的纹理的主要内容,如果未能解决你的问题,请参考以下文章

Three.js png 纹理 - alpha 呈现为白色而不是透明

SCNBox 每张脸上都有不同的颜色或纹理

使用vue学习three.js之加载和使用纹理-使用CubeCamera创建反光效果,动态环境贴图实现,立方体全景贴图

Three.js 运行时纹理/图像更新

Three.js 在 100 个立方体动画上崩溃

Three.js-设置环境纹理及加载hdr环境贴图