版本号174
html代码
<!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>
// 这样写就可以像es6那样 import 导入，比如 from "three",就会去找下面的three.js/build/three.module.js
<script type="importmap">
{
"imports": {
"three": "../../../three.js/build/three.module.js",
"three/addons/":"../../../three.js/examples/jsm/"
}
}
</script>
<script type="module">
</script>
<script src="./index.js" type="module">
</script>
</body>
</html>
js代码
import * as THREE from 'three';
// 引入相机控件
import { OrbitControls } from "three/addons/controls/OrbitControls.js"
// 定义相机输出的画布的尺寸 单位 像素
const width=800
const height=500
// 创建三维场景
const scene = new THREE.Scene();
// 给三维场景添加物体
// 定一个几何体 长方体 长宽高都是100
const geometry = new THREE.BoxGeometry(100, 100, 100);
// 创建一个材质对象
/*
* 网格材质对象
*/
const material = new THREE.MeshLambertMaterial({
color: 0x78EE28, // 设置颜色 红色
});
// 创建一个网格模型
const mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0, 0, 0);
// 添加到场景中
scene.add(mesh);
// 创建一个三维坐标轴
const axesHelper=new THREE.AxesHelper(150);
// 坐标轴对象添加到三维场景中
scene.add(axesHelper)
// 防创建一个点光源
// 设置点光源位置 参数1素颜色，参数2强度
/**
*
* 参数1：点光源颜色
* 参数2： 光照强度 默认1
* 参数3 光源照射的最大距离 默认值为 0（无限远）。
* 参数4 沿着光照距离的衰退量。默认值为 2。
*
*/
const pointLight=new THREE.PointLight(0xffffff,1)
pointLight.pointLight=1
pointLight.decay=0.0 //光源衰减 禁用
// 光源位置 x,y z 位置
pointLight.position.set(800,150,200)
//光源也需要添加三维场景
scene.add(pointLight)
// 创建一个相机
// 相机位置在网格模型上方 近裁截面1 远裁离3000
const camera=new THREE.PerspectiveCamera(40,width/height,1,3000)
// 设置相机位置
// camera.position.set(-2000,200,200);
camera.position.set(400,200,100)
// 相机的实现 观察点的坐标
camera.lookAt(0,0,0) // 相机观察坐标原点 X Y Z 坐标
// camera.lookAt(mesh.position) //指向网格模型mesh
// 创建一个渲染器
const renderer =new THREE.WebGLRenderer()
renderer.setSize(width,height); // 设置渲染器的尺寸 canvas画布宽高度
renderer.render(scene,camera); //执行渲染操作 将场景中的内容 渲染到相机中
//、
document.body.appendChild(renderer.domElement);
// 创建相机控件对象
// 参数 相机 渲染器
const controls =new OrbitControls(camera,renderer.domElement);
// 监听相机的移动
controls.addEventListener('change',function(e){
console.log("哈哈哈",e)
renderer.render(scene,camera);
})
如图
这个内容可以根据鼠标旋转，位置改变