three.js从入门到精通系列教程 - 《three.js第一个3D案例—创建3D场景》

本文链接：https://blog.youkuaiyun.com/smartsmile2012/article/details/135697308

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8" />
    <title>three.js从入门到精通系列教程 - 《three.js第一个3D案例—创建3D场景》</title>
    <script src="ThreeJS/three.js"></script>
</head>

<body>
    <div id="webgl"></div>
    <script>
        //1、创建虚拟场景  new THREE.Scene()；三维场景Scene (opens new window)对象理解为虚拟的3D场景，用来表示模拟生活中的真实三维场景,或者说三维世界（例如一个房间Scene）。
        const scene = new THREE.Scene();

        //2、创建一个长方体几何对象Geometry（例如一个椅子外形Geometry）
        const geometry = new THREE.BoxGeometry(100, 100, 100);

        //3、描述物体外观：材质Material  例如最简单的网格基础材质MeshBasicMaterial（例如椅子的材质MeshBasicMaterial）
        //物体外观：材质Material 如果你想定义物体的外观效果，比如颜色，就需要通过材质Material相关的API实现。 创建一个材质对象Material
        const material = new THREE.MeshBasicMaterial({
            color: 0xff0000,  //0xff0000设置材质颜色为红色
        });

        // 4、加载到网格模型Mesh 例如际生活中有各种各样的物体，在threejs中