Question

我正在学习THREE.js r.74，并建造了一个太阳能系统模拟器。我正在尝试添加阴影，但是在第3个行星（地球）渲染之后我得到一个错误，并且没有其他行星渲染（或者它们被隐藏在视图之外）：

[.CommandBufferContext]RENDER WARNING: there is no texture bound to the unit 0

太阳是MeshBasicMaterial所以我不需要加载精灵或点亮它。

行星为MeshLambertMaterial，用于反射光线和投射/接收阴影。

我也注意到THREE.js barfs如果我设置网格来施放XOR接收阴影。

const canvas = document.getElementById('webgl')
// Helpers
function deg2Rad(deg) {
  return deg * (Math.PI * 2) / 360
}
function rad2Deg(rad) {
  return rad / ( (Math.PI * 2) / 360 )
}
function $(selector) {
  return document.querySelector(selector)
}

// Init THREE WebGL instance
const system = new THREE.Scene(),
      camera = new THREE.PerspectiveCamera(45, window.innerWidth/ window.innerHeight, 1, 72000),
      renderer = new THREE.WebGLRenderer({
        canvas: canvas
      })
renderer.setSize(window.innerWidth, window.innerHeight)
renderer.setClearColor(0x000000)
renderer.shadowMap.enabled = true
renderer.shadowMaptype = THREE.PCFSoftShadowMap
camera.position.z = 1100
system.rotateX(deg2Rad(15))

// Add the Sun
const lightObject = new THREE.Object3D()
const light = new THREE.PointLight(0xffffff, 1, 40000)
const sunGeo = new THREE.SphereGeometry(10, 12, 12)
const sunMaterial = new THREE.MeshBasicMaterial({
  color: 0xffff66
})
const sun = new THREE.Mesh(sunGeo, sunMaterial)
light.position.set(0, 0, 0.001)
light.castShadow = true
light.add(sun)
lightObject.add(light)

function newPlanet(color, size, pos) {
  const [x, y, z] = pos
  const orbit = new THREE.Object3D()
  const geo = new THREE.SphereGeometry(size, 20, 20)
  const material = new THREE.MeshLambertMaterial({
    color: color
  })
  const planet = new THREE.Mesh(geo, material)
  planet.position.set(x, y, z)
  orbit.add(planet)

  return orbit
}

// Create planets
const planets = {
  mercury: newPlanet(0xa57464,  10.0, [  390, 0, 0]),
  venus  : newPlanet(0xefddca,  24.8, [  720, 0, 0]),
  earth  : newPlanet(0x006666,  26.2, [ 1000, 0, 0]),
  mars   : newPlanet(0xce6235,  13.9, [ 1524, 0, 0]),
  jupiter: newPlanet(0xedb696, 292.7, [ 5203, 0, 0]),
  saturn : newPlanet(0xc6996f, 246.0, [ 9539, 0, 0]),
  uranus : newPlanet(0x18bcba, 105.0, [19180, 0, 0]),
  neptune: newPlanet(0x1c8ace,  99.6, [30060, 0, 0])
}

// Add planets
system.add(lightObject)
Object.keys(planets).forEach(planet => {
  system.add(planets[planet])
  planets[planet].children[0].receiveShadow = true
  planets[planet].children[0].castShadow = true
})

function render() {
  sun.rotateX(.01)
  sun.rotateY(.01)
  // rotation is earth rotation (0.1) / earth years
  planets.mercury.rotateY(.042)
  planets.venus.rotateY(.0161)
  planets.earth.rotateY(.01)
  planets.mars.rotateY(.0053)
  planets.jupiter.rotateY(.00084)
  planets.saturn.rotateY(.00034)
  planets.uranus.rotateY(.00012)
  planets.neptune.rotateY(.00006)

  requestAnimationFrame(render)
  renderer.render(system, camera)
}
render()

Three.js点光影不工作＆gt; 3个网格

0 个答案: