three.js+vue3点光源不生效的另外一个可能

问题

在尝试3D项目的时候，明明按照教程一步步来的，可是点光源就是不生效，模型就是黑色。

搜索一番都是说改模型材质。MeshLambertMaterial 早就改成这个材质了，还是不行。

还有说是光源位置问题，也尝试过移动位置，但是不起作用。

解决：

后来发现，我安装的three.js版本：^0.160.0，目前的最新版，于是尝试降级，我选择了

^0.150.1 版本，模型瞬间就有光了！

demo:

最后附上demo源码：

<template>
  <div class="contain" ref="containerRef"></div>
</template>

<script setup lang='ts'>
import * as THREE from 'three'
import { ref, reactive, onMounted } from 'vue'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'

const containerRef = ref<HTMLDivElement>()
// 创建场景
const scene = new THREE.Scene()
// 创建照相机
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)
// 设置摄像机位置
camera.position.set(-30, 40, 30)
// 设置摄像机朝向（看哪）
camera.lookAt(scene.position)
// webgl渲染器
const renderer = new THREE.WebGLRenderer()
renderer.setClearColor(new THREE.Color(0xeeeeee))
renderer.setSize(window.innerWidth, window.innerHeight)
// 可以渲染阴影
renderer.shadowMap.enabled = true

// 光源
function point() {
  let point = new THREE.SpotLight(0xffffff) //设置灯光的颜色
  point.position.set(80, 100, 80) //点光源位置
  point.angle = Math.PI / 10 //设置投影的程度
  point.shadow.mapSize.set(1024, 1024)
  scene.add(point)
  point.castShadow = true //灯光投影
}

// 地面
function plane() {
  // 添加地面
  const planeGeometry = new THREE.PlaneGeometry(60, 20)
  // 添加材质
  const meshBasicMaterial = new THREE.MeshLambertMaterial({ color: 0x999999 })
  const plane = new THREE.Mesh(planeGeometry, meshBasicMaterial)
  // 接受阴影
  plane.receiveShadow = true
  // 调整位置
  plane.rotation.x = -0.5 * Math.PI //放平
  plane.position.x = 15
  plane.position.y = 0
  plane.position.z = 0
  scene.add(plane)
}

// 立方体
function cube() {
  // 添加几何体
  const cubeGeometry = new THREE.BoxGeometry(4, 4, 4)
  const cubeMaterial = new THREE.MeshLambertMaterial({ color: 0xff0000 })
  const cube = new THREE.Mesh(cubeGeometry, cubeMaterial)
  cube.position.set(2, 2, 2)
  scene.add(cube)
  cube.castShadow = true
}

// 球
function sphere() {
  // 球体
  const sphereGeometry = new THREE.SphereGeometry(4)
  const sphereMaterial = new THREE.MeshLambertMaterial({ color: 0x7777ff, wireframe: true })
  const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial)
  sphere.castShadow = true
  sphere.position.x = 20
  sphere.position.y = 4
  sphere.position.z = 0
  scene.add(sphere)
}

// 球
function sphere2() {
  // 球体
  const sphereGeometry = new THREE.SphereGeometry(2)
  const sphereMaterial = new THREE.MeshLambertMaterial({ color: 0x7777ff })
  const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial)
  //sphere.translateX(10)
  /* sphere.position.x = 10
  sphere.position.y = 2
  sphere.position.z = 0 */
  sphere.position.set(10, 2, 2)
  sphere.castShadow = true
  scene.add(sphere)
}

// 灯泡
function lookAtGeom() {
  // 添加圆球
  const lookAtGeom = new THREE.SphereGeometry(0.5)
  const lookAtMesh = new THREE.Mesh(
    lookAtGeom,
    new THREE.MeshBasicMaterial({
      color: 'red'
    })
  )
  lookAtMesh.position.set(10, 10, -10)
  scene.add(lookAtMesh)
  // 添加点光源
  const pointLight = new THREE.PointLight('red')
  pointLight.distance = 100
  pointLight.position.copy(lookAtMesh.position)
  scene.add(pointLight)
}

plane()
cube()
sphere()
point()
sphere2()
lookAtGeom()

// 环境光
const light = new THREE.AmbientLight(0xffffff, 0.1)
light.position.set(0, 0, 0)
scene.add(light)

// 添加坐标系
const axes = new THREE.AxesHelper(20)
scene.add(axes)

let animloop = () => {
  render()
  const controls = new OrbitControls(camera, renderer.domElement) //创建控件对象
  controls.addEventListener('change', render) //监听鼠标、键盘事件
}
let render = () => {
  renderer.render(scene, camera) //执行渲染操作
}
animloop()

onMounted(() => {
  containerRef.value?.appendChild(renderer.domElement)
  renderer.render(scene, camera)
})
</script>