WebGL基础学习—three.js

最新推荐文章于 2025-06-20 13:29:21 发布

柠檬菜菜

最新推荐文章于 2025-06-20 13:29:21 发布

阅读量807

点赞数

CC 4.0 BY-SA版权

文章标签： three.js

本文链接：https://blog.youkuaiyun.com/weixin_46941477/article/details/113973782

本文介绍了WebGL的基础概念，以及如何使用three.js这个JavaScript库在浏览器中创建三维场景。内容包括设置开发环境、引用three.js库、创建场景、相机、坐标轴、光源、渲染器、几何体以及实现旋转立方体的实例应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.基础概念

WebGL是在浏览器中实现三维效果的一套规范
three表示3D的意思，js表示JavaScript的意思。即three.js是基于原生WebGL封装运行的三维引擎。

2.开发环境

浏览器：Chrome、FireFox、360安全浏览器6.0
js开发工具：VScode、WebStorm

3.应用

1、引用
使用script标签，引入three.js文件
2、创建场景
构建一个新的场景：var scene=new THREE.Scene();
3、创建相机
添加一个相机固定视角：var camera=new THREE.PerspectiveCamera();
4、创建坐标轴
定义一个坐标轴：var axes=new THREE.AxesHelper();
5、创建光源
添加一个光源：var light=new THREE.DirectionalLight(color);
6、创建渲染器
构建渲染器：var renderer=new THREE.WebGLRenderer();
7、创建几何体
添加一个几何体：var cube=new THREE.BoxGeometry();
8、创建渲染函数
function render(){renderer.render();} render();

4.实例应用（旋转立方体）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>旋转立方体</title>
    <style>canvas {
   
    width: 100%; height: 100% }</style>
    <script src="../three.js"></script