WebGL基础学习—three.js

最新推荐文章于 2024-06-04 21:10:06 发布

柠檬菜菜

最新推荐文章于 2024-06-04 21:10:06 发布

阅读量673

点赞数

文章标签： three.js

本文链接：https://blog.csdn.net/weixin_46941477/article/details/113973782

版权

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"

最低0.47元/天解锁文章

柠檬菜菜

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
WebGL基础学习—three.js

1.基础概念WebGL是在浏览器中实现三维效果的一套规范three表示3D的意思，js表示JavaScript的意思。即three.js是基于原生WebGL封装运行的三维引擎。2.开发环境浏览器：Chrome、FireFox、360安全浏览器6.0js开发工具：VScode、WebStorm3.应用1、引用使用script标签，引入three.js文件2、创建场景构建一个新的场景：var scene=new THREE.Scene();3、创建相机添加一个相机固定视角：var cam
复制链接

扫一扫