前言
学习教程：老陈 threejs课程
官方网站是在国外，在本地搭建threejs是为了更方便的查看官方文档、例子。
官方网站：threejs
搭建
下载开发环境的压缩包文件，github 有时候打不开，这里用国内的：https://gitcode.net/mirrors/mrdoob/three.js
下载完成后解压，用vscode打开
//安装依赖
npm install
//启动
npm run start
启动成功：
渲染第一个场景
视频教程中使用的parcel来搭建的项目，这里我们基于vue来进行开发。
搭建vue项目：使用Vite搭建Vue3 + Ts项目
安装threejs：
npm install three
//如果是ts环境还需要安装
npm i --save-dev @types/three
引入并打印输出
<script setup lang="ts">
import * as THREE from 'three';
import {
onMounted } from 'vue';
onMounted(() => {
console.log(THREE);
});
</script>
渲染第一个场景
onMounted(() => {
// 添加一个场景
const scene = new THREE.Scene();
// 创建一个透视相机，摄像机的视野是一个圆锥，顶点就是摄像机的位置
const camera = new THREE.PerspectiveCamera(
75, // 摄像机视锥体垂直视野角度
window.innerWidth / window.innerHeight, // 摄像机视锥体长宽比
0.1, // 摄像机视锥体近端面
1000 // 摄像机视锥体远端面
);
// 设置相机的位置
camera.position.set(0, 0, 10); // x、y、z
// 把相机添加到场景中
scene.add(camera);
// 往场景里添加一个物体
const geometry = new THREE.BoxGeometry(1, 1, 1); // 创建一个长宽高都是1的立方体
const material = new THREE.MeshBasicMaterial({
color: 0x00ff00 }); // 设置立方体的材质
const cube = new THREE.Mesh(geometry, material); // 根据立方体和材质创建物体
scene.add(cube); // 将立方体添加到场景中
// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight);
// 将wbgl渲染的canvas内容添加到dom元素中
document.getElementById('container')?.appendChild(renderer.domElement);
// 使用渲染器，通过相机将场景渲染进来
renderer.render(scene, camera);
});
轨道控制器
Orbit controls（轨道控制器）可以使得相机围绕目标进行轨道运动。
<script setup lang="ts">
import {
onMounted } from 'vue';
import * as THREE from 'three';
// 导入轨道控制器，模块化开发导入的是jsm不是js
import {
OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
onMounted(() => {
// 添加一个场景
const scene = new THREE.Scene();
// 创建一个透视相机，摄像机的视野是一个圆锥，顶点就是摄像机的位置
const camera = new THREE.PerspectiveCamera(
75, // 摄像机视锥体垂直视野角度
window.innerWidth / window.innerHeight, // 摄像机视锥体长宽比
0.1, // 摄像机视锥体近端面
1000 // 摄像机视锥体远端面
);
// 设置相机的位置
camera.position.set(0, 0, 10); // x、y、z
// 把相机添加到场景中
scene.add(camera);
// 往场景里添加一个物体
const geometry = new THREE.BoxGeometry(1, 1, 1); // 创建一个长宽高都是1的立方体
const material = new THREE.MeshBasicMaterial({
color: 0x00ff00 }); // 设置立方体的材质
const cube = new THREE.Mesh(geometry, material); // 根据立方体和材质创建物体
scene.add(cube); // 将立方体添加到场景中
// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight);
// 将wbgl渲染的canvas内容添加到dom元素中
document.getElementById('container')?.appendChild(renderer.domElement);
// 使用渲染器，通过相机将场景渲染进来
// renderer.render(scene, camera);
// 创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);
// 设置控制器阻尼，让物体拥有惯性，必须在动画循环里调用update()
controls.enableDamping = true;
// 创建一个渲染函数，当场景发生变化后重新渲染
const render = () => {
controls.update();
renderer.render(scene, camera);
// 使用浏览器自带的请求动画帧函数不断的进行渲染
requestAnimationFrame(render);
};
render();
});
</script>
