4.three.js基础示例

Hang1126

已于 2024-09-26 14:11:33 修改

阅读量781

点赞数 21

分类专栏： threejs 文章标签： javascript 开发语言 ecmascript

于 2024-09-21 10:42:33 首次发布

本文链接：https://blog.csdn.net/qq_58288155/article/details/142410373

版权

threejs 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1. 下载安装threejs

在vue项目中使用npm install three@0.165下载Three.js库，在package.json中查看three.js是否下载成功。（不同版本的threejs中版本会存在微小的差异，下载时需要指定threejs的版本。）
版本

1. 在学习任何threejs相关课程或参考threejs相关文章，一定要注意版本问题。
2. 查看所有版本(opens new window)链接：http://www.webgl3d.cn/pages/aac9ab/

下载好threejs后，在项目文件中直接引用，然后通过THREE访问threejs所有核心的API

import * as THREE from "three";

// 检查是否成功引用
console.log(THREE);

// 访问Scene、WebGLRenderer
// THREE.Scene
// THREE.WebGLRenderer

2. 编写基础代码

参考threejs简介，结合官网中API了解场景、相机、渲染器的基本概念以及API后，下面我们开始编写代码。

import * as THREE from 'three';
// 1.创建场景
const scene = new THREE.Scene();
// 2.创建相机
// 视野角度，长宽比，近截面，远截面
const camera = new THREE.PerspectiveCamera( 
  75, window.innerWidth / window.innerHeight, 0.1, 1000 );
// 3.创建渲染器
const renderer = new THREE.WebGLRenderer();
// 4.设置渲染器设置为body的尺寸大小
renderer.setSize( window.innerWidth, window.innerHeight );
// 5.将渲染器的Canvas添加body中
document.body.appendChild( renderer.domElement );

1. three.js 里有几种不同的相机，在这里，我们使用的是 PerspectiveCamera（透视相机）
2. 相机控制器 OrbitControls（轨道控制器）可以使得相机围绕目标进行轨道运动。
3. 透视相机
4. 使用threejs不可缺少的3部分：场景、相机、渲染器

经过步骤4后，你会得到一个黑漆漆的页面，问题出在哪了呢？这是因为我们场景中缺少光源、模型。

3. 完善代码

添加光源、模型后的完整代码：

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

<script lang='ts' setup>
  import * as THREE from 'three'
  import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
  import { onMounted  } from 'vue'
  
  //创建一个三维场景
  const scene = new THREE.Scene()
  
  //添加光源
  const ambient = new THREE.AmbientLight(0xffffff, 0.5),
  light1 = new THREE.PointLight(0xffffff, 0.4),
  light2 = new THREE.PointLight(0xffffff, 0.4)

  scene.add(ambient)
  light1.position.set(200,300,400)
  scene.add(light1)
  light2.position.set(-200,-300,-400)
  scene.add(light2)

  //创建一个透视相机
  const width = window.innerWidth, height = window.innerHeight  ,
  camera = new THREE.PerspectiveCamera(45, width/height, 1, 1000)
  //设置相机位置
  camera.position.set(200,200,200) 
  //设置相机方向
  camera.lookAt(0,0,0)

  //创建辅助坐标轴
  const axesHelper = new THREE.AxesHelper(100)
  scene.add(axesHelper)

  //创建一个物体（形状）（threejs内置）
  const geometry = new THREE.BoxGeometry(100, 100, 100)
  //创建材质（外观）
  const material = new THREE.MeshLambertMaterial({
    color: 0x00ffff,//设置材质颜色
    transparent: true,//开启透明度
    opacity: 0.5 //设置透明度
  })
  //创建一个网格模型对象
  const mesh = new THREE.Mesh(geometry, material)
  //把网格模型添加到三维场景
  scene.add(mesh)

  //创建一个WebGL渲染器
  const renderer = new THREE.WebGLRenderer()
  renderer.setSize(width,height)
  renderer.render(scene,camera)

  const controls = new OrbitControls(camera, renderer.domElement)
  controls.addEventListener('change',()=>{
    renderer.render(scene, camera)
  })
  onMounted(()=>{
    document.getElementById('three')?.appendChild(renderer.domElement)
  })
</script>

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

代码运行效果：

相较于4中的代码，我们发现代码中多了坐标轴辅助线、光源、物体材质、网格模型

1. 辅助理解：wellyyss.cn/ys-course/#/base
2. 坐标轴（定义三维空间中的方向和位置，Three.js使用右手坐标系【即X轴指向右侧，Y轴指向上方，Z轴指向屏幕外】。）
3. 辅助线可以在开发过程中更容易地理解物体的位置和旋转情况。
4. 光源（光源是用来模拟现实世界中光照效果的重要组成部分。光源不仅为场景中的物体提供必要的照明，还影响着物体的可见性、颜色以及表面的质感。除点光源外，还有：环境光、聚光灯、平行光等）
5. 网格（网格模型(三角形概念) | Three.js中文网 (webgl3d.cn)）
  智慧工厂数字化管理平台 - 预览仪表板 - Wyn 商业智能 (grapecity.com.cn)点击事件通过网格展示点击状态。
6. 材质（决定了如何渲染几何体，包括颜色、纹理、反射属性等）

4. 代码中设计到的一些问题

1. 场景中没有光源能看到物体吗？

1. 1. 在 Three.js 中，能否看到物体取决于物体的材质类型。某些材质不需要光源就能显示，而其他材质则需要光源来正确渲染物体的颜色和阴影。
  2. 例如：

1. 1. 1. 不需要光源的材质类型：MeshBasicMaterial（基础网格材质）、SpriteMaterial（点精灵材质）
    2. 需要光源的材质类型：MeshLambertMaterial（lambert网格材质）、MeshPhongMaterial（Phong网格材质）、MeshStandardMaterial（标准网格材质）

1. 物体、网格、材质三者之间有什么关系？

1. 1. 模型物体（Model）模型物体一般指的是具有几何形状、颜色、纹理等属性的3D对象。在Three.js中，模型通常是通过加载外部文件（如OBJ, FBX, GLTF等格式）来创建的。一个模型可以包含多个网格，每个网格代表模型的一个部分，并且可以有不同的材质和动画。
  2. 网格（Mesh）网格是Three.js中最基本的3D对象类型之一。它由几何体（Geometry或BufferGeometry）和材质（Material）组成。几何体定义了网格的形状，包括顶点位置、法线、颜色、UV坐标等信息；而材质则定义了网格的外观，如颜色、反射率、透明度等。

1. 1. 1. 几何体：描述了3D物体的形状，包括顶点、边、面等信息。
    2. 材质：决定了如何渲染几何体，包括颜色、纹理、反射属性等。
    3. 一个网格可以包含多个几何体实例，比如一个复杂的模型可能会由多个不同的网格组合而成。

1. 1. 材质（Material）材质是用于描述如何渲染网格的部分。它定义了网格的颜色、纹理、反射特性以及其他视觉效果。Three.js提供了多种材质类型，如MeshBasicMaterial（无光照影响的基本材质）、MeshPhongMaterial（带有高光的材质）、MeshStandardMaterial（物理基础渲染材质）等。每种材质适用于不同的场景需求。

1. 材质、贴图两者联系与区别？

1. 1. 材质（Material）材质描述了3D物体表面的物理属性，比如颜色、光滑度、反射率等。在Three.js中，材质决定了物体如何反射光线以及表面的颜色计算方式。
  2. 贴图（Texture）贴图是一种应用到3D模型表面上的图像，它能够提供额外的细节或效果，使3D模型看起来更加真实。贴图可以用于模拟木头的纹理、石头的粗糙表面或者皮肤的质感等。Three.js中的贴图通常是加载自图像文件，并且可以应用于不同类型的材质属性。
  3. 区别与联系