前言
学习教程:老陈 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>