Three.js初体验

简介

three.js就是使用javascript来写3D程序的意思。Javascript是运行在网页端的脚本语言，那么毫无疑问Three.js也是运行在浏览器上的。

Three.js是基于原生WebGL封装运行的三维引擎，在所有WebGL引擎中，Three.js是国内文资料最多、使用最广泛的三维引擎。

Threejs是一款WebGL三维引擎，它可以用来做什么许多许多地场景应用

场景

vr看房：

科技发展迅速，物联网给我们带来了很大的便利，其中vr看房就是应用three.js技术面向未来发展的；利用3D的效果大大提高了用户的视觉效果。让客户拥有身临其境的感觉。

源码：vr看房

基本实现

注:该框架主要利用的是vite+vue3+Ts技术栈

Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。你可以在它的主页上看到许多精彩的演示。

1.1、引入three.js

import * as THREE from "three";

1.2、创建场景

const scene = new THREE.Scene();

1.3、创建相机

const camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,10);

1.4、设置相机位置

camera.position.z = 0.1;

1.5、初始化渲染器

const renderer = new THREE.WebGLRenderer();

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

1.6、添加立方体（材质、物体生成与场景应用）

//添加立方体

const geometry = new THREE.BoxGeometry(10, 10, 10);

//立方体材质

const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

// 物体生成

const cube = new THREE.Mesh(geometry, material);

//添加到场景当中

scene.add(cube);

1.7、挂载完毕后获取dom

const containar = ref(null);

onMounted(() => {

  //添加轨道控制器

  const controls = new OrbitControls(camera, containar.value);

  controls.enableDamping = true;

  containar.value.appendChild(renderer.domElement);

  render();

});

具体实现代码

<template>
  <div class="containar" ref="containar"></div>
</template>

<script setup>
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { onMounted, ref, reactive } from "vue";

// init
//创建场景
const scene = new THREE.Scene();

//创建相机
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  10
);
//设置相机位置
camera.position.z = 0.1;

//初始化渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);

const containar = ref(null);

//渲染函数
const render = () => {
  renderer.render(scene, camera);
  //动画帧
  requestAnimationFrame(render);
};

//添加立方体
const geometry = new THREE.BoxGeometry(10, 10, 10);


var arr = ["left", "right", "top", "bottom", "front", "back"];
var boxMaterials = [];

arr.forEach((item) => {
  //纹理加载
  let texture = new THREE.TextureLoader().load(`/image/${item}.png`);
  if (item === "top" || item === "bottom") {
    texture.rotation = Math.PI;
    texture.center = new THREE.Vector2(0.5, 0.5);
    boxMaterials.push(new THREE.MeshBasicMaterial({ map: texture }));
  } else {
    boxMaterials.push(new THREE.MeshBasicMaterial({ map: texture }));
  }
});
const cube = new THREE.Mesh(geometry, boxMaterials);
cube.geometry.scale(1, 1, -1);
scene.add(cube);

//挂载完毕后获取dom
onMounted(() => {
  //添加轨道控制器
  const controls = new OrbitControls(camera, containar.value);
  controls.enableDamping = true;
  containar.value.appendChild(renderer.domElement);
  render();
});
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
.containar {
  width: 100vw;
  height: 100vh;
  background: red;
}
</style>

图片路径（前后左右上下六张）：

源码:https://jihulab.com/mygit2/vr/-/tree/future