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

coder 2023-07-06 原文

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

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

在这里查看了一些关于 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 行(不是最小版本)，其中是 bufferGuessUVType(material) 函数 - material 未定义。这让我相信在我的一个/所有 Material 定义中有些东西是不正确的。

使用 three.js r58。

此时真的没有 HTML 或 CSS，只有 JS

我可以很高兴地看到一个立方体在所有六个面上旋转时都显示相同的图像，但不会显示不同的图像。这些图像只是一个骰子点的图像，1 - 6。

再给我一点时间，如果需要我可以做一个 fiddle

最佳答案

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

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

scene.add( dice );

小心不要从网上复制旧示例。

始终检查 Migration Wiki寻求升级到当前版本的帮助。

three.js r.85

关于javascript - Three.js 立方体，每个面都有不同的纹理，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17418118/

有关javascript - Three.js 立方体，每个面都有不同的纹理的更多相关文章

Ruby 元类 : why three when defined singleton methods? - 2
让我们计算MRI范围内的类别:defcount_classesObjectSpace.count_objects[:T_CLASS]endk=count_classes用类方法定义类:classAdefself.foonilendend然后运行:putscount_classes-k#=>3请解释一下，为什么是三个？最佳答案查看MRI代码，每次你创建一个Class时，在Ruby中它是Class类型的对象，ruby会自动为这个新类创建“元类”类，这是另一个单例类型的Class对象。C函数调用(class.c)是:rb_define
java - 为什么 ruby modulo 与 java/other lang 不同？ - 2
我基本上来自Java背景并且努力理解Ruby中的模运算。(5%3)(-5%3)(5%-3)(-5%-3)Java中的上述操作产生，2个-22个-2但在Ruby中，相同的表达式会产生21个-1-2.Ruby在逻辑上有多擅长这个？模块操作在Ruby中是如何实现的？如果将同一个操作定义为一个web服务，两个服务如何匹配逻辑。最佳答案在Java中，模运算的结果与被除数的符号相同。在Ruby中，它与除数的符号相同。remainder()在Ruby中与被除数的符号相同。您可能还想引用modulooperation.
ruby-on-rails - 在 RSpec 中，如何以任意顺序期望具有不同参数的多条消息？ - 2
RSpec似乎按顺序匹配方法接收的消息。我不确定如何使以下代码工作:allow(a).toreceive(:f)expect(a).toreceive(:f).with(2)a.f(1)a.f(2)a.f(3)我问的原因是a.f的一些调用是由我的代码的上层控制的，所以我不能对这些方法调用添加期望。最佳答案 RSpecspy是测试这种情况的一种方式。要监视一个方法，用allowstub，除了方法名称之外没有任何约束，调用该方法，然后expect确切的方法调用。例如:allow(a).toreceive(:f)a.f(2)a.f(1)
ruby - 将n维数组的每个元素乘以Ruby中的数字 - 2
在Ruby中，是否有一种简单的方法可以将n维数组中的每个元素乘以一个数字？这样:[1,2,3,4,5].multiplied_by2==[2,4,6,8,10]和[[1,2,3],[1,2,3]].multiplied_by2==[[2,4,6],[2,4,6]]？(很明显，我编写了multiplied_by函数以区别于*，它似乎连接了数组的多个副本，不幸的是这不是我需要的)。谢谢! 最佳答案它的长格式等价物是:[1,2,3,4,5].collect{|n|n*2}其实并没有那么复杂。你总是可以使你的multiply_by方法:c
ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2
我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的
ruby-on-rails - 如何用不同的用户运行nginx主进程 - 2
A/ctohttp://wiki.nginx.org/CoreModule#usermaster进程曾经以root用户运行，是否可以以不同的用户运行nginxmaster进程？最佳答案只需以非root身份运行init脚本(即/etc/init.d/nginxstart)，就可以用不同的用户运行nginxmaster进程。如果这真的是你想要做的，你将需要确保日志和pid目录(通常是/var/log/nginx&/var/run/nginx.pid)对该用户是可写的，并且您所有的listen调用都是针对大于1024的端口(因为绑定(
ruby - 从 sinatra 中的 before do block 返回不同的值 - 2
有没有办法在sinatra的beforedoblock中停止执行并返回不同的值？beforedo#codeishere#Iwouldliketo'return"Message"'#Iwouldlike"/home"tonotgetcalled.end//restofthecodeget'/home'doend 最佳答案 beforedohalt401,{'Content-Type'=>'text/plain'},'Message!'end如果你愿意，你可以只指定状态，这里有状态、标题和正文的例子
ruby-on-rails - Sunspot:如何对具有不同值的多个字段进行全文查询？ - 2
我想用sunspot重现以下原始solr查询q=exact_term_text:fooORterm_textv:foo*ORalternate_text:bar*但我无法通过标准的太阳黑子界面理解这是否可能以及如何实现，因为看起来:fulltext方法似乎不接受多个文本/搜索字段参数我不知道将什么参数作为第一个参数传递给fulltext，就好像我通过了"foo"或"bar"结果不匹配如果我传递一个空参数，我得到一个q=*:*范围过滤器(例如with(:term).starting_with('foo*')(顾名思义)作为过滤器查询应用，因此不参与评分。似乎可以手动编写字符串(或者可能使
ruby - 每个页面上的 Jekyll 分页 - 2
据我们所知，Jekyll默认分页仅支持index.html，我想创建blog.html并在那里包含分页。有什么解决办法吗？最佳答案如果您创建一个名为/blog的目录并在其中放置一个index.html文件，那么您可以向_config.yml表示paginate_path:"blog/page:num"。不是使用根文件夹中的默认index.html作为分页器模板，而是使用/blog/index.html。分页器将根据需要生成类似/blog/page2/和/blog/page3/的页面。这将使您到达yourwebsite.com/b
ruby - 拆分字符串并分配给不同的变量 - 2
我从ui中得到日期范围为-approved_between"=>"2013-03-17-2013-03-18"我需要拆分此approved_start_date="2013-03-17"和approved_end_date="2013-03-18"...我希望使用它在mysql中查询，因为mysql中的日期格式是created_at:2012-07-2810:35:01.我正在做的是:approved=approved_between.split("")approved_start_date=approved[0]approved_end_date=approved[2]很确定这不是处

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

有关javascript - Three.js 立方体，每个面都有不同的纹理的更多相关文章

随机推荐