为什么three.js点光源添加后不起作用?
// 引入threejsimport * as THREE from 'three';import { OrbitControls } from 'three/addons/controls/OrbitControls.js';// 1.创建一个三维场景sceneconst scene = new THREE.Scene();const geometry = new THREE.BoxGeometry(100, 100, 100);// * 添加光照// ! MeshBasicMaterial 不受光材质// ! MeshLambertMaterial 漫反射 受光材质const material = new THREE.MeshLambertMaterial({color: 0x0000ff});// 2。创建网格模型const mesh = new THREE.Mesh(geometry, material);// mesh.position.set(0, 0, 0); // * 集合体的位置 默认原点scene.add(mesh);// * 创建一个三维坐标轴const axesHelper = new THREE.AxesHelper(250);scene.add(axesHelper);// * 创建一个光源const light = new THREE.PointLight(0xffffff, 1);light.position.set(100, 100, 30); // * 设置光源位置scene.add(light); // * 添加光源const pointLightHelper = new THREE.PointLightHelper(light, 10);scene.add(pointLightHelper);// 3.用来设置canvas的宽高const sizes = { width: 1200, height: 800,};// 4.透视相机设置const camera = new THREE.PerspectiveCamera( 45, sizes.width / sizes.height, 1, 30000,);// * 改变相机位置camera.position.set(400, 400, 400); // * 斜对角位置camera.lookAt(0, 0, 0);// 5.创建渲染器const renderer = new THREE.WebGLRenderer();renderer.setSize(sizes.width, sizes.height); // 设置渲染区域尺寸renderer.render(scene, camera);// 把结果canvas画布添加到网页上document.getElementById('main').appendChild(renderer.domElement);const orbitControls = new OrbitControls(camera, renderer.domElement);orbitControls.addEventListener('change', () => { renderer.render(scene, camera);});<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script type="importmap"> { "imports": { "three": "../../build/three.module.js", "three/addons/": "../../jsm/" } } </script> <style> .mainCanvas { width: 100%; height: 100%; } </style></head><body> <div id="main" class="mainCanvas"></div></body></html><script src="./script.js" type="module"></script>
把PointLight改成平行光就可以显示出来。
共有3个答案
创建的几何体挡住了点光源，调一下点光源的position就行了，
const geometry = new THREE.BoxGeometry(100, 100, 100);light.position.set(100, 100, 30);
从坐标看，这个点光源在 Box 的内部
Box 加上了材质，内部的光也透不出来，所以就没效果了
在three.js中，PointLight（点光源）和DirectionalLight（平行光）都是用来照亮场景的光源类型，但它们的工作方式有所不同。
PointLight是从一个点向所有方向发射光线的光源，它会产生一个逐渐减弱的光照效果，离光源越远，光照强度越小。而DirectionalLight是从一个无限远的方向照射过来的光源，它产生的是一个恒定的光照效果，无论物体离光源多远，光照强度都不会改变。
在你的代码中，点光源没有产生预期的效果，可能是因为点光源的位置设置得不够远离物体，导致光照强度在物体上减弱得太快，几乎看不到效果。另外，由于你使用的是MeshLambertMaterial材质，这种材质是漫反射材质，它会产生更加平滑的光照效果，但也可能因为光照强度不足而看不出效果。
为了解决这个问题，你可以尝试调整点光源的位置，让它远离物体一些，或者增加它的强度（通过修改light.intensity属性）。另外，你也可以尝试使用其他类型的材质，比如MeshPhongMaterial或MeshStandardMaterial，看看是否能够看到光照效果。
如果调整点光源的位置和强度后仍然无法看到光照效果，那么可能是你的场景中缺少其他需要光照的物体，或者光照方向与相机视线方向一致，导致光照效果不明显。你可以尝试添加更多的物体，或者调整相机和光源的位置和角度，以便更好地观察光照效果。
-
添加平行光是直接定义光线照射物体的方向，点光源的光线是发散的，无法直接定义它的光线方向，不过只要定义好点光源的位置坐标，然后与某个顶点的位置坐标进行减法运算，计算结果就是光源射到该顶点的方向。 这很好理解，在三维空间中两个点确定一条直线，几何体顶点代表一个点，点光源的位置代表一个点，直线所在的方向就是光线的方向，在三维笛卡尔坐标系中，把两个顶点的xyz三个分量相减就可以得到一个表示直线方向的向量，
-
我已经使用PointSMaterial在三中创建粒子.js控制台中它工作正常，但屏幕上没有出现任何内容，我的屏幕是黑色的，我的相机的位置是 基础摄像头 常量相机=新THREE.PerspectiveCamera（75，sizes.width/sizes.height，0.1,100） 相机位置 z = 3 scene.add(相机) 我没有忘记把它添加到场景中 这是我的代码的图片
-
我刚刚安装了node.js，还在环境变量中设置了PATH。路径值为 短期内 android命令正常工作。
-
在三维场景中有时候需要设置模型的阴影，也就是阴影贴图或者说光照贴图·lightMap，一般Threejs加载外部模型的光照贴图·lightMap，三维模型加载器可以自动设置，不需要程序员通过代码去设置，不过为了让大家更好理解光照贴图·lightMap，这里就通过Three.js代码设置场景模型的阴影贴图·lightMap。 //创建一个平面几何体作为投影面 var planeGeometry =
-
问题内容： 我正在尝试从JSON网址获取集合。骨干网确实发送了请求并得到了响应，但是在它之后的集合中没有： 这是我的JavaScript： 响应中的JSON 响应中的Content-Type HTTP标头为。 为什么不将其加载到集合中？JSON是否正确？ 一些更多的代码： 问题答案： 是异步的。尝试 要么 要么
-
问题内容： 我有三部分字符串，每个部分用 符号分隔 。例如， 现在，当我使用这样的方法拆分它时： 它包含整个字符串作为单个元素的数组。 但是当我使用这个： 它完美的作品是什么，我想这意味着 现在的数组包含，并分别对指数0,1和2。 我想知道为什么第一次使用时不起作用，因为我在使用 问题答案： 因为字符是在正则表达式中用来标记行尾的保留令牌。因此，您必须使用进行 转义。