ThreeJs 学习笔记

最新推荐文章于 2024-07-12 16:30:00 发布

九千七 ~

最新推荐文章于 2024-07-12 16:30:00 发布

阅读量767

点赞数 29

文章标签： 3d vue.js 笔记

本文链接：https://blog.csdn.net/create_1234/article/details/136941518

版权

一、概述ThreeJs

1.ThreeJs 是什么

Three.JS是基于WebGL的Javascript开源框架，简言之，就是能够实现3D效果的JS库。

中文文档：www.webgl3d.cn

二、第一个ThreeJs

1.了解threejs的内容并快速搭建一个3D页面

创建一个html页面使用script引入threejs

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title> 创建第一个ThreeJs </title>
    <style>
        #canvas {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
    <!--使用script引入three -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
</head>

<body>
    <div id="canvas"></div>
    <script>
        // 获取div元素
        const container = document.getElementById("canvas");
        console.log(container,"0000");
    </script>
</body>

</html>

入门Three.js的第一步，就是认识场景Scene、相机Camera、渲染器Renderer三个基本概念。演示“第一个3D案例”完成实现过程。

三维场景`Scene`

你可以把三维场景Scene (opens new window)对象理解为虚拟的3D场景，用来表示模拟生活中的真实三维场景,或者说三维世界。

// 创建一个场景
const scene = new THREE.Scene();
console.log(scene, "scene");

在浏览器中打印的效果应该是

如果能成功打印代表成功引入了threejs，这些属性在文档中都可以查到

透视投影相机`PerspectiveCamera`

// 创建一个相机
const camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000);
camera.position.z = 5;
console.log(camera, "camera");

相机对象Camera具有位置属性.position，通过位置属性.position可以设置相机的位置。

透视投影相机`PerspectiveCamera`：视锥体

透视投影相机的四个参数fov, aspect, near, far构成一个四棱台3D空间，被称为视锥体，只有视锥体之内的物体，才会渲染出来，视锥体范围之外的物体不会显示在Canvas画布上。

// width和height用来设置Three.js输出的Canvas画布尺寸(像素px)
const width = 800; //宽度
const height = 500; //高度
// 30:视场角度, width / height:Canvas画布宽高比, 1:近裁截面, 3000：远裁截面
const camera = new THREE.PerspectiveCamera(30, width / height, 1, 3000);

WebGL渲染器`WebGLRenderer`

通过WebGL渲染器WebGLRenderer (opens new window)可以实例化一个WebGL渲染器对象。

// 创建一个渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(container.clientWidth, container.clientHeight);//设置three.js渲染区域的尺寸
container.appendChild(renderer.domElement); //挂载到dom上

renderer.render(scene, camera); //执行渲染操作

// 渲染场景
function render() {
     requestAnimationFrame(render); //定时器循环渲染
     cube.rotation.x += 0.01;       //位置改变营造物体旋转效果
     cube.rotation.y += 0.01;       //位置改变营造物体旋转效果
     renderer.render(scene, camera);//执行渲染
}
render();

此时浏览器中三维的正方形就可以正常渲染了

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title> 创建第一个ThreeJs </title>
    <style>
        #canvas {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
    <!--使用script引入three -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
</head>

<body>
    <div id="canvas"></div>
    <script>
        // 获取div元素
        const container = document.getElementById("canvas");

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

        // 创建一个相机
        const camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000);
        camera.position.z = 5;
        console.log(camera, "camera");

        // 创建一个渲染器
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(container.clientWidth, container.clientHeight);
        container.appendChild(renderer.domElement);

        // 创建一个立方体
        const geometry = new THREE.BoxGeometry();
        const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
        const cube = new THREE.Mesh(geometry, material);
        scene.add(cube); // 将立方体添加到场景中

        // 渲染场景
        function render() {
            requestAnimationFrame(render);
            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;
            renderer.render(scene, camera);
        }
        render();
    </script>
</body>

</html>

三、vue + ThreeJs 开发项目

直接在项目中npm i three默认最新版本也可以指定版本安装

// 比如安装162版本
npm i three@0.162.0 -S

在页面中引入

import * as THREE from 'three';
//GLTF模型加载器
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"
// 导入轨道模型控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"

直接引入three即可，后面两个引入的是three的扩展

例如我想加载 XXX.gltf 文件模型就需要使用这个模型加载器，轨道模型控制器是使用让模型可以用鼠标控制大小方向。还有很多其他扩展官网查询

创建模型相机渲染器同上

//把场景加入到轨道控制器中
new OrbitControls(this.camera, this.renderer.domElement);

在项目开发中大概率是不会使用three去创建模型，大多数情况是使用3Dmax,blender 这些建模软件把模型做好后导出一个文件后使用three展示。

这里举例导出的是gltf文件。测试时去网站上下载一个gltf文件

GLTFS模型库_数字孪生3D模型

这个网站免费下载一个，下载完直接放在public文件夹下

使用模型加载器加载并添加到场景中

如果是多个就多次加载

运行项目在浏览器中的效果

九千七 ~

关注

29
点赞
踩
13

收藏

觉得还不错? 一键收藏
1
评论
ThreeJs 学习笔记

创建第一个ThreeJs #canvas {top: 0;left: 0;
复制链接

扫一扫

ThreeJs 学习笔记

一 、概述ThreeJs

二 、第一个ThreeJs

三维场景Scene

透视投影相机PerspectiveCamera

透视投影相机PerspectiveCamera：视锥体

WebGL渲染器WebGLRenderer

三 、vue + ThreeJs 开发项目

“相关推荐”对你有帮助么？