vue three.js的简单使用

该博客是根据Three.js入门教程——教不会算我输-CSDN博客 进行修改

学习建议看文档 Three.js中文网 (webgl3d.cn)

Three.js是一个非常流行的JavaScript 3D库，用于在浏览器中创建和显示3D图形。这个库使用WebGL，一个在浏览器中提供3D渲染能力的技术。使用Three.js，开发者可以在网页上创建各种3D场景，包括游戏、数据可视化、艺术项目等。

Three.js中文网 (webgl3d.cn)

项目的开发环境引入threejs

采用的是Vue + threejs或React + threejs技术栈，这很简单，threejs就是一个js库，直接通过npm命令行安装就行。
// 比如安装148版本
npm install three@0.148.0 --save

npm安装后，如何引入three.js

执行import * as THREE from 'three';,ES6语法引入three.js核心。

// 引入three.js
import * as THREE from 'three';

使用

 在Three.js中有三要素：场景、摄像机和渲染器，只有以上三者结合才能渲染出可见的内容。

以下是一个立方体的例子

<template>
  <div>
    <div id="webgl" class="centerCenterBottom"></div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as THREE from 'three'


function init() {
  // 创建3D场景对象Scene
  const scene = new THREE.Scene();
  //创建一个长方体几何对象Geometry
  const geometry = new THREE.BoxGeometry(100, 100, 100);
  //创建一个材质对象Material
  const material = new THREE.MeshLambertMaterial({
    color: 0xff0000,//0xff0000设置材质颜色为红色
  });
  //通过网格模型Mesh (opens new window)表示一个虚拟的物体 两个参数分别为几何体geometry、材质material
  const mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
  //设置网格模型在三维空间中的位置坐标，默认是坐标原点
  mesh.position.set(10, 20, 0);
  scene.add(mesh);


  // 光照
  //点光源：两个参数分别表示光源颜色和光照强度
  // 参数1：0xffffff是纯白光,表示光源颜色
  // 参数2：1.0,表示光照强度，可以根据需要调整
  const pointLight = new THREE.PointLight(0xffffff, 10.0);
  //点光源位置
  pointLight.decay = 0.0;//设置光源不随距离衰减
  pointLight.position.set(400, 100, 100);//点光源位置
  scene.add(pointLight); //点光源添加到场景中


  // 摄像机
  // 定义相机输出画布的尺寸(单位:像素px)
  const width = 800; //宽度
  const height = 500; //高度
  // 实例化一个透视投影相机对象
  const camera = new THREE.PerspectiveCamera(30, width / height, 1, 3000);
  //相机在Three.js三维坐标系中的位置
  // 根据需要设置相机位置具体值
  camera.position.set(100, 100, 300);
  //相机观察目标指向Threejs 3D空间中某个位置
  camera.lookAt(0, 0, 0);  //y轴上位置10

  // 渲染器
  let renderer = new THREE.WebGLRenderer();
  renderer.setSize(width, height); //设置three.js渲染区域的尺寸(像素px)
  document.getElementById('webgl').appendChild(renderer.domElement);
  renderer.render(scene, camera);
  
}


onMounted(
  () => {
    init()
  }
)

</script>
<style>
body {
  margin: 0;
}

canvas {
  width: 100%;
  height: 100%;
}
</style>

 

如果想要旋转可以

将上一步中最后一句代码：

renderer.render(scene, camera);
替换为：

// 动画
function animate() {
 
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render( scene, camera );
 
    requestAnimationFrame( animate );
}
animate();

优化

//  场景
  let scene = new THREE.Scene();

  // 摄像机
  // // 45:视场角度, width / height:Canvas画布宽高比, 1:近裁截面, 3000：远裁截面
  let camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 3000);
  // 相机位置
  camera.position.x = -10;
  camera.position.y = 30;
  camera.position.z = 30
  //相机观察目标指向Threejs 3D空间中某个位置
  camera.lookAt(scene.position);


  // 渲染器
  let renderer = new THREE.WebGLRenderer();
  //设置three.js渲染区域的尺寸(像素px)
  renderer.setSize(window.innerWidth, window.innerHeight);
  // document.body.appendChild(renderer.domElement);
  //画布要插入到的HTML元素
  document.getElementById('webgl').appendChild(renderer.domElement);

  // 设置渲染器渲染阴影效果
  renderer.setClearColor(new THREE.Color(0x000000));
  // 渲染器允许阴影渲染
  renderer.shadowMap.enabled = true;

  // 坐标轴
  //hree.js坐标轴
  let axes = new THREE.AxesHelper(20);
  scene.add(axes);


  // 平面
  //创建了一个长和宽分别为 60 和 20,高为 1,宽度的方向的边框为 1 的平面对象
  let planeGeometry = new THREE.PlaneGeometry(60, 20, 1, 1);
  //材质对象
  let planeMaterial = new THREE.MeshLambertMaterial({ color: 0xcccccc });
  let plane = new THREE.Mesh(planeGeometry, planeMaterial);
  plane.rotation.x = -0.5 * Math.PI;
  plane.position.x = 30
  plane.position.y = 0
  plane.position.z = 0
  scene.add(plane);

  // 设置投影
  plane.receiveShadow = true;


  // 物体
  // 物体大小
  let geometry = new THREE.BoxGeometry(4, 4, 4);
  let material = new THREE.MeshLambertMaterial({ color: 0x00ff00 });
  let cube = new THREE.Mesh(geometry, material);
  //坐标
  cube.position.x = 10;
  cube.position.y = 2;
  cube.position.z = 0;

  // 设置投影
  cube.castShadow = true;
  scene.add(cube);


  // 光源
  let spotLight = new THREE.SpotLight(0xffffff);
  //光线是否随距离衰减
  spotLight.decay = 0.0;
  //坐标
  spotLight.position.set(0, 60, 5);
  scene.add(spotLight);

  // 设置投影
  spotLight.castShadow = true;

  renderer.render(scene, camera);

 好好看文档就像，以上例子只是用来调试学习认识API作用