three.js 添加光源无效?
js最后一段是添加光源的,但是不生效.代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="canvas" style="margin-top: 200px;margin-left: 100px;"></div>
</body>
<script src="https://cdn.jsdelivr.net/npm/three@0.134.0/build/three.min.js"></script>
<script>
// 创建3D场景对象Scene
const scene = new THREE.Scene();
//创建一个长方体几何对象Geometry
const geometry = new THREE.BoxGeometry(100, 100, 100);
//创建一个材质对象Material
// MeshLambertMaterial 漫反射材质受光照影响
// MeshBasicMaterial 基础材质不受影响
const material = new THREE.MeshLambertMaterial({
color: 0xff0000,//设置材质颜色
transparent: true,//开启透明
opacity: 0.8,//设置透明度
});
const mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
mesh.position.set(0, 10, 0); //设置网格模型在三维空间中的位置坐标,默认是坐标原点
// 将模型mesh添加到scene
mesh.receiveShadow = true; // 物体接收阴影
mesh.castShadow = true; // cast投射,方块投射阴影
scene.add(mesh);
const edges = new THREE.EdgesHelper(mesh, '#000');//设置边框,可以旋转
edges.position.set(0, 10, 0); // 边框也需要设置位置坐标
// 将边框edges添加到scene
scene.add(edges);
const width = 800; //宽度
const height = 500; //高度
const camera = new THREE.PerspectiveCamera(30, width / height, 1, 3000);
// 实例化一个透视投影相机对象
camera.position.set(300, 200, 200);
camera.lookAt(mesh.position);//指向mesh对应的位置
// 创建渲染器对象
const renderer = new THREE.WebGLRenderer();
renderer.setClearColor('#ffffff')
renderer.setSize(width, height);
renderer.render(scene, camera); //执行渲染操作
document.getElementById('canvas').appendChild(renderer.domElement);
//点光源:两个参数分别表示光源颜色和光照强度
const pointLight = new THREE.PointLight(0xffffff,1)
pointLight.position.set(300,100,300);
scene.add(pointLight);
</script>
</html>
回复
1个回答
test
2024-06-29
光源的添加要在 renderer 之前
回复
适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容