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

原创

于 2023-12-28 09:56:27 发布 · 1.6k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

作者在尝试使用Three.js进行3D项目时遇到光源不生效的问题，经过检查发现是由于使用的Three.js版本过新（^0.160.0），将版本降级至^0.150.1后解决了光照问题。文章附有示例代码。

问题

在尝试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()
// 创