three.js(第一天)学习笔记

2023.8.15，第一天学习three.js，我将我写的代码上面都做了注释，大家可以在main.js文件上直接放进去运行，或者放到App.vue文件里，

用npm安装three

npm install three

 我这个是放到了App文件里了

<script setup>

import * as THREE from "three";

// 导入轨道控制器

import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

// 1、创建场景

const scene = new THREE.Scene();

// 2、创建相机

const camera = new THREE.PerspectiveCamera(

  75,

  window.innerWidth / window.innerHeight,

  0.1,

  1000

);

// 添加物体

// 创建几何体

const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);

// 创建材质

const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 });

const cubeMaterial2 = new THREE.MeshBasicMaterial({ color: 0xaaaa00 });

// 根据几何体和材质创建物体

// 父元素

let parentCube = new THREE.Mesh(cubeGeometry, cubeMaterial2)

// 子元素

const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

// 将子元素添加到父元素中

parentCube.add(cube)

// 父元素的位置

parentCube.position.set(-2,0,0)

// 子元素的位置是相对于父元素的位置来定义的

cube.position.set(2,0,0)

// 设置立方体的放大,父元素的放大会让子元素跟着放大

// cube.scale.set(2,2,2)

// parentCube.scale.set(3,2,2)

// 绕着x轴旋转   父元素的旋转会让子元素跟着旋转

parentCube.rotation.x = Math.PI/4

// 将几何体添加到场景中

scene.add(parentCube)

// 初始化渲染器

const renderer = new THREE.WebGLRenderer();

// 创建轨道控制器    renderer.domElement监听的是canvas事件，可以改成别的比如document.body(记得设置宽高)

const controls = new OrbitControls(camera, renderer.domElement);

// 设置阻尼的惯性

controls.enableDamping = true

// 设置阻尼系数

controls.dampingFactor = 0.05

// 设置旋转速度   坐标系旋转

// controls.autoRotate = true

// 设置渲染的尺寸大小

renderer.setSize(window.innerWidth, window.innerHeight);

// console.log(renderer);

// 将webgl渲染的canvas内容添加到body

document.body.appendChild(renderer.domElement);

scene.add(camera);

// 设置相机位置

camera.position.z = 9;

camera.position.y = 9;

camera.position.x = 9;

camera.lookAt(0,0,0)

// 添加世界坐标辅助器

const axesHelper = new THREE.AxesHelper(5)

scene.add(axesHelper)

function animate(){

  controls.update()

  requestAnimationFrame(animate)

  // 物体旋转

  // cube.rotation.x +=0.01

  // cube.rotation.y +=0.01

  // cube.rotation.z +=0.01

  renderer.render(scene, camera);

}

animate()

// 监听窗口变化

window.addEventListener("resize",()=>{

  // 重置渲染器宽高比

  renderer.setSize(window.innerWidth,window.innerHeight);

  // 重置相机宽高比

  camera.aspect = window.innerWidth/window.innerHeight;

  // 更新相机投影矩阵

  camera.updateProjectionMatrix();

});

var btn = document.createElement("button")

btn.innerHTML = "点击全屏"

btn.style.position = "absolute"

btn.style.zIndex = "999"

btn.onclick = function(){

  renderer.domElement.requestFullscreen()

}

document.body.appendChild(btn)

</script>

<template>

  <div>

   

  </div>

</template>

<style>

*{

  margin: 0;

  padding: 0;

}

canvas{

  display: block;

  position: fixed;

  left: 0;

  top: 0;

  width: 100vw;

  height: 100vh;

}

.btn{

  position: fixed;

  z-index: 1212;

}

</style>