在three.js中使用球体上的纹理
Using textures on spheres in three.js
我能够使用javascript和three.js库创建一个球体。然而,我有一个我想覆盖在球体顶部的图像,每当我这样做时,球体就会变成一个黑色球体,上面没有投影图像。以下是我如何实现它的:var renderer=new THREE.WebGLRenderer();renderer.setSize(window.innerWidth,window.innerHeight);document.body.appendChild(renderer.domElement);
// camera
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 500;
// scene
var scene = new THREE.Scene();
// sphere
// the first argument of THREE.SphereGeometry is the radius, the second argument is
// the segmentsWidth, and the third argument is the segmentsHeight. Increasing the
// segmentsWidth and segmentsHeight will yield a more perfect circle, but will degrade
// rendering performance
var texture = THREE.ImageUtils.loadTexture('beach.jpg', {}, function() {
renderer.render(scene, camera);
});
texture.needsUpdate = true;
// texture.wrapS = texture.wrapT = THREE.ClampToEdgeWrapping;
// texture.repeat.set( 125, 125 );
// texture.offset.set( 15, 15 );
// texture.needsUpdate = true;
var material = new THREE.MeshBasicMaterial({map: texture});
var sphere = new THREE.Mesh(new THREE.SphereGeometry(150, 100, 100), material);
//mesh = new THREE.Mesh(sphere, material);
//scene.add(mesh);
// var sphere = new THREE.Mesh(new THREE.SphereGeometry(150, 100, 100), new THREE.MeshNormalMaterial());
// sphere.overdraw = true;
scene.add(sphere);
renderer.render(scene, camera);
我已经尝试了所有的方法,但图像并没有成功地覆盖在球体的顶部,我该如何使用three.js来完成这项工作?我的"beach.jpg"文件与index.html.位于同一目录中
感谢您抽出时间,
尝试包含一个图像加载器。图片必须完整加载,然后才能用作纹理。更多详细信息:https://github.com/mrdoob/three.js/issues/1751
相关文章:
- 如何在three.js中为三角形添加纹理
- Three.js CanvasRenderer,在将图像纹理设置为平面时出现问题
- 显示纹理-maya到three.js
- 有没有一种方法可以在three.js中自定义纹理之间的转换
- 何时将Three.js纹理发送到GPU
- three.js CanvasRenderer-设置对象的初始颜色和透明度纹理
- 在球体上使用多重纹理[Three.js]
- three.js:纹理反馈循环(fbo-pingpong?)
- 具有Obj和Cubemap的Three.js场景,接收THbindTexture:纹理不能用于多个目标
- 将模型从Blender导出到Three.js时没有纹理
- 使用 Three.js THREE.textureLoader 预加载多个纹理
- 在 Three.js 中获取彩色平面而不是纹理
- 如何在 Three.js 中将 Collada 导入的纹理替换为着色器材质纹理
- WebGL / Three.js - 由纹理着色的粒子在移动相机时不规则地闪烁
- three.js earth没有加载纹理
- Three.js-Can't加载纹理
- Three.JS:如何使纹理相互重叠
- Three.js粒子系统每个粒子都有不同的纹理
- three.js:重用纹理
- 将iframe映射为纹理-three.js