Three.js学习笔记

news2024/11/13 11:35:04

Three.js是一款基于原生WebGL封装的Web 3D库，向外提供了许多的接口。
它可以运用在在小游戏、产品展示、物联网、数字孪生、智慧城市园区、机械、建筑、全景看房、GIS等各个领域。
npm install three
https://threejs.org/docs/index.html#manual/en/introduction/Installation
创建第一个three.js 3D页面
在这里插入图片描述

<script setup lang="ts">
import * as THREE from 'three';
//创建场景
//场景能够让你在什么地方，摆放什么东西来交给three.js来渲染，这是你放置物体、灯光和摄像机的地方
const scene = new THREE.Scene();
//创建相机
const camera = new THREE.PerspectiveCamera();
camera.position.y = 2;
camera.position.z = 10;
//创建立方体 
const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( {
    color: 0x00ff00 } );
//网格
const cube = new THREE.Mesh( geometry, material );
cube.position.set(0,3,0)
scene.add( cube );
//添加网格地面
const gridHelper = new THREE.GridHelper( 10, 10 );
scene.add( gridHelper );
//创建渲染器
const renderer = new THREE.WebGLRenderer();
//调整渲染器窗口大小
renderer.setSize( window.innerWidth, window.innerHeight );
// renderer.setAnimationLoop( animate );
//将渲染器添加到页面
document.body.appendChild( renderer.domElement );
//让立方体动起来
function animate() {
   
    requestAnimationFrame(animate)
	cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    //进行渲染
	renderer.render( scene, camera );
}
animate()
</script>
<template>
</template>
<style scoped>
</style>

05 OrbitControls 轨道控制器
使得相机围绕目标进行轨道运动
在这里插入图片描述

<script setup lang="ts">
import * as THREE from 'three';
import {
    OrbitControls } from 'three/addons/controls/OrbitControls.js';
//创建场景
//场景能够让你在什么地方，摆放什么东西来交给three.js来渲染，这是你放置物体、灯光和摄像机的地方
const scene = new THREE.Scene();
//创建相机
const camera = new THREE.PerspectiveCamera();
camera.position.y = 2;
camera.position.z = 10;
//创建立方体 
const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( {
    color: 0x00ff00 } );
//网格
const cube = new THREE.Mesh( geometry, material );
cube.position.set(0,3,0)
scene.add( cube );
//添加网格地面
const gridHelper = new THREE.GridHelper( 10, 10 );
scene.add( gridHelper );
//创建渲染器
const renderer = new THREE.WebGLRenderer();
//调整渲染器窗口大小
renderer.setSize( window.innerWidth, window.innerHeight );
// renderer.setAnimationLoop( animate );
//将渲染器添加到页面
document.body.appendChild( renderer.domElement );
//添加轨道控制器
const controls = new OrbitControls( camera, renderer.domElement );
//对轨道控制器改变时侯进行监听
controls.addEventListener('change',function(){
   
    console.log('触发')
})
//添加阻尼
controls.enableDamping =true
controls.dampingFactor =0.01
//自动旋转
controls.autoRotate =true
//改变速率
controls.autoRotateSpeed =0.5
//让立方体动起来
function animate() {
   
    requestAnimationFrame(animate)
	cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    //轨道控制器更新
    controls.update();
    //进行渲染
	renderer.render( scene, camera );
}
animate()
</script>

<template>
 


</template>

<style scoped>

</style>

06AxesHelper
三维坐标轴
在这里插入图片描述

在这里插入图片描述

<script setup lang="ts">
import * as THREE from 'three';
import {
    OrbitControls } from 'three/addons/controls/OrbitControls.js';
//创建场景
//场景能够让你在什么地方，摆放什么东西来交给three.js来渲染，这是你放置物体、灯光和摄像机的地方
const scene = new THREE.Scene();
//创建相机
const camera = new THREE.PerspectiveCamera();
camera.position.y = 2;
camera.position.z = 10;
//创建立方体 
const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( {
    color: 0x00ff00 } );
//网格
const cube = new THREE.Mesh( geometry, material );
cube.position.set(0,3,0)
scene.add( cube );
//添加网格地面
const gridHelper = new THREE.GridHelper( 10, 10 );
scene.add( gridHelper );
//创建渲染器
const renderer = new THREE.WebGLRenderer();
//调整渲染器窗口大小
renderer.setSize( window.innerWidth, window.innerHeight );
// renderer.setAnimationLoop( animate );
//将渲染器添加到页面
document.body.appendChild( renderer.domElement );
//添加轨道控制器
const controls = new OrbitControls( camera, renderer.domElement );
//对轨道控制器改变时侯进行监听
controls.addEventListener('change',function(){
   
    console.log('触发')
})
//添加阻尼
controls.enableDamping =true
controls.dampingFactor =0.01
//自动旋转
controls.autoRotate =true
controls.autoRotateSpeed =0.5
//添加坐标轴
const axesHelper = new THREE.AxesHelper( 5 );
axesHelper.position.y= 3
scene.add( axesHelper );

//让立方体动起来
function animate() {
   
    requestAnimationFrame(animate)
	// cube.rotation.x += 0.01;