Question

我想在网格的某些部分（比如球体）上放置纹理（方形RGBA数组）。如何在Three.js中实现这一目标？谢谢你的帮助！

这是一个无效的example。例如，我想将纹理放在0~10E，-5S~5N区域。我应该使用glsl来完成这项任务吗？似乎Three.js没有提供这样的功能。

const width = 400, height = 300, radians = Math.PI / 180

// Create a sample data.
var nx = 360, ny = 180
var data = new Uint8Array(4 * nx * ny)
for (var i = 0; i < nx * ny; i += 4) {
  data[i+0] = 255
  data[i+1] = 0
  data[i+2] = 0
  data[i+3] = 122
}

var scene, camera, renderer, light, geometry, texture, material, sphere

scene = new THREE.Scene()
camera = new THREE.OrthographicCamera(-width / 2, width / 2, height / 2, -height / 2, 0.1, 10000)
camera.position.z = 500

renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.setClearColor('white', 1)
renderer.setSize(width, height)
document.body.appendChild(renderer.domElement)

light = new THREE.HemisphereLight('#fff', '#666', 1.5)
light.position.set(0, 500, 0)
scene.add(light)

geometry = new THREE.SphereGeometry(120, 20, 20, 0, 90 * radians, 60 * radians, 60 * radians)
texture = new THREE.DataTexture(data, nx, ny, THREE.RGBAFormat)
texture.magFilter = THREE.LinearFilter
texture.needsUpdate = true
material = new THREE.MeshBasicMaterial({ map: texture, wireframe: true })
sphere = new THREE.Mesh(geometry, material)
scene.add(sphere)

function render () {
  requestAnimationFrame(render)
  sphere.rotation.y += 0.01
  renderer.render(scene, camera)
}
render(

）

如何在Three.js中将纹理放在网格的某个部分上

0 个答案: