极客观点
项目管理
HarmonyOS
// 引入threejs
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
// 1.创建一个三维场景scene
const 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改成平行光就可以显示出来。
const geometry = new THREE.BoxGeometry(100, 100, 100);light.position.set(100, 100, 30);从坐标看，这个点光源在 Box 的内部
Box 加上了材质，内部的光也透不出来，所以就没效果了