1.1 Three.js 基础

最新推荐文章于 2024-02-02 21:31:15 发布

淋雨一直走~

最新推荐文章于 2024-02-02 21:31:15 发布

阅读量269

点赞数

分类专栏： webGL 文章标签： webgl canvas javascript html5 es6

本文链接：https://blog.csdn.net/qq_41579192/article/details/109276469

版权

webGL 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

前言

在开始之前，让我们尝试让您了解Three.js应用程序的结构。Three.js应用程序需要您创建一堆对象并将其连接在一起。这是代表一个小three.js应用程序的图
在这里插入图片描述

关于上图的注意事项,在浏览器中渲染一个three.js必不可少的几个对象Renderer，Scene，Camera

Renderer, 是一个主要对象，可以将Scene和Camera对象传给Renderer对象，它可以将场景渲染到canvas画布上。
Scene是一个树状结构的，可以包含多个对象Light,Group,Object3D,Camera
Camera在场景中起到的作用较特殊，我们在网页上看到的是Camera看到的
Mesh 是一个网格模型的对象，里面包含Geometry对象和Material对象
Geometry 是Mesh的网格模型的具体的外观的对象，例如正方形，原型，长方形等。
Material 是Mesh的材质对象，可以给Mesh添加材质颜色，贴图等。
Texture 是Material 的特图文件可以为Material加载贴图
Light 是灯光，例如环境光，点光源，聚光灯等。

案例地址

代码案例地址

全部代码

现在我们来写一个Hello three.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--第二步创建一个canvas标签-->
<canvas id="canvas"></canvas>
</body>
<script type="module"> // 这里type的属性为module
// 第一步导入three.js
import * as THREE from '../../../three.js-r115/build/three.module.js'; // 导入three.js

(function main() {
    // 第三步创建一个加载器
    let canvas = document.getElementById('canvas');
    let renderer = new THREE.WebGLRenderer({canvas});

    // 第四步创建一个相机
    let fov = 75, aspect = 2, near = 0.1, far = 5;
    let camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
    camera.position.z = 2
    // 第五步创建一个场景
    let scene = new THREE.Scene();

    // 添加一个光源
    let light = new THREE.DirectionalLight(0xFFFFFF, 1);
    light.position.set(-1, 2, 4);
    scene.add(light);

    // 创建一个模型
    let width = 1, height = 1, depth = 1;
    let geometry = new THREE.BoxGeometry(width, height, depth);

    // let material = new THREE.MeshBasicMaterial({color: 0xFF0000}); // 不受光照影响的材质
    // let material = new THREE.MeshLambertMaterial({color: 0xFF0000}); // 受光照影响的材质---不加光看不见
    let material = new THREE.MeshPhongMaterial({color: 0xFF0000}); // 受光照影响的材质---不加光看不见

    let mesh = new THREE.Mesh(geometry, material);
    mesh.position.setX(0)
    let mesh2 = new THREE.Mesh(geometry, material); // 引用相同的geometry, material
    mesh2.position.setX(-2)
    let mesh3 = new THREE.Mesh(geometry, material); // 引用相同的geometry, material
    mesh3.position.setX(2)

    // 将模型添加到场景中
    scene.add(mesh)
    scene.add(mesh2)
    scene.add(mesh3)

    // 最后一步渲染
    function render() {
        // 让场景动起来
        mesh.rotateY(0.01)
        mesh.rotateZ(0.01)
        mesh2.rotateY(0.02)
        mesh2.rotateZ(0.02)
        mesh3.rotateY(0.03)
        mesh3.rotateZ(0.03)
        requestAnimationFrame(render) // 自动循环调用render不要自己写定时器调用
        renderer.render(scene, camera)
    }

    render()
})()
</script>
</html>