草庐IT

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

我正在尝试创建一个每个面上都有不同纹理的three.js立方体。基本上是一个骰子。这是在我的沙盒环境中,所以应该只生成一个旋转的立方体,每边都有骰子图像(1-6)。完成后,我打算将其用于浏览器基础游戏。这个例子我只在Chrome中测试过,尽管考虑将其更改为Canvas渲染器以获得额外的浏览器支持。在这里查看了一些关于SO的问题和大量其他谷歌搜索,虽然我得到了答案(实际上看起来相当简单)但我就是无法让它工作。我是three.js的新手,但不是JavaScript。我用作引用的页面是SO-three.jscubewithdifferenttextureoneachfaceSO-three.

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

我正在尝试创建一个每个面上都有不同纹理的three.js立方体。基本上是一个骰子。这是在我的沙盒环境中,所以应该只生成一个旋转的立方体,每边都有骰子图像(1-6)。完成后,我打算将其用于浏览器基础游戏。这个例子我只在Chrome中测试过,尽管考虑将其更改为Canvas渲染器以获得额外的浏览器支持。在这里查看了一些关于SO的问题和大量其他谷歌搜索,虽然我得到了答案(实际上看起来相当简单)但我就是无法让它工作。我是three.js的新手,但不是JavaScript。我用作引用的页面是SO-three.jscubewithdifferenttextureoneachfaceSO-three.

javascript - 使用 THREE.LineBasicMaterial 的线条粗细

我正在使用下面的代码在我的three.js场景中创建数百行edgeGeometry[i]=newTHREE.Geometry();edgeGeometry[i].vertices[0]=v(x1,y1,z1);edgeGeometry[i].vertices[1]=v(x2,y2,z2);edgesMat[i]=newTHREE.LineBasicMaterial({color:0x6699FF,linewidth:1,fog:true});edge[i]=newTHREE.Line(edgeGeometry[i],edgesMat[i]);edge[i].type=THREE.Lin

javascript - 使用 THREE.LineBasicMaterial 的线条粗细

我正在使用下面的代码在我的three.js场景中创建数百行edgeGeometry[i]=newTHREE.Geometry();edgeGeometry[i].vertices[0]=v(x1,y1,z1);edgeGeometry[i].vertices[1]=v(x2,y2,z2);edgesMat[i]=newTHREE.LineBasicMaterial({color:0x6699FF,linewidth:1,fog:true});edge[i]=newTHREE.Line(edgeGeometry[i],edgesMat[i]);edge[i].type=THREE.Lin

javascript - 在 three.js 中动态创建二维文本

我有我在three.js中创建的3D模型。基于一些数据,我想创建一组由小文本标签装饰的箭头。这些标签应该是二维的。我似乎有两种选择:要么使用单独的Canvas元素创建纹理,然后在3D模型中使用该纹理,要么在3D模型的Canvas元素之上使用HTML。我想知道如何解决这个问题。哪个是“正确”的方法来做到这一点?非常欢迎任何建议和示例代码! 最佳答案 如果您不介意文本总是在最上面(例如,如果对象被其他东西遮挡,它的文本标签仍然可见并位于其他所有内容之上),并且文本不会受任何渲染(如灯光/阴影等)的影响,那么HTML是最简单的方式。下面是

javascript - 在 three.js 中动态创建二维文本

我有我在three.js中创建的3D模型。基于一些数据,我想创建一组由小文本标签装饰的箭头。这些标签应该是二维的。我似乎有两种选择:要么使用单独的Canvas元素创建纹理,然后在3D模型中使用该纹理,要么在3D模型的Canvas元素之上使用HTML。我想知道如何解决这个问题。哪个是“正确”的方法来做到这一点?非常欢迎任何建议和示例代码! 最佳答案 如果您不介意文本总是在最上面(例如,如果对象被其他东西遮挡,它的文本标签仍然可见并位于其他所有内容之上),并且文本不会受任何渲染(如灯光/阴影等)的影响,那么HTML是最简单的方式。下面是

javascript - 如何在 three.js 轴上旋转 3D 对象?

我对three.js中的旋转有很大的疑问我想在我的一个游戏中旋转我的3D立方体。//initgeometry=newTHREE.CubeGeometrygrid,grid,gridmaterial=newTHREE.MeshLambertMaterial{color:0xFFFFFF*Math.random(),shading:THREE.FlatShading,overdraw:true,transparent:true,opacity:0.8}foriin[1...@shape.length]othergeo=newTHREE.MeshnewTHREE.CubeGeometry(g

javascript - 如何在 three.js 轴上旋转 3D 对象?

我对three.js中的旋转有很大的疑问我想在我的一个游戏中旋转我的3D立方体。//initgeometry=newTHREE.CubeGeometrygrid,grid,gridmaterial=newTHREE.MeshLambertMaterial{color:0xFFFFFF*Math.random(),shading:THREE.FlatShading,overdraw:true,transparent:true,opacity:0.8}foriin[1...@shape.length]othergeo=newTHREE.MeshnewTHREE.CubeGeometry(g

javascript - Three.js 和加载跨域图片

我知道以前有人问过这个问题,而且我已经阅读了我能找到的所有问题和答案,但没有任何效果。我在本地服务器(IIS)上运行它。我正在尝试从imgur加载图像,然后使用代码将其用作对象的纹理:varsavedImage=/[^?]*$/.exec(location.search)[0];if(savedImage!=""){savedImageLoad("http://i.imgur.com/"+savedImage+".jpg");};functionsavedImageLoad(image){varmapOverlay=newTHREE.ImageUtils.loadTexture(ima

javascript - Three.js 和加载跨域图片

我知道以前有人问过这个问题,而且我已经阅读了我能找到的所有问题和答案,但没有任何效果。我在本地服务器(IIS)上运行它。我正在尝试从imgur加载图像,然后使用代码将其用作对象的纹理:varsavedImage=/[^?]*$/.exec(location.search)[0];if(savedImage!=""){savedImageLoad("http://i.imgur.com/"+savedImage+".jpg");};functionsavedImageLoad(image){varmapOverlay=newTHREE.ImageUtils.loadTexture(ima