Three.js 学习笔记

已于 2024-10-08 11:45:29 修改
阅读量496 收藏
点赞数 3
分类专栏： 学习 文章标签： three.js 前端
于 2024-09-18 14:41:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SSophia/article/details/142332926
版权

Three.js 笔记


是一款基于原生WebGL封装的Web 3D库，向外提供了许多的接口。
它可以运用在在小游戏、产品展示、物联网、数字孪生、智慧城市园区、机械、建筑、全景看房、GIS等各个领域。

npm install three
https://threejs.org/docs/index.html#manual/en/introduction/Installation

01创建第一个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;
    // cube.rotation.y += 0.01;
    //轨道控制器更新
    controls.update();
    //进行渲染
	renderer.render( scene, camera );
}
animate()
</script>

<template>
 


</template>

<style scoped>

</style>

07三维场景scene

在这里插入图片描述

在这里插入图片描述

//添加背景颜色
scene.background = new THREE.Color( 0x666666 );
//添加背景图片
scene.background =new THREE.CubeTextureLoader().setPath('/').load(['01.jpg','01.jpg','01.jpg','01.jpg','01.jpg','01.jpg'])

//添加雾
scene.fog = new THREE.Fog( 0xcccccc, 10, 15 );

在这里插入图片描述

在这里插入图片描述

<template>
 
<div id="container"></div>

</template>
<script setup lang="ts">
import {onMounted} from 'vue'
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
onMounted(()=>{
//创建场景
//场景能够让你在什么地方，摆放什么东西来交给three.js来渲染，这是你放置物体、灯光和摄像机的地方
const scene = new THREE.Scene();
//添加背景颜色
// scene.background = new THREE.Color( 0x666666 );
//添加背景图片
scene.background =new THREE.CubeTextureLoader().setPath('/').load(['01.jpg','01.jpg','01.jpg','01.jpg','01.jpg','01.jpg'])
//添加雾
scene.fog = new THREE.Fog( 0xcccccc, 10, 15 );
//创建相机
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 );
document.getElementById("container").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;
    // cube.rotation.y += 0.01;
    //轨道控制器更新
    controls.update();
    //进行渲染
	renderer.render( scene, camera );
}
animate()
})

</script>



<style scoped>

</style>

08 透视相机 PerspectiveCamera

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<template>
  <div id="container">
    <div style="position: absolute; left: 0">
      <button @click="moveCamera">移动相机</button>
      <button @click="moveCube">移动物体</button>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted } from "vue";
import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";

//创建场景
//场景能够让你在什么地方，摆放什么东西来交给three.js来渲染，这是你放置物体、灯光和摄像机的地方
const scene = new THREE.Scene();
//添加背景颜色
// scene.background = new THREE.Color( 0x666666 );
//添加背景图片
scene.background = new THREE.CubeTextureLoader()
  .setPath("/")
  .load(["01.jpg", "01.jpg", "01.jpg", "01.jpg", "01.jpg", "01.jpg"]);
//添加雾
scene.fog = new THREE.Fog(0xcccccc, 10, 15);
//创建相机
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 moveCamera = () => {
  console.log("77");
  camera.position.y = 15;
  camera.position.z = 20;
  camera.lookAt(0,3,0);
};
const moveCube = () => {
  cube.position.set(3, 5, 0);
  // 看向物体
  // console.log(controls)
  // controls.target = cube.position

  camera.lookAt(cube.position);
};
//创建渲染器
const renderer = new THREE.WebGLRenderer();
//调整渲染器窗口大小
renderer.setSize(window.innerWidth, window.innerHeight);
// renderer.setAnimationLoop( animate );
onMounted(() => {
  //将渲染器添加到页面
  // document.body.appendChild( renderer.domElement );
  document.getElementById("container").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;
    cube.rotation.y += 0.01;
    //轨道控制器更新
    // controls.update();
    //进行渲染
    renderer.render(scene, camera);
  }
  animate();
});

</script>



<style scoped>
</style>

09 GUI参数调试工具

dat.gui
https://github.com/dataarts/dat.gui/blob/master/API.md

 <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.9/dat.gui.min.js"></script>

https://www.npmjs.com/
在这里插入图片描述
在这里插入图片描述

npm install --save dat.gui

在这里插入图片描述

<template>
  <div id="container">
    <div style="position: absolute; left: 0">
      <button @click="moveCamera">移动相机</button>
      <button @click="moveCube">移动物体</button>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted } from "vue";
import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import dat from "dat.gui";
// 创建控制对象
const controlData = {
  rotationSpeed: 0.01,
  color: "#66ccff",
  wireframe: false,
  //   envMap: "无",
};
// 创建实例
const gui = new dat.GUI();
const f = gui.addFolder("配置");
// f.add(controlData, "rotationSpeed", 0.01, 0.1, 0.01)

f.add(controlData, "rotationSpeed").min(0.01).max(0.1).step(0.01);
// 颜色选择器
f.addColor(controlData, "color");
// 下拉列表
// f.add(controlData, "envMap", ["无", "全反射", "漫反射"]);
// checkbox
f.add(controlData, "wireframe");
f.domElement.id = "gui";
f.open();
//创建场景
//场景能够让你在什么地方，摆放什么东西来交给three.js来渲染，这是你放置物体、灯光和摄像机的地方
const scene = new THREE.Scene();
//添加背景颜色
// scene.background = new THREE.Color( 0x666666 );
//添加背景图片
scene.background = new THREE.CubeTextureLoader()
  .setPath("/")
  .load(["01.jpg", "01.jpg", "01.jpg", "01.jpg", "01.jpg", "01.jpg"]);
//添加雾
scene.fog = new THREE.Fog(0xcccccc, 10, 15);
//创建相机
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 moveCamera = () => {
  console.log("77");
  camera.position.y = 15;
  camera.position.z = 20;
  camera.lookAt(0, 3, 0);
};
const moveCube = () => {
  cube.position.set(3, 5, 0);
  // 看向物体
  // console.log(controls)
  // controls.target = cube.position

  camera.lookAt(cube.position);
};

onMounted(() => {
  //创建渲染器
  const renderer = new THREE.WebGLRenderer();
  //调整渲染器窗口大小
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.getElementById("container").appendChild(f.domElement);
  // renderer.setAnimationLoop( animate );
  //将渲染器添加到页面
  // document.body.appendChild( renderer.domElement );
  document.getElementById("container").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);
    console.log(cube)
    // cube.rotation.x += 0.01;
    // cube.rotation.y += 0.01;
    cube.rotation.x += controlData.rotationSpeed;
    cube.rotation.y += controlData.rotationSpeed;
    cube.material.color = new THREE.Color(controlData.color);
    material.wireframe = controlData.wireframe;
    //轨道控制器更新
    // controls.update();
    //进行渲染
    renderer.render(scene, camera);
  }
  animate();
});
</script>



<style >
#gui {
  position: absolute;
  right: 0;
  widows: 300px;
}
</style>

在这里插入图片描述
dat gui 可配置属性旋转速度 颜色 线框
在这里插入图片描述

10 MeshBasicMaterial 基础网格材质

光照对于基础网格材质不产生影响，这是基础网格材质特性决定的
在这里插入图片描述
在这里插入图片描述
所有材质共有的属性
在这里插入图片描述
在这里插入图片描述
学习了基础网格材质的基本属性

11材质贴图和环境贴图

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
下面是材质贴图
在这里插入图片描述

//创建纹理
const texture = new THREE.TextureLoader().load( "textures/02-map.jpg" );
//创建立方体
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ 
    // color: 0x00ff00
    map:texture//添加纹理
 });

完整代码

<template>
  <div id="container">
   
  </div>
</template>
<script setup lang="ts">
import { onMounted } from "vue";
import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";

//创建场景
//场景能够让你在什么地方，摆放什么东西来交给three.js来渲染，这是你放置物体、灯光和摄像机的地方
const scene = new THREE.Scene();
//添加背景颜色
scene.background = new THREE.Color( 0x666666 );
//添加背景图片
// scene.background = new THREE.CubeTextureLoader()
//   .setPath("/")
//   .load(["01.jpg", "01.jpg", "01.jpg", "01.jpg", "01.jpg", "01.jpg"]);
//添加雾
scene.fog = new THREE.Fog(0xcccccc, 10, 15);
//创建相机
const camera = new THREE.PerspectiveCamera();
camera.position.y = 2;
camera.position.z = 10;
//创建纹理
const texture = new THREE.TextureLoader().load( "textures/02-map.jpg" );
//创建立方体
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ 
    // color: 0x00ff00
    map:texture//添加纹理
 });
//网格
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);



onMounted(() => {
  //创建渲染器
  const renderer = new THREE.WebGLRenderer();
  //调整渲染器窗口大小
  renderer.setSize(window.innerWidth, window.innerHeight);
  // renderer.setAnimationLoop( animate );
  //将渲染器添加到页面
  // document.body.appendChild( renderer.domElement );
  document.getElementById("container").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);
    console.log(cube)
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
   
    // 轨道控制器更新
    controls.update();
    //进行渲染
    renderer.render(scene, camera);
  }
  animate();
});
</script>



<style >

</style>

下面是环境贴图
在这里插入图片描述
在这里插入图片描述

//创建立体纹理 左右上下前后
const cubeTexture = new THREE.CubeTextureLoader()
  .setPath("/textures/")
  .load(["04.jpg", "01.jpg", "05.jpg", "02.jpg", "06.jpg", "03.jpg"]);
  // 添加背景纹理
scene.background = cubeTexture

<template>
  <div id="container"></div>
</template>
<script setup lang="ts">
import { onMounted } from "vue";
import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";

//创建场景
//场景能够让你在什么地方，摆放什么东西来交给three.js来渲染，这是你放置物体、灯光和摄像机的地方
const scene = new THREE.Scene();
//添加背景颜色
// scene.background = new THREE.Color(0x666666);
//添加背景图片
// scene.background = new THREE.CubeTextureLoader()
//   .setPath("/")
//   .load(["01.jpg", "01.jpg", "01.jpg", "01.jpg", "01.jpg", "01.jpg"]);
//添加雾
scene.fog = new THREE.Fog(0xcccccc, 10, 15);
//创建相机
const camera = new THREE.PerspectiveCamera();
camera.position.y = 2;
camera.position.z = 10;
//创建纹理
const texture = new THREE.TextureLoader().load("textures/02-map.jpg");
//创建立体纹理 左右上下前后
const cubeTexture = new THREE.CubeTextureLoader()
  .setPath("/textures/")
  .load(["04.jpg", "01.jpg", "05.jpg", "02.jpg", "06.jpg", "03.jpg"]);
  // 添加背景纹理
scene.background = cubeTexture
//创建立方体
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({
  // color: 0x00ff00
  map: texture, //添加纹理
});
//网格
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);

onMounted(() => {
  //创建渲染器
  const renderer = new THREE.WebGLRenderer();
  //调整渲染器窗口大小
  renderer.setSize(window.innerWidth, window.innerHeight);
  // renderer.setAnimationLoop( animate );
  //将渲染器添加到页面
  // document.body.appendChild( renderer.domElement );
  document.getElementById("container").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);
    console.log(cube);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    // 轨道控制器更新
    controls.update();
    //进行渲染
    renderer.render(scene, camera);
  }
  animate();
});
</script>



<style >
</style>

在这里插入图片描述
给物体添加环境贴图，去呈现反射效果
创建一个球体
在这里插入图片描述
在这里插入图片描述

//创建立体纹理 左右上下前后
const cubeTexture = new THREE.CubeTextureLoader()
  .setPath("/textures/")
  .load(["04.jpg", "01.jpg", "05.jpg", "02.jpg", "06.jpg", "03.jpg"]);
  // 添加背景纹理
scene.background = cubeTexture
// //创建立方体
// const geometry = new THREE.BoxGeometry(1, 1, 1);
// const material = new THREE.MeshBasicMaterial({
//   // color: 0x00ff00
//   map: texture, //添加纹理
// });
// 创建一个球体 半径1
const sphere = new THREE.SphereGeometry(1)
const material = new THREE.MeshBasicMaterial({ 
  // color: 0x00ff00
  //镜面反射效果，环境贴图
  envMap: cubeTexture
});
//网格
const cube = new THREE.Mesh(sphere, material);

完整代码

<template>
  <div id="container"></div>
</template>
<script setup lang="ts">
import { onMounted } from "vue";
import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";

//创建场景
//场景能够让你在什么地方，摆放什么东西来交给three.js来渲染，这是你放置物体、灯光和摄像机的地方
const scene = new THREE.Scene();
//添加背景颜色
// scene.background = new THREE.Color(0x666666);
//添加背景图片
// scene.background = new THREE.CubeTextureLoader()
//   .setPath("/")
//   .load(["01.jpg", "01.jpg", "01.jpg", "01.jpg", "01.jpg", "01.jpg"]);
//添加雾
scene.fog = new THREE.Fog(0xcccccc, 10, 15);
//创建相机
const camera = new THREE.PerspectiveCamera();
camera.position.y = 2;
camera.position.z = 10;
//创建纹理
// const texture = new THREE.TextureLoader().load("textures/02-map.jpg");
//创建立体纹理 左右上下前后
const cubeTexture = new THREE.CubeTextureLoader()
  .setPath("/textures/")
  .load(["04.jpg", "01.jpg", "05.jpg", "02.jpg", "06.jpg", "03.jpg"]);
  // 添加背景纹理
scene.background = cubeTexture
// //创建立方体
// const geometry = new THREE.BoxGeometry(1, 1, 1);
// const material = new THREE.MeshBasicMaterial({
//   // color: 0x00ff00
//   map: texture, //添加纹理
// });
// 创建一个球体 半径1
const sphere = new THREE.SphereGeometry(1)
const material = new THREE.MeshBasicMaterial({ 
  // color: 0x00ff00
  //镜面反射效果，环境贴图
  envMap: cubeTexture
});
//网格
const cube = new THREE.Mesh(sphere, material);
cube.position.set(0, 3, 0);
scene.add(cube);
//添加网格地面
const gridHelper = new THREE.GridHelper(10, 10);
scene.add(gridHelper);

onMounted(() => {
  //创建渲染器
  const renderer = new THREE.WebGLRenderer();
  //调整渲染器窗口大小
  renderer.setSize(window.innerWidth, window.innerHeight);
  // renderer.setAnimationLoop( animate );
  //将渲染器添加到页面
  // document.body.appendChild( renderer.domElement );
  document.getElementById("container").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);
    console.log(cube);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    // 轨道控制器更新
    controls.update();
    //进行渲染
    renderer.render(scene, camera);
  }
  animate();
});
</script>



<style >
</style>

在这里插入图片描述
厉害，厉害，好神奇的环境贴图

9月26日 接着学

12几何体介绍

13构建自定义几何体

<template>
  <div id="container"></div>
</template>
<script setup lang="ts">
import { onMounted } from "vue";
import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";

//创建场景
//场景能够让你在什么地方，摆放什么东西来交给three.js来渲染，这是你放置物体、灯光和摄像机的地方
const scene = new THREE.Scene();
//添加背景颜色
scene.background = new THREE.Color(0x666666);
//添加背景图片
// scene.background = new THREE.CubeTextureLoader()
//   .setPath("/")
//   .load(["01.jpg", "01.jpg", "01.jpg", "01.jpg", "01.jpg", "01.jpg"]);
//添加雾
// scene.fog = new THREE.Fog(0xcccccc, 10, 15);
//创建相机
const camera = new THREE.PerspectiveCamera();
camera.position.y = 2;
camera.position.z = 10;

//平面几何题
// const geometry = new THREE.PlaneGeometry( 1, 1 );
// console.log('geometry',geometry)
// const material = new THREE.MeshBasicMaterial( {color: 0xffff00, 
// side: THREE.DoubleSide,
// wireframe:true
// } );
// const plane = new THREE.Mesh( geometry, material );
// scene.add( plane );
const geometry = new THREE.BufferGeometry();
// 创建一个简单的矩形. 在这里我们左上和右下顶点被复制了两次。
// 因为在两个三角面片里，这两个顶点都需要被用到。
const vertices = new Float32Array( [
	-1.0, -1.0,  1.0,
	 1.0, -1.0,  1.0,
	//  1.0,  1.0,  1.0,

	 1.0,  1.0,  1.0,
	-1.0,  1.0,  1.0,
	// -1.0, -1.0,  1.0
] );

// itemSize = 3 因为每个顶点都是一个三元组。
geometry.setAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
//需要确认几何体的顶点
//利用索引来确定几何体的绘制方式
const indexs=new Uint16Array([
  0,1,2,2,3,0
])
geometry.index=new THREE.BufferAttribute(indexs,1)

const material = new THREE.MeshBasicMaterial( { color: 0xff0000,side:THREE.DoubleSide,wireframe:true } );
const mesh = new THREE.Mesh( geometry, material );

scene.add( mesh );
//添加网格地面
const gridHelper = new THREE.GridHelper(10, 10);
scene.add(gridHelper);
 //添加坐标辅助线
  const axesHelper = new THREE.AxesHelper(5);
  scene.add(axesHelper);
onMounted(() => {
  //创建渲染器
  const renderer = new THREE.WebGLRenderer();
  //调整渲染器窗口大小
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.getElementById("container").appendChild(renderer.domElement);
  //添加轨道控制器
  const controls = new OrbitControls(camera, renderer.domElement);
  //让立方体动起来
  function animate() {
    requestAnimationFrame(animate);
    // 轨道控制器更新
    controls.update();
    //进行渲染
    renderer.render(scene, camera);
  }
  animate();
});
</script>

在这里插入图片描述

14 自定义 uv 坐标

在这里插入图片描述
通过UV坐标来获取纹理的任意像素的内容（控制贴图的展示部位）

<template>
  <div id="container"></div>
</template>
<script setup lang="ts">
import { onMounted } from "vue";
import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";

//创建场景
//场景能够让你在什么地方，摆放什么东西来交给three.js来渲染，这是你放置物体、灯光和摄像机的地方
const scene = new THREE.Scene();
//添加背景颜色
scene.background = new THREE.Color(0x666666);
//创建相机
const camera = new THREE.PerspectiveCamera();
camera.position.y = 2;
camera.position.z = 10;

//创建矩形
const geometry = new THREE.PlaneGeometry(1, 1);
//创建纹理对象
const texture = new THREE.TextureLoader().load("/texture.jpg");
//创建基础网格材质
const material = new THREE.MeshBasicMaterial({ map: texture });
//创建网格

const cube = new THREE.Mesh(geometry, material);
//将网格添加到场景中
scene.add(cube);
// 定义UV像素的取值范围 左上 右上 左下 右下
const uv = new Float32Array([
  // 0, 0.5,
  // 0.5, 0.5,
  // 0, 0,
  // 0.5, 0
  0.5,
  1,
  1,
  1,
  0.5,
  0.5,
  1,
  0.5,

  // 0,1,1,0,0,1,0
]);
geometry.attributes.uv = new THREE.BufferAttribute(uv, 2);
//添加坐标辅助线
const axesHelper = new THREE.AxesHelper(5);
// axesHelper.position.y = 3;
scene.add(axesHelper);
onMounted(() => {
  //创建渲染器
  const renderer = new THREE.WebGLRenderer();
  //调整渲染器窗口大小
  renderer.setSize(window.innerWidth, window.innerHeight);

  document.getElementById("container").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);
    // console.log(cube);
    // cube.rotation.x += 0.01;
    // cube.rotation.y += 0.01;

    // 轨道控制器更新
    controls.update();
    //进行渲染
    renderer.render(scene, camera);
  }
  animate();
});
</script>



<style >
</style>

15 灯光对物体的影响

环境光
在这里插入图片描述

16 环境光和点光源的结合效果在这里插入图片描述

在这里插入图片描述
灯光、物体和材质 结合起来的展示效果
在这里插入图片描述

<template>
  <div id="container"></div>
</template>
<script setup lang="ts">
import { onMounted } from "vue";
import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";

//创建场景
//场景能够让你在什么地方，摆放什么东西来交给three.js来渲染，这是你放置物体、灯光和摄像机的地方
const scene = new THREE.Scene();
//添加背景颜色
scene.background = new THREE.Color(0x666666);
//创建相机
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.MeshPhongMaterial({
  color: 0x0099ff,
  shininess: 1000
})
// 创建Mesh
const cube = new THREE.Mesh(geometry, material)
cube.position.set(0, 0.5, 0)
// 物体接受光源
cube.receiveShadow = true
// 物体投射光源
cube.castShadow = true
// //将网格添加到场景中
scene.add(cube);

// 添加灯光效果
// 添加环境光
const light = new THREE.AmbientLight( 0xffffff, 1 ); // 柔和的白光
scene.add( light );
// 添加点光源
const pointlight = new THREE.PointLight( 0xffffff, 100, 100 );
pointlight.position.set( 5, 3, 5 );
pointlight.castShadow = true
scene.add( pointlight );
// 创建地面
const meshfloor = new THREE.Mesh(
  new THREE.PlaneGeometry(10, 10),
  new THREE.MeshPhongMaterial({
    color: 0x1b5e20
  })
)
//当前位置旋转了90度
meshfloor.rotation.x -= Math.PI / 2
// 地面同样要设置接受光源
meshfloor.receiveShadow = true
scene.add(meshfloor)


//添加坐标辅助线
const axesHelper = new THREE.AxesHelper(5);
// axesHelper.position.y = 3;
scene.add(axesHelper);
onMounted(() => {
  //创建渲染器
  const renderer = new THREE.WebGLRenderer();
  //调整渲染器窗口大小
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.shadowMap.enabled = true
  document.getElementById("container").appendChild(renderer.domElement);
  //添加轨道控制器
  const controls = new OrbitControls(camera, renderer.domElement);
  //让立方体动起来
  function animate() {
    requestAnimationFrame(animate);
    // 轨道控制器更新
    controls.update();
    //进行渲染
    renderer.render(scene, camera);
  }
  animate();
});
</script>



<style >
</style>

17vector3 三维向量介绍

在这里插入图片描述
三维物体（Object3D）

<template>
  <div id="container"></div>
</template>
<script setup lang="ts">
import { onMounted } from "vue";
import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";

//创建场景
//场景能够让你在什么地方，摆放什么东西来交给three.js来渲染，这是你放置物体、灯光和摄像机的地方
const scene = new THREE.Scene();
//添加背景颜色
scene.background = new THREE.Color(0x666666);
//创建相机
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.MeshPhongMaterial({
  color: 0x0099ff,
})
const vector = new THREE.Vector3(1, 1, 1)

// 创建Mesh
const cube = new THREE.Mesh(geometry, material)
// console.log(cube.position, 'position')
// cube.position.set(1, 1, 1)
// cube.position.x = 1
cube.position.add(vector)
// cube.position.addScalar(1)

console.log(cube.position.clone(), '当前位置')


// 局部缩放
// cube.scale = new THREE.Vector3(2, 1, 1) // 这种写法是错误的，属性是只读的
// cube.scale.set(2, 3, 3)
 
// 平移
// cube.translateX(1)

// // 显示与隐藏
// cube.visible = true
// console.log(cube.position, 'vector')

// const geometry = new THREE.BoxGeometry( 1, 1, 1 );
// const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );

const cubeA = new THREE.Mesh( geometry, material );
cubeA.position.set( 1, 1, 1 );

const cubeB = new THREE.Mesh( geometry, material );
cubeB.position.set( -1, -1, -1 );

//create a group and add the two cubes
//These cubes can now be rotated / scaled etc as a group
const group = new THREE.Group();
group.add( cubeA );
group.add( cubeB );
console.log(group, 'group')
// group.position.x = 2
scene.add( group );


// //将网格添加到场景中
// scene.add(cube);
//添加坐标辅助线
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);
onMounted(() => {
  //创建渲染器
  const renderer = new THREE.WebGLRenderer();
  //调整渲染器窗口大小
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.getElementById("container").appendChild(renderer.domElement);
  //添加轨道控制器
  const controls = new OrbitControls(camera, renderer.domElement);
  //让立方体动起来
  function animate() {
    requestAnimationFrame(animate);
    // 轨道控制器更新
    controls.update();
    //进行渲染
    renderer.render(scene, camera);
  }
  animate();
});
</script>



<style >
</style>

18 欧拉角物体的局部旋转

欧拉角（Euler）
在这里插入图片描述

<template>
  <div id="container"></div>
</template>
<script setup lang="ts">
import { onMounted } from "vue";
import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";

//创建场景
//场景能够让你在什么地方，摆放什么东西来交给three.js来渲染，这是你放置物体、灯光和摄像机的地方
const scene = new THREE.Scene();
//添加背景颜色
scene.background = new THREE.Color(0x666666);
//创建相机
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.MeshPhongMaterial({
  color: 0x0099ff,
})
const vector = new THREE.Vector3(1, 1, 1)

// 创建Mesh
const cube = new THREE.Mesh(geometry, material)
cube.rotation.x = Math.PI / 4 //45度
// cube.rotation.set(Math.PI / 4, 0, 0)
// //将网格添加到场景中
scene.add(cube);
//添加坐标辅助线
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);
onMounted(() => {
  //创建渲染器
  const renderer = new THREE.WebGLRenderer();
  //调整渲染器窗口大小
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.getElementById("container").appendChild(renderer.domElement);
  //添加轨道控制器
  const controls = new OrbitControls(camera, renderer.domElement);
  //让立方体动起来
  function animate() {
    requestAnimationFrame(animate);
     cube.rotation.x += 0.01
    // 轨道控制器更新
    controls.update();
    //进行渲染
    renderer.render(scene, camera);
  }
  animate();
});
</script>



<style >
</style>

19模型概念和blender介绍在这里插入图片描述

22项目搭建

在这里插入图片描述

26背景创建

引入了样式
好像换了assets文件夹
下载了less less-loader
在这里插入图片描述

28 渲染函数

在这里插入图片描述
在这里插入图片描述

<template>
  <div id="login-three-container"></div>
</template>
<script setup lang="ts">
import { onMounted } from "vue";
import * as THREE from "three";
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
//容器
let container;
//场景
let scene;
//加载图片
const IMAGE_SKY = new URL("../assets/images/sky.png", import.meta.url).href;
//宽度
let width;
//高度
let height;
//深度
let depth = 1400;
//相机在z轴上的位置
let zAxisNumber;
//相机
let camera;
//渲染器
let renderer
onMounted(() => {
  container = document.getElementById("login-three-container");
  width = container.clientWidth;
  height = container.clientHeight;
  console.log(container);
  initScene();
  initSceneBg();
  initCamera();
  initRenderer();
  initOrbitControls();
  animate();
});
//初始化场景
const initScene = () => {
  scene = new THREE.Scene();
  //添加雾的效果
  scene.fog = new THREE.Fog(0x000000, 0, 10000);
};
//添加背景
const initSceneBg = () => {
  new THREE.TextureLoader().load(IMAGE_SKY, (texture) => {
    //创建立方体
    const geometry = new THREE.BoxGeometry(width, height, depth);
    //创建材质
    const material = new THREE.MeshBasicMaterial({
      //添加纹理
      map: texture,
      side: THREE.BackSide,
    });
    //创建网格
    const mesh = new THREE.Mesh(geometry, material);
    //添加到场景
    scene.add(mesh);
  });
};
//初始化相机
const initCamera = () => {
  //视野夹角
  const fov = 15;
  //计算相机距离物体的距离 15du
  const distance = width / 2 / Math.tan(Math.PI / 12);
  zAxisNumber = Math.floor(distance - 1400 / 2);
  camera = new THREE.PerspectiveCamera(fov, width / height, 1, 30000);
  //设置相机所在位置
  camera.position.set(0, 0, zAxisNumber);
  //相机看向原点
  camera.lookAt(0, 0, 0);
};
//定义渲染函数（渲染器）
const initRenderer=()=>{
    //创建渲染器
    renderer =  new THREE.WebGLRenderer();
    //定义渲染器的尺寸
    renderer.setSize(width,height)
    container.appendChild(renderer.domElement);
    
}
//添加轨道控制器
const initOrbitControls=()=>{
   const controls= new OrbitControls(camera,renderer.domElement)
   controls.enabled=true
    // 轨道控制器更新
    controls.update();
}
//动画刷新
const animate=()=>{
    requestAnimationFrame(animate)
     //进行渲染
    renderer.render(scene, camera);
}

</script>
<style lang="less" scoped>
#login-three-container {
  width: 100%;
  height: 100vh;
}
</style>

29 渲染星球动画

安装指定版本得three
npm i three@0.150.1
在这里插入图片描述
增加了星星效果的实现

<template>
  <div id="login-three-container"></div>
</template>
<script setup lang="ts">
import { onMounted } from "vue";
import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
//容器
let container;
//场景
let scene;
//加载图片
const IMAGE_SKY = new URL("../assets/images/sky.png", import.meta.url).href;
//宽度
let width;
//高度
let height;
//深度
let depth = 1400;
//相机在z轴上的位置
let zAxisNumber;
//相机
let camera;
//渲染器
let renderer;
//球体的网格
let sphere;
//球体贴图
const IMAGE_EARTH = new URL("../assets/images/earth_bg.png", import.meta.url)
  .href;

onMounted(() => {
  container = document.getElementById("login-three-container");
  width = container.clientWidth;
  height = container.clientHeight;
  console.log(container);
  initScene();
  initSceneBg();
  initCamera();
  initSphereModal();
  initLight();
  initRenderer();
  initOrbitControls();
  animate();
});
//初始化场景
const initScene = () => {
  scene = new THREE.Scene();
  //添加雾的效果
  scene.fog = new THREE.Fog(0x000000, 0, 10000);
};
//添加背景
const initSceneBg = () => {
  new THREE.TextureLoader().load(IMAGE_SKY, (texture) => {
    //创建立方体
    const geometry = new THREE.BoxGeometry(width, height, depth);
    //创建材质
    const material = new THREE.MeshBasicMaterial({
      //添加纹理
      map: texture,
      side: THREE.BackSide,
    });
    //创建网格
    const mesh = new THREE.Mesh(geometry, material);
    //添加到场景
    scene.add(mesh);
  });
};
//初始化相机
const initCamera = () => {
  //视野夹角
  const fov = 15;
  //计算相机距离物体的距离 15du
  const distance = width / 2 / Math.tan(Math.PI / 12);
  zAxisNumber = Math.floor(distance - 1400 / 2);
  camera = new THREE.PerspectiveCamera(fov, width / height, 1, 30000);
  //设置相机所在位置
  camera.position.set(0, 0, zAxisNumber);
  //相机看向原点
  camera.lookAt(0, 0, 0);
};
//初始化球体
const initSphereModal = () => {
  const geometry = new THREE.SphereGeometry(50, 64, 32);
  //高光材质 把earth_bg贴图，贴到地球得表面上
  const material = new THREE.MeshPhongMaterial();
  material.map = new THREE.TextureLoader().load(IMAGE_EARTH);
  //网格
  sphere = new THREE.Mesh(geometry, material);
  sphere.position.set(-400, 200, -200);
  scene.add(sphere);
};
//光源
const initLight = () => {
  //环境光
  const abientLight = new THREE.AmbientLight(0xffffff, 1); // 柔和的白光
  scene.add(abientLight);
  //点光源
  const light = new THREE.PointLight(0x0655fd, 5, 0);
  light.position.set(0, 100, -200);
  scene.add(light);
};
//星球的自转
const renderSphereRotate=()=>{
    sphere.rotateY(0.001)
}
//定义渲染函数（渲染器）
const initRenderer = () => {
  //创建渲染器
  renderer = new THREE.WebGLRenderer();
  //定义渲染器的尺寸
  renderer.setSize(width, height);
  container.appendChild(renderer.domElement);
};
//添加轨道控制器
const initOrbitControls = () => {
  const controls = new OrbitControls(camera, renderer.domElement);
  controls.enabled = true;
  // 轨道控制器更新
  controls.update();
};
//动画刷新
const animate = () => {
  requestAnimationFrame(animate);
  renderSphereRotate();
  //进行渲染
  renderer.render(scene, camera);
};
</script>
<style lang="less" scoped>
#login-three-container {
  width: 100%;
  height: 100vh;
}
</style>

30 星星效果的实现

https://www.lodashjs.com/
npm i lodash@4.17.21
在这里插入图片描述
在这里插入图片描述

在天空盒的背后出现

<template>
  <div id="login-three-container"></div>
</template>
<script setup lang="ts">
import { onMounted } from "vue";
import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import _ from "lodash";
//容器
let container;
//场景
let scene;
//加载图片
const IMAGE_SKY = new URL("../assets/images/sky.png", import.meta.url).href;
//宽度
let width;
//高度
let height;
//深度
let depth = 1400;
//相机在z轴上的位置
let zAxisNumber;
//相机
let camera;
//渲染器
let renderer;
//球体的网格
let sphere;
//点的初始参数
let parameters;
//创建材质
let materials = [];
//初始位置
let particles_init_position;
//球体贴图
const IMAGE_EARTH = new URL("../assets/images/earth_bg.png", import.meta.url)
  .href;
//星星贴图
const IMAGE_STAR1 = new URL("../assets/images/starflake1.png", import.meta.url)
  .href;
const IMAGE_STAR2 = new URL("../assets/images/starflake2.png", import.meta.url)
  .href;

onMounted(() => {
  container = document.getElementById("login-three-container");
  width = container.clientWidth;
  height = container.clientHeight;
  console.log(container);
  initScene();
  initSceneBg();
  initCamera();
  initSphereModal();
  initLight();
  //定义初始位置
  particles_init_position = -zAxisNumber - depth / 2;
  initSceneStar(particles_init_position);
  initRenderer();
  initOrbitControls();
  animate();
});
//初始化场景
const initScene = () => {
  scene = new THREE.Scene();
  //添加雾的效果
  scene.fog = new THREE.Fog(0x000000, 0, 10000);
};
//添加背景
const initSceneBg = () => {
  new THREE.TextureLoader().load(IMAGE_SKY, (texture) => {
    //创建立方体
    const geometry = new THREE.BoxGeometry(width, height, depth);
    //创建材质
    const material = new THREE.MeshBasicMaterial({
      //添加纹理
      map: texture,
      side: THREE.BackSide,
    });
    //创建网格
    const mesh = new THREE.Mesh(geometry, material);
    //添加到场景
    scene.add(mesh);
  });
};
//初始化相机
const initCamera = () => {
  //视野夹角
  const fov = 15;
  //计算相机距离物体的距离 15du
  const distance = width / 2 / Math.tan(Math.PI / 12);
  zAxisNumber = Math.floor(distance - 1400 / 2);
  camera = new THREE.PerspectiveCamera(fov, width / height, 1, 30000);
  //设置相机所在位置
  camera.position.set(0, 0, zAxisNumber);
  //相机看向原点
  camera.lookAt(0, 0, 0);
};
//初始化球体
const initSphereModal = () => {
  const geometry = new THREE.SphereGeometry(50, 64, 32);
  //高光材质 把earth_bg贴图，贴到地球得表面上
  const material = new THREE.MeshPhongMaterial();
  material.map = new THREE.TextureLoader().load(IMAGE_EARTH);
  //网格
  sphere = new THREE.Mesh(geometry, material);
  sphere.position.set(-400, 200, -200);
  scene.add(sphere);
};
//光源
const initLight = () => {
  //环境光
  const abientLight = new THREE.AmbientLight(0xffffff, 1); // 柔和的白光
  scene.add(abientLight);
  //点光源
  const light = new THREE.PointLight(0x0655fd, 5, 0);
  light.position.set(0, 100, -200);
  scene.add(light);
};
//星球的自转
const renderSphereRotate = () => {
  sphere.rotateY(0.001);
};
// 初始化场景星星的效果
const initSceneStar = (initZposition) => {
  const geometry = new THREE.BufferGeometry();
  //星星位置的坐标
  const vertices = [];
  //创建纹理
  const textureLoader = new THREE.TextureLoader();
  const sprite1 = textureLoader.load(IMAGE_STAR1);
  const sprite2 = textureLoader.load(IMAGE_STAR2);
  //星星的数据
  const pointsGeometry = [];
  //声明点的参数
  parameters = [
    //颜色 贴图 大小
    [[0.6, 100, 0.75], sprite1, 50],
    [[0, 0, 1], sprite2, 20],
  ];
  //创建1500个星星
  for (let i = 0; i < 1500; i++) {
    const x = THREE.MathUtils.randFloatSpread(width);
    const y = _.random(0, height / 2);
    const z = _.random(-depth / 2, zAxisNumber);
    vertices.push(x, y, z);
  }
  geometry.setAttribute(
    "position",
    new THREE.Float32BufferAttribute(vertices, 3)
  );
  //创建2种不同的材质
  for (let i = 0; i < parameters.length; i++) {
    //颜色
    const color = parameters[i][0];
    //纹理
    const sprite = parameters[i][1];
    //点的大小
    const size = parameters[i][2];
    materials[i] = new THREE.PointsMaterial({
      size,
      map: sprite,
    });
    //设置颜色HLS
    materials[i].color.setHSL(color[0], color[1], color[2]);
    //创建物体
    const particles = new THREE.Points(geometry, materials[i]);
    //设置角度
    particles.rotation.x = Math.random() * 0.2 - 0.15;
    particles.rotation.y = Math.random() * 0.2 - 0.15;
    particles.rotation.z = Math.random() * 0.2 - 0.15;
    particles.position.setZ(initZposition);
    pointsGeometry.push(particles);
    scene.add(particles);
  }
  return pointsGeometry;
};
//定义渲染函数（渲染器）
const initRenderer = () => {
  //创建渲染器
  renderer = new THREE.WebGLRenderer();
  //定义渲染器的尺寸
  renderer.setSize(width, height);
  container.appendChild(renderer.domElement);
};
//添加轨道控制器
const initOrbitControls = () => {
  const controls = new OrbitControls(camera, renderer.domElement);
  controls.enabled = true;
  // 轨道控制器更新
  controls.update();
};
//动画刷新
const animate = () => {
  requestAnimationFrame(animate);
  renderSphereRotate();
  //进行渲染
  renderer.render(scene, camera);
};
</script>
<style lang="less" scoped>
#login-three-container {
  width: 100%;
  height: 100vh;
}
</style>

31 星星的运动效果

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
blending:THREE.AdditiveBlending 起作用了
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
接下来

点状物体的自身的颜色变化和运动轨迹
在这里插入图片描述

在这里插入图片描述

<template>
  <div id="login-three-container"></div>
</template>
<script setup lang="ts">
import { onMounted } from "vue";
import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import _ from "lodash";
//容器
let container;
//场景
let scene;
//加载图片
const IMAGE_SKY = new URL("../assets/images/sky.png", import.meta.url).href;
//宽度
let width;
//高度
let height;
//深度
let depth = 1400;
//相机在z轴上的位置
let zAxisNumber;
//相机
let camera;
//渲染器
let renderer;
//球体的网格
let sphere;
//点的初始参数
let parameters;
//创建材质
let materials = [];
//初始位置
let particles_init_position;
//声明点1在z轴上的移动位置（记录星星在z轴上的移动位置 ）
let zprogress;
//声明点2在z轴上的移动位置
let zprogress_second;
//声明点1的数据
let particles_first = [];
//声明点2的数据
let particles_second = [];
//球体贴图
const IMAGE_EARTH = new URL("../assets/images/earth_bg.png", import.meta.url)
  .href;
//星星贴图
const IMAGE_STAR1 = new URL("../assets/images/starflake1.png", import.meta.url)
  .href;
const IMAGE_STAR2 = new URL("../assets/images/starflake2.png", import.meta.url)
  .href;

onMounted(() => {
  container = document.getElementById("login-three-container");
  width = container.clientWidth;
  height = container.clientHeight;
  console.log(container);
  initScene();
  initSceneBg();
  initCamera();
  initSphereModal();
  initLight();
  //定义初始位置
  particles_init_position = -zAxisNumber - depth / 2;
  zprogress = particles_init_position;
  zprogress_second = particles_init_position * 2;
  particles_first = initSceneStar(particles_init_position);
  particles_second = initSceneStar(zprogress_second);
  initRenderer();
  initOrbitControls();
  animate();
});
//初始化场景
const initScene = () => {
  scene = new THREE.Scene();
  //添加雾的效果
  scene.fog = new THREE.Fog(0x000000, 0, 10000);
};
//添加背景
const initSceneBg = () => {
  new THREE.TextureLoader().load(IMAGE_SKY, (texture) => {
    //创建立方体
    const geometry = new THREE.BoxGeometry(width, height, depth);
    //创建材质
    const material = new THREE.MeshBasicMaterial({
      //添加纹理
      map: texture,
      side: THREE.BackSide,
    });
    //创建网格
    const mesh = new THREE.Mesh(geometry, material);
    //添加到场景
    scene.add(mesh);
  });
};
//初始化相机
const initCamera = () => {
  //视野夹角
  const fov = 15;
  //计算相机距离物体的距离 15du
  const distance = width / 2 / Math.tan(Math.PI / 12);
  zAxisNumber = Math.floor(distance - 1400 / 2);
  camera = new THREE.PerspectiveCamera(fov, width / height, 1, 30000);
  //设置相机所在位置
  camera.position.set(0, 0, zAxisNumber);
  //相机看向原点
  camera.lookAt(0, 0, 0);
};
//初始化球体
const initSphereModal = () => {
  const geometry = new THREE.SphereGeometry(50, 64, 32);
  //高光材质 把earth_bg贴图，贴到地球得表面上
  const material = new THREE.MeshPhongMaterial();
  material.map = new THREE.TextureLoader().load(IMAGE_EARTH);
  //网格
  sphere = new THREE.Mesh(geometry, material);
  sphere.position.set(-400, 200, -200);
  scene.add(sphere);
};
//光源
const initLight = () => {
  //环境光
  const abientLight = new THREE.AmbientLight(0xffffff, 1); // 柔和的白光
  scene.add(abientLight);
  //点光源
  const light = new THREE.PointLight(0x0655fd, 5, 0);
  light.position.set(0, 100, -200);
  scene.add(light);
};
//星球的自转
const renderSphereRotate = () => {
  sphere.rotateY(0.001);
};
// 初始化场景星星的效果
const initSceneStar = (initZposition) => {
  const geometry = new THREE.BufferGeometry();
  //星星位置的坐标
  const vertices = [];
  //创建纹理
  const textureLoader = new THREE.TextureLoader();
  const sprite1 = textureLoader.load(IMAGE_STAR1);
  const sprite2 = textureLoader.load(IMAGE_STAR2);
  //星星的数据
  const pointsGeometry = [];
  //声明点的参数
  parameters = [
    //颜色 贴图 大小
    [[0.6, 100, 0.75], sprite1, 50],
    [[0, 0, 1], sprite2, 20],
  ];
  //创建1500个星星
  for (let i = 0; i < 1500; i++) {
    const x = THREE.MathUtils.randFloatSpread(width);
    const y = _.random(0, height / 2);
    const z = _.random(-depth / 2, zAxisNumber);
    vertices.push(x, y, z);
  }
  geometry.setAttribute(
    "position",
    new THREE.Float32BufferAttribute(vertices, 3)
  );
  //创建2种不同的材质
  for (let i = 0; i < parameters.length; i++) {
    //颜色
    const color = parameters[i][0];
    //纹理
    const sprite = parameters[i][1];
    //点的大小
    const size = parameters[i][2];
    materials[i] = new THREE.PointsMaterial({
      size,
      map: sprite,
      blending: THREE.AdditiveBlending,
      transparent: true,
      depthTest: true, //开启深度测试
    });
    //设置颜色HLS
    materials[i].color.setHSL(color[0], color[1], color[2]);
    //创建物体
    const particles = new THREE.Points(geometry, materials[i]);
    //设置角度
    particles.rotation.x = Math.random() * 0.2 - 0.15;
    particles.rotation.y = Math.random() * 0.2 - 0.15;
    particles.rotation.z = Math.random() * 0.2 - 0.15;
    particles.position.setZ(initZposition);
    pointsGeometry.push(particles);
    scene.add(particles);
  }
  return pointsGeometry;
};
//渲染星星的运动
const renderStarMove = () => {
  //星星颜色交替变化
  const time = Date.now() * 0.0005;
  for (let i = 0; i < parameters.length; i++) {
    const color = parameters[i][0];
    const h = ((360 * (color[0] + time)) % 360) / 360;
    materials[i].color.setHSL(color[0], color[1], parseFloat(h.toFixed(2)));
  }
  //星星的运动
  zprogress += 1;
  zprogress_second += 1;
  if (zprogress >= zAxisNumber + depth / 2) {
    zprogress = particles_init_position;
  } else {
    particles_first.forEach((item) => {
      item.position.setZ(zprogress);
    });
  }
   if (zprogress_second >= zAxisNumber + depth / 2) {
    zprogress_second = particles_init_position;
  } else {
    particles_second.forEach((item) => {
      item.position.setZ(zprogress_second);
    });
  }
};
//定义渲染函数（渲染器）
const initRenderer = () => {
  //创建渲染器
  renderer = new THREE.WebGLRenderer();
  //定义渲染器的尺寸
  renderer.setSize(width, height);
  container.appendChild(renderer.domElement);
};
//添加轨道控制器
const initOrbitControls = () => {
  const controls = new OrbitControls(camera, renderer.domElement);
  controls.enabled = true;
  // 轨道控制器更新
  controls.update();
};
//动画刷新
const animate = () => {
  requestAnimationFrame(animate);
  renderSphereRotate();
  renderStarMove();
  //进行渲染
  renderer.render(scene, camera);
};
</script>
<style lang="less" scoped>
#login-three-container {
  width: 100%;
  height: 100vh;
}
</style>

32 星云效果的显示

<template>
  <div id="login-three-container"></div>
</template>
<script setup lang="ts">
import { onMounted } from "vue";
import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import _ from "lodash";
//容器
let container;
//场景
let scene;
//加载图片
const IMAGE_SKY = new URL("../assets/images/sky.png", import.meta.url).href;
//宽度
let width;
//高度
let height;
//深度
let depth = 1400;
//相机在z轴上的位置
let zAxisNumber;
//相机
let camera;
//渲染器
let renderer;
//球体的网格
let sphere;
//点的初始参数
let parameters;
//创建材质
let materials = [];
//初始位置
let particles_init_position;
//声明点1在z轴上的移动位置（记录星星在z轴上的移动位置 ）
let zprogress;
//声明点2在z轴上的移动位置
let zprogress_second;
//声明点1的数据
let particles_first = [];
//声明点2的数据
let particles_second = [];
//球体贴图
const IMAGE_EARTH = new URL("../assets/images/earth_bg.png", import.meta.url)
  .href;
//星星贴图
const IMAGE_STAR1 = new URL("../assets/images/starflake1.png", import.meta.url)
  .href;
const IMAGE_STAR2 = new URL("../assets/images/starflake2.png", import.meta.url)
  .href;
//星云贴图
const IMAGE_CLOUD = new URL("../assets/images/cloud.png", import.meta.url).href;

onMounted(() => {
  container = document.getElementById("login-three-container");
  width = container.clientWidth;
  height = container.clientHeight;
  console.log(container);
  initScene();
  initSceneBg();
  initCamera();
  initSphereModal();
  initLight();
  //定义初始位置
  particles_init_position = -zAxisNumber - depth / 2;
  zprogress = particles_init_position;
  zprogress_second = particles_init_position * 2;
  particles_first = initSceneStar(particles_init_position);
  particles_second = initSceneStar(zprogress_second);
  initCloud(400, 200);
  initRenderer();
  initOrbitControls();
  animate();
});
//初始化场景
const initScene = () => {
  scene = new THREE.Scene();
  //添加雾的效果
  scene.fog = new THREE.Fog(0x000000, 0, 10000);
};
//添加背景
const initSceneBg = () => {
  new THREE.TextureLoader().load(IMAGE_SKY, (texture) => {
    //创建立方体
    const geometry = new THREE.BoxGeometry(width, height, depth);
    //创建材质
    const material = new THREE.MeshBasicMaterial({
      //添加纹理
      map: texture,
      side: THREE.BackSide,
    });
    //创建网格
    const mesh = new THREE.Mesh(geometry, material);
    //添加到场景
    scene.add(mesh);
  });
};
//初始化相机
const initCamera = () => {
  //视野夹角
  const fov = 15;
  //计算相机距离物体的距离 15du
  const distance = width / 2 / Math.tan(Math.PI / 12);
  zAxisNumber = Math.floor(distance - 1400 / 2);
  camera = new THREE.PerspectiveCamera(fov, width / height, 1, 30000);
  //设置相机所在位置
  camera.position.set(0, 0, zAxisNumber);
  //相机看向原点
  camera.lookAt(0, 0, 0);
};
//初始化球体
const initSphereModal = () => {
  const geometry = new THREE.SphereGeometry(50, 64, 32);
  //高光材质 把earth_bg贴图，贴到地球得表面上
  const material = new THREE.MeshPhongMaterial();
  material.map = new THREE.TextureLoader().load(IMAGE_EARTH);
  //网格
  sphere = new THREE.Mesh(geometry, material);
  sphere.position.set(-400, 200, -200);
  scene.add(sphere);
};
//光源
const initLight = () => {
  //环境光
  const abientLight = new THREE.AmbientLight(0xffffff, 1); // 柔和的白光
  scene.add(abientLight);
  //点光源
  const light = new THREE.PointLight(0x0655fd, 5, 0);
  light.position.set(0, 100, -200);
  scene.add(light);
};
//星球的自转
const renderSphereRotate = () => {
  sphere.rotateY(0.001);
};
// 初始化场景星星的效果
const initSceneStar = (initZposition) => {
  const geometry = new THREE.BufferGeometry();
  //星星位置的坐标
  const vertices = [];
  //创建纹理
  const textureLoader = new THREE.TextureLoader();
  const sprite1 = textureLoader.load(IMAGE_STAR1);
  const sprite2 = textureLoader.load(IMAGE_STAR2);
  //星星的数据
  const pointsGeometry = [];
  //声明点的参数
  parameters = [
    //颜色 贴图 大小
    [[0.6, 100, 0.75], sprite1, 50],
    [[0, 0, 1], sprite2, 20],
  ];
  //创建1500个星星
  for (let i = 0; i < 1500; i++) {
    const x = THREE.MathUtils.randFloatSpread(width);
    const y = _.random(0, height / 2);
    const z = _.random(-depth / 2, zAxisNumber);
    vertices.push(x, y, z);
  }
  geometry.setAttribute(
    "position",
    new THREE.Float32BufferAttribute(vertices, 3)
  );
  //创建2种不同的材质
  for (let i = 0; i < parameters.length; i++) {
    //颜色
    const color = parameters[i][0];
    //纹理
    const sprite = parameters[i][1];
    //点的大小
    const size = parameters[i][2];
    materials[i] = new THREE.PointsMaterial({
      size,
      map: sprite,
      blending: THREE.AdditiveBlending,
      transparent: true,
      depthTest: true, //开启深度测试
    });
    //设置颜色HLS
    materials[i].color.setHSL(color[0], color[1], color[2]);
    //创建物体
    const particles = new THREE.Points(geometry, materials[i]);
    //设置角度
    particles.rotation.x = Math.random() * 0.2 - 0.15;
    particles.rotation.y = Math.random() * 0.2 - 0.15;
    particles.rotation.z = Math.random() * 0.2 - 0.15;
    particles.position.setZ(initZposition);
    pointsGeometry.push(particles);
    scene.add(particles);
  }
  return pointsGeometry;
};
//渲染星星的运动
const renderStarMove = () => {
  //星星颜色交替变化
  const time = Date.now() * 0.0005;
  for (let i = 0; i < parameters.length; i++) {
    const color = parameters[i][0];
    const h = ((360 * (color[0] + time)) % 360) / 360;
    materials[i].color.setHSL(color[0], color[1], parseFloat(h.toFixed(2)));
  }
  //星星的运动
  zprogress += 1;
  zprogress_second += 1;
  if (zprogress >= zAxisNumber + depth / 2) {
    zprogress = particles_init_position;
  } else {
    particles_first.forEach((item) => {
      item.position.setZ(zprogress);
    });
  }
  if (zprogress_second >= zAxisNumber + depth / 2) {
    zprogress_second = particles_init_position;
  } else {
    particles_second.forEach((item) => {
      item.position.setZ(zprogress_second);
    });
  }
};
//渲染星云的效果
// IMAGE_CLOUD
const initCloud = (width, height) => {
  const geometry = new THREE.PlaneGeometry(width, height);
  const textureLoader = new THREE.TextureLoader();
  const cloudTexture = textureLoader.load(IMAGE_CLOUD);
  const material = new THREE.MeshBasicMaterial({
    map: cloudTexture,
    blending: THREE.AdditiveBlending,
    transparent: true,
    depthTest: false, //开启深度测试
  });
  const cloud = new THREE.Mesh(geometry, material);
  scene.add(cloud);
};
//定义渲染函数（渲染器）
const initRenderer = () => {
  //创建渲染器
  renderer = new THREE.WebGLRenderer();
  //定义渲染器的尺寸
  renderer.setSize(width, height);
  container.appendChild(renderer.domElement);
};
//添加轨道控制器
const initOrbitControls = () => {
  const controls = new OrbitControls(camera, renderer.domElement);
  controls.enabled = true;
  // 轨道控制器更新
  controls.update();
};
//动画刷新
const animate = () => {
  requestAnimationFrame(animate);
  renderSphereRotate();
  renderStarMove();
  //进行渲染
  renderer.render(scene, camera);
};
</script>
<style lang="less" scoped>
#login-three-container {
  width: 100%;
  height: 100vh;
}
</style>

33星云运动效果实现

CatmullRomCurve3
使用Catmull-Rom算法， 从一系列的点创建一条平滑的三维样条曲线。
在这里插入图片描述

<template>
  <div id="login-three-container"></div>
</template>
<script setup lang="ts">
import { onMounted } from "vue";
import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import _ from "lodash";
//容器
let container;
//场景
let scene;
//加载图片
const IMAGE_SKY = new URL("../assets/images/sky.png", import.meta.url).href;
//宽度
let width;
//高度
let height;
//深度
let depth = 1400;
//相机在z轴上的位置
let zAxisNumber;
//相机
let camera;
//渲染器
let renderer;
//球体的网格
let sphere;
//点的初始参数
let parameters;
//创建材质
let materials = [];
//初始位置
let particles_init_position;
//声明点1在z轴上的移动位置（记录星星在z轴上的移动位置 ）
let zprogress;
//声明点2在z轴上的移动位置
let zprogress_second;
//声明点1的数据
let particles_first = [];
//声明点2的数据
let particles_second = [];
//声明星云对象1
let cloud_first;
//声明星云对象2
let cloud_second;
//声明星云运动的渲染函数1
let renderCloud_first;
//声明星云运动的渲染函数2
let renderCloud_second;
//球体贴图
const IMAGE_EARTH = new URL("../assets/images/earth_bg.png", import.meta.url)
  .href;
//星星贴图
const IMAGE_STAR1 = new URL("../assets/images/starflake1.png", import.meta.url)
  .href;
const IMAGE_STAR2 = new URL("../assets/images/starflake2.png", import.meta.url)
  .href;
//星云贴图
const IMAGE_CLOUD = new URL("../assets/images/cloud.png", import.meta.url).href;

onMounted(() => {
  container = document.getElementById("login-three-container");
  width = container.clientWidth;
  height = container.clientHeight;
  console.log(container);
  initScene();
  initSceneBg();
  initCamera();
  initSphereModal();
  initLight();
  //定义初始位置
  particles_init_position = -zAxisNumber - depth / 2;
  zprogress = particles_init_position;
  zprogress_second = particles_init_position * 2;
  particles_first = initSceneStar(particles_init_position);
  particles_second = initSceneStar(zprogress_second);
  cloud_first = initCloud(400, 200);
  cloud_second = initCloud(200, 100);
  renderCloud_first = initCloudMove(
    cloud_first,
    [
      new THREE.Vector3(-width / 10, 0, -depth / 2),
      new THREE.Vector3(-width / 4, height / 8, 0),
      new THREE.Vector3(-width / 4, 0, zAxisNumber),
    ],
    0.0002
  );
  renderCloud_second = initCloudMove(
    cloud_second,
    [
      new THREE.Vector3(width / 8, height / 8, -depth / 2),
      new THREE.Vector3(width / 8, height / 8, zAxisNumber),
    ],
    0.0008
  );
  initRenderer();
  initOrbitControls();
  animate();
});
//初始化场景
const initScene = () => {
  scene = new THREE.Scene();
  //添加雾的效果
  scene.fog = new THREE.Fog(0x000000, 0, 10000);
};
//添加背景
const initSceneBg = () => {
  new THREE.TextureLoader().load(IMAGE_SKY, (texture) => {
    //创建立方体
    const geometry = new THREE.BoxGeometry(width, height, depth);
    //创建材质
    const material = new THREE.MeshBasicMaterial({
      //添加纹理
      map: texture,
      side: THREE.BackSide,
    });
    //创建网格
    const mesh = new THREE.Mesh(geometry, material);
    //添加到场景
    scene.add(mesh);
  });
};
//初始化相机
const initCamera = () => {
  //视野夹角
  const fov = 15;
  //计算相机距离物体的距离 15du
  const distance = width / 2 / Math.tan(Math.PI / 12);
  zAxisNumber = Math.floor(distance - 1400 / 2);
  camera = new THREE.PerspectiveCamera(fov, width / height, 1, 30000);
  //设置相机所在位置
  camera.position.set(0, 0, zAxisNumber);
  //相机看向原点
  camera.lookAt(0, 0, 0);
};
//初始化球体
const initSphereModal = () => {
  const geometry = new THREE.SphereGeometry(50, 64, 32);
  //高光材质 把earth_bg贴图，贴到地球得表面上
  const material = new THREE.MeshPhongMaterial();
  material.map = new THREE.TextureLoader().load(IMAGE_EARTH);
  //网格
  sphere = new THREE.Mesh(geometry, material);
  sphere.position.set(-400, 200, -200);
  scene.add(sphere);
};
//光源
const initLight = () => {
  //环境光
  const abientLight = new THREE.AmbientLight(0xffffff, 1); // 柔和的白光
  scene.add(abientLight);
  //点光源
  const light = new THREE.PointLight(0x0655fd, 5, 0);
  light.position.set(0, 100, -200);
  scene.add(light);
};
//星球的自转
const renderSphereRotate = () => {
  sphere.rotateY(0.001);
};
// 初始化场景星星的效果
const initSceneStar = (initZposition) => {
  const geometry = new THREE.BufferGeometry();
  //星星位置的坐标
  const vertices = [];
  //创建纹理
  const textureLoader = new THREE.TextureLoader();
  const sprite1 = textureLoader.load(IMAGE_STAR1);
  const sprite2 = textureLoader.load(IMAGE_STAR2);
  //星星的数据
  const pointsGeometry = [];
  //声明点的参数
  parameters = [
    //颜色 贴图 大小
    [[0.6, 100, 0.75], sprite1, 50],
    [[0, 0, 1], sprite2, 20],
  ];
  //创建1500个星星
  for (let i = 0; i < 1500; i++) {
    const x = THREE.MathUtils.randFloatSpread(width);
    const y = _.random(0, height / 2);
    const z = _.random(-depth / 2, zAxisNumber);
    vertices.push(x, y, z);
  }
  geometry.setAttribute(
    "position",
    new THREE.Float32BufferAttribute(vertices, 3)
  );
  //创建2种不同的材质
  for (let i = 0; i < parameters.length; i++) {
    //颜色
    const color = parameters[i][0];
    //纹理
    const sprite = parameters[i][1];
    //点的大小
    const size = parameters[i][2];
    materials[i] = new THREE.PointsMaterial({
      size,
      map: sprite,
      blending: THREE.AdditiveBlending,
      transparent: true,
      depthTest: true, //开启深度测试
    });
    //设置颜色HLS
    materials[i].color.setHSL(color[0], color[1], color[2]);
    //创建物体
    const particles = new THREE.Points(geometry, materials[i]);
    //设置角度
    particles.rotation.x = Math.random() * 0.2 - 0.15;
    particles.rotation.y = Math.random() * 0.2 - 0.15;
    particles.rotation.z = Math.random() * 0.2 - 0.15;
    particles.position.setZ(initZposition);
    pointsGeometry.push(particles);
    scene.add(particles);
  }
  return pointsGeometry;
};
//渲染星星的运动
const renderStarMove = () => {
  //星星颜色交替变化
  const time = Date.now() * 0.0005;
  for (let i = 0; i < parameters.length; i++) {
    const color = parameters[i][0];
    const h = ((360 * (color[0] + time)) % 360) / 360;
    materials[i].color.setHSL(color[0], color[1], parseFloat(h.toFixed(2)));
  }
  //星星的运动
  zprogress += 1;
  zprogress_second += 1;
  if (zprogress >= zAxisNumber + depth / 2) {
    zprogress = particles_init_position;
  } else {
    particles_first.forEach((item) => {
      item.position.setZ(zprogress);
    });
  }
  if (zprogress_second >= zAxisNumber + depth / 2) {
    zprogress_second = particles_init_position;
  } else {
    particles_second.forEach((item) => {
      item.position.setZ(zprogress_second);
    });
  }
};
//渲染星云的效果
const initCloud = (width, height) => {
  const geometry = new THREE.PlaneGeometry(width, height);
  const textureLoader = new THREE.TextureLoader();
  const cloudTexture = textureLoader.load(IMAGE_CLOUD);
  const material = new THREE.MeshBasicMaterial({
    map: cloudTexture,
    blending: THREE.AdditiveBlending,
    transparent: true,
    depthTest: false, //开启深度测试
  });
  const cloud = new THREE.Mesh(geometry, material);
  scene.add(cloud);
  return cloud;
};
//创建星云的运动函数
const initCloudMove = (cloud, route, speed) => {
  //定义一个变量记录星云的位置或者状态
  let cloudProgress = 0;
  //调用一个函数，同时想要通过一个变量来记录上一次的结果
  //创建运动轨迹 三维曲线
  const curve = new THREE.CatmullRomCurve3(route);

  return () => {
    //小于等于1要运动 大于1超出范围要重置
    if (cloudProgress <= 1) {
      cloudProgress += speed;
      //获取当前位置
      const point = curve.getPoint(cloudProgress);
      if (point && point.x) {
        cloud.position.set(point.x, point.y, point.z);
      }
    } else {
      cloudProgress = 0;
    }
  };
};
//定义渲染函数（渲染器）
const initRenderer = () => {
  //创建渲染器
  renderer = new THREE.WebGLRenderer();
  //定义渲染器的尺寸
  renderer.setSize(width, height);
  container.appendChild(renderer.domElement);
};
//添加轨道控制器
const initOrbitControls = () => {
  const controls = new OrbitControls(camera, renderer.domElement);
  controls.enabled = true;
  // 轨道控制器更新
  controls.update();
};
//动画刷新
const animate = () => {
  requestAnimationFrame(animate);
  renderSphereRotate();
  renderStarMove();
  renderCloud_first();
  renderCloud_second();
  //进行渲染
  renderer.render(scene, camera);
};
</script>
<style lang="less" scoped>
#login-three-container {
  width: 100%;
  height: 100vh;
}
</style>

跟随B站视频学习 https://www.bilibili.com/video/BV16h4y127yr?p=32&vd_source=c2279a533bc837e2d5b9ca3570c0a841 完结撒花！！

成长中的向日葵
关注
专栏目录
three.js插入一张图片_ThreeJS 粒子系统实现雪花飘落动画
weixin_29083373的博客
01-26 3764
ThreeJS 粒子系统中，THREE.Points是用来创建点的类，也用来批量管理粒子，基于几何体的顶点来渲染每个粒子。这个类的构造函数有两个参数，geometry(几何体)和material(材质)，几何体参数用来设置粒子的位置坐标，而材质参数用来设置粒子的外观。下面利用ThreeJS的粒子系统来实现雪花飘落动画。1. 寻找素材1) 背景图片选择一张雪景图片作为背景图snow_bg.jpg2)...
THREE.js学习笔记
weixin_45021080的博客
03-27 400
THREE.js学习笔记1.准备工作1.引入THREE.js文件2.创建初始场景功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入...
Three.js学习
CatCat1997的博客
10-11 1359
Three.js 01-three.js 1.three.js资源 GitHub：https://github.com/mrdoob/three.js 官网：https://threejs.org/ 相关库： 库 功能 Physijs Physijs是一款物理引擎，可以协助基于原生WebGL或使用three.js创建模拟物理现象，比如重力下落、物体碰撞等物理现 stats.js JavaScript性能监控器，同样也可以测试webgl的渲染性能 dat.gui 轻量级的icon形用户
THREE.js：网页上的3D世界构建者
最新发布
我码玄黄的博客
09-16 875
THREE.js是一个强大的基于JavaScript的库，它使得在网页上创建和展示三维图形变得异常简单。
three.js的学习
qq_52696618的博客
06-27 672
Three.js是基于原生WebGL封装运行的三维引擎，在所有WebGL引擎中，Three.js是国内文资料最多、使用最广泛的三维引擎。既然Threejs是一款WebGL三维引擎，那么它可以用来做什么想必你一定很关心。所以接下来内容会展示大量基于Threejs引擎或Threejs类似引擎开发的Web3D应用，以便大家了解。
Vue第 44 篇，three.js第 1 篇，如何使用three.js，如何在Vue中使用three.js（three.js新手教学，three.js使用详细，three.js创建3d物体）
weixin_65793170的博客
03-27 4108
⭐Three.js 是一个强大的JavaScript库，它封装了WebGL的复杂性，使得开发者能够更轻松地在网页上创建和展示三维图形。凭借其直观的API设计以及丰富的功能集，Three.js 已经成为构建沉浸式3D体验、游戏、虚拟现实项目等的首选工具之一。从基本的几何体到复杂的动画效果，再到高级的物理模拟，Three.js 提供了一站式的解决方案来满足各种3D开发需求。 得益于其活跃的社区支持及持续不断的更新迭代，Three.js 在GitHub上的受欢迎程度与日俱增，已经积累了超过90,000颗星标
three.js 学习1
大灰狼的小绵羊哥哥的博客
11-25 1562
1. 五大因素 　　搭建一个场景必须要的五大因素, 场景, 相机, 光源, 物体, 渲染器 　　结合生活, 场景就是我们身处的环境, 相机是我们的眼睛, 光源和物体见名知意, 渲染器是将我们看到的渲染到网页上, 五大因素也就这样, 那开始搭建环境吧! 2. 开始搭建环境 　　在搭建环境前, 为了使图像渲染在整个网页上, 需要设置 1 body{ 2 margin: 0; 3 /* 消除body外间距 */ 4 overflow: hidden.
WebGL学习教程之Three.js学习笔记(第一篇)
12-04
Three.js则是一个非常实用的JavaScript库，它为WebGL提供了一套高级的抽象层，极大地简化了3D图形编程的过程。Three.js将WebGL底层的复杂性进行了封装，让开发者可以通过更直观的方式来创建3D对象、光照、相机视角等...
WebGL three.js学习笔记之阴影与实现物体的动画效果
01-21
实现物体的旋转、跳动以及场景阴影的开启与优化 本程序将创建一个场景，并实现物体的动画效果 ...Three.js</title> [removed][removed] [removed][removed] <script src=../../../Import/Setting
Three.js线条光波动画特效.zip
10-08
Three.js是JavaScript的一个开源库，它为开发者提供了在Web浏览器中进行3D图形编程的能力，无需深入学习底层的WebGL API。 首先，理解Three.js的基本概念至关重要。Three.js提供了一个完整的框架，包括场景(Scene)...
Three.js学习（一）初识three.js
volit的博客
12-31 1157
​ 使用.render()方法进行渲染，渲染的频率不能太低，否则会感觉到明显的卡顿，比如setInterval(render,200)，动画会有不流畅的感觉；也不能设置的太高，否则硬件设备的性能会跟不上。可能并不会按照我们实际期望的60FPS执行，两次执行渲染函数的时间也不一定相同，如果执行旋转命令的时间间隔不同，旋转运动就会不均匀。不会立即调用函数而是向浏览器发起一个执行某函数的请求，什么时候执行由浏览器决定，一般默认会保持60FPS的频率，大约每16.7ms调用一次。（1）一个简单的小实例。
ThreeJS快速入门指南
dfc_dfc的博客
01-22 2367
ThreeJs快速入门指南
Three.js入门学习笔记
donghua201的博客
04-19 890
three.js是JavaScript编写的WebGL第三方库。
three.js入门学习
m0_73847536的博客
07-08 815
vscode,webpack/vite/其他,Live Server项目开发环境引入：尽量加上版本号。
ThreeJs学习笔记
糯米
04-03 484
Raycaster官方文档原理示例鼠标在屏幕上点击的时候，得到二维坐标p(x, y),再加上深度坐标的范围(0, 1), 就可以形成两个三位坐标A(x1, y1, 0), B(x2, y, 1), 由于它们的Z轴坐标是0和1，则转变到投影坐标系的话，一定分别是前剪切平面上的点和后剪切平面上的点，也就是说，在投影坐标系中，A点一定在能看见的所有模型的最前面，B点一定在能看见的所有的模型的最后边，将A...
前端开发three.js入门超详细学习，一起来学习3D吧
前端开发工程师
11-20 5435
Three.js 是一个用于在 Web 浏览器中创建和渲染 3D 图形的 JavaScript 库。它提供了一系列强大的功能和工具，使开发者能够轻松地在网页中创建交互式的 3D 场景和动画。
学习threeJS(一)--第一个threeJs
weixin_34258078的博客
05-16 743
2019独角兽企业重金招聘Python工程师标准>>> ...
如何学习three.js
敖丙007的博客
01-15 1210
如何学习three.js
【基础】Three.js的零基础入门篇（附案例代码）
stay hungry, stay foolish
10-27 5070
在使用Three.js时，初学者需要了解如何从零开始创建一个简单的3D场景。以下是创建步骤和一些注意点： 1. 初始化基本组件每个Three.js场景需要几个核心组件：场景（Scene）、相机（Camera）和渲染器（Renderer）。
WebGL three.js学习笔记 阴影与实现物体的动画
05-30
好的，我会为您解答关于WebGL three.js的阴影与实现物体动画的问题。首先，让我们来了解一下WebGL three.js是什么。 WebGL three.js是一款基于WebGL的JavaScript 3D库，可以帮助我们快速搭建3D场景和应用。接下来我们来讲解阴影和实现物体动画的方法。 一、阴影 阴影是模拟物体之间的阴影效果，让3D场景更加真实。在three.js中，我们可以通过设置Mesh的castShadow和receiveShadow属性来实现阴影效果。 1. 首先，我们需要在场景中添加光源，例如SpotLight或DirectionalLight。 2. 然后，在需要投射阴影的物体上设置castShadow为true。 3. 最后，在需要接收阴影的物体上设置receiveShadow为true。 代码示例： ```javascript // 添加光源 const light = new THREE.SpotLight(0xffffff); light.position.set(0, 100, 0); light.castShadow = true; scene.add(light); // 添加需要投射阴影的物体 const cube = new THREE.Mesh(new THREE.BoxGeometry(10, 10, 10), new THREE.MeshLambertMaterial({ color: 0xff0000 })); cube.castShadow = true; scene.add(cube); // 添加需要接收阴影的物体 const plane = new THREE.Mesh(new THREE.PlaneGeometry(200, 200, 1, 1), new THREE.MeshLambertMaterial({ color: 0xffffff })); plane.receiveShadow = true; plane.rotation.x = -Math.PI / 2; scene.add(plane); ``` 二、物体动画 在three.js中，我们可以通过Tween.js库来实现物体的动画效果。Tween.js是一款JavaScript动画库，可以帮助我们实现非常丰富的动画效果。 1. 首先，我们需要在HTML文件中引入Tween.js库文件。 2. 然后，在需要动画的物体上设置初始状态。 3. 最后，通过Tween.js库来设置物体的目标状态和动画效果，例如缓动动画（ease）或弹跳动画（bounce）。 代码示例： ```javascript // 引入Tween.js库文件 <script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/18.6.4/tween.min.js"></script> // 添加需要动画的物体 const cube = new THREE.Mesh(new THREE.BoxGeometry(10, 10, 10), new THREE.MeshLambertMaterial({ color: 0xff0000 })); cube.position.set(0, 0, 0); scene.add(cube); // 设置初始状态 const start = { x: 0, y: 0, z: 0 }; // 设置目标状态 const end = { x: 50, y: 50, z: 50 }; // 设置动画效果 const tween = new TWEEN.Tween(start) .to(end, 1000) .easing(TWEEN.Easing.Quadratic.InOut) .onUpdate(() => { cube.position.set(start.x, start.y, start.z); }) .start(); ``` 以上是关于WebGL three.js阴影与实现物体动画的方法，希望能够对您有所帮助。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值