极客观点
项目管理
HarmonyOS
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>
光源的添加要在 renderer 之前