THREE.js

木一叶liuyue

已于 2022-11-06 22:38:53 修改

阅读量7k

点赞数 2

分类专栏： webGL 文章标签： javascript 前端前端框架

于 2022-10-23 12:03:38 首次发布

本文链接：https://blog.csdn.net/Kerryliuyue/article/details/127472913

版权

webGL 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

电子书网站http://www.webgl3d.cn链接

特定版本three.js下载

github链接：https://github.com/mrdoob/three.js

github链接查看所有版本：https://github.com/mrdoob/three.js/releases

选择你需要的版本three.js文件包下载，然后解压即可。

如果你gihtub下载网速比较慢，你可以去three.js中文网提供网盘资源下载。

下载three.js文件包解压后，你可以看到如下目录，不同版本会略有差异。

three.js-rXXX
└───build——src目录下各个代码模块打包后的结果
    │───three.js——开发的时候.html文件中要引入的threejs引擎库，和引入jquery一样，可以辅助浏览器调试
    │───three.min.js——three.js压缩后的结构文件体积更小，可以部署项目的时候在.html中引入。
    │───three.module.js—— 可以import方式引入
    │
└───docs——Three.js API文档文件
    │───index.html——打开该文件可以实现离线查看threejs API文档
    │
└───editor——Three.js的可视化编辑器，可以编辑3D场景
    │───index.html——打开应用程序
    │
└───docs——Three.js API文档文件
    │───index.html——打开该文件可以实现离线查看threejs API文档
    │
└───examples——里面有大量的threejs案例，平时可以通过代码编辑全局查找某个API、方法或属性来定位到一个案例
    │
└───src——Three.js引擎的各个模块，可以通过阅读源码深度理解threejs引擎
    │───index.html——打开该文件可以实现离线查看threejs API文档
    │
└───utils——一些辅助工具
    │───\utils\exporters\blender——blender导出threejs文件的插件

.html文件中引入three.js库

使用three.js的第一步首先就是先把three.js引入到你的项目文件中。

script标签方式引入three.js
你可以像平时开发web前端项目一样，把three.js当做一个js库引入你的项目。

<script src="../../three.js-r139/build/three.js"></script>

<script type="importmap">
    {
        "imports":{
            "three":"../node_modules/three/build/three.module.js"
        }
    }
</script>

//随便输入一个API，测试下是否已经正常引入three.js
console.log(THREE.Scene);

ES6 import方式引入

给script标签设置type="module",也可以在.html文件中使用import方式引入three.js。

如果你没有前端ES6基础，可以自行补充学习。

<script type="module">
// 现在浏览器支持ES6语法，自然包括import方式引入js文件
import * as THREE from '../../three.js-r139/build/three.module.js';
</script>

three.js工程化开发

平时学习，为了方便可以直接在.html文件中引入three.js相关文件，不过在正式开发的时候，你可以在你的nodejs工程文件中，通过npm命令行安装three.js。npm安装特定版本three.js

// 139版本
npm install three@0.139.0 --save

// 122版本
npm install three@0.122.0 --save

// 引入three.js
import * as THREE from 'three';
// 和在.html文件中一样使用threejs类
var geo = new THREE.PlaneGeometry(105,209);

// 扩展库引入和使用
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
const controls = new OrbitControls(camera, renderer.domElement);

OrbitControls使用

旋转：拖动鼠标左键
缩放：滚动鼠标中键
平移：拖动鼠标右键

OrbitControls本质上就是改变相机的参数，比如相机的位置属性，相机的位置改变，可以改变透视投影相机距离模型的远近，大家都知道透视投影的渲染规律就是远小近大，这样渲染大小就不一样。改变相机位置也可以改变相机拍照场景中模型的角度，实现模型的360度旋转预览效果。
注意相机控件OrbitControls会影响lookAt设置，注意手动设置OrbitControls的目标参数

threejs三维坐标系

three.js描述物体的位置和尺寸，都是以三维直角坐标系为准的。

辅助观察坐标系

根据渲染场景尺寸范围大小，设置坐标系尺寸。

// AxesHelper：辅助观察的坐标系
const axesHelper = new THREE.AxesHelper(150);
scene.add(axesHelper);

设置材质半透明方便观察坐标系

var material = new THREE.MeshLambertMaterial({
    color: 0x0000ff, //设置材质颜色
    transparent:true,//开启透明
    opacity:0.5,//设置透明度
});

three.js坐标轴颜色R、G、B分别对应坐标系的x、y、z轴，对于three.js的3D坐标系默认y轴朝上。

设置模型在坐标系中的位置

通过模型的位置、姿态和尺寸设置，加深3D坐标系的概念。

1.位置

// 设置模型mesh的xyz坐标
mesh.position.set(100,0,0);

2.姿态

// 设置模型mesh的绕y轴旋转45度
mesh.rotateY(Math.PI/4);

1.不同方向尺寸

// 设置几何体长宽高，也就是x、y、z三个方向的尺寸
//对比三个参数分别对应xyz轴哪个方向
new THREE.BoxGeometry(100, 60, 20)

点光源辅助观察

// 光源辅助观察
const pointLightHelper = new THREE.PointLightHelper(pointLight, 10);
scene.add(pointLightHelper);

动画说白了就是一张张照片，连起来依次展示，这样就形成一个动画效果，只要帧率高，人的眼睛就感觉不到卡顿，是连续的视频效果。
设置了渲染循环,相机控件OrbitControls就不用再通过事件change执行renderer.render(scene, camera);，毕竟渲染循环一直在执行renderer.render(scene, camera);。

最基本运行的代码（import引入版本）

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

<head>
    <meta charset="UTF-8">
    <title>Three.js中文网：http://www.webgl3d.cn/</title>
</head>

<body>
    <!-- 如果你使用的three.js版本import引入的时候报错Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../". -->
    <!-- 可以通过设置type="importmap"解决引入报错 -->
    <script type="importmap">
        {
			"imports": {
				"three": "../../../R139版本/three.js-r139/build/three.module.js"
			}
		}
	</script>
    <script type="module">
        import * as THREE from 'three'
        import { OrbitControls } from '../../../R139版本/three.js-r139/examples/jsm/controls/OrbitControls.js'
        /**
         * 创建3D场景对象Scene
         */
        var scene = new THREE.Scene();
        /**
         * 创建网格模型
         */
        //创建一个长方体几何对象Geometry
        var geometry = new THREE.BoxGeometry(100, 100, 100);
        // var geometry = new THREE.BoxGeometry(100, 60, 20);//对比三个参数分别对应xyz轴哪个方向
        //材质对象Material
        var material = new THREE.MeshLambertMaterial({
            color: 0x00ffff, //设置材质颜色
            transparent: true,//开启透明
            opacity: 0.5,//设置透明度
        });
        var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
        scene.add(mesh); //网格模型添加到场景中
        // 设置模型mesh的xyz坐标
        // mesh.position.set(100, 0, 0);
        // 设置模型mesh的绕y轴旋转45度
        // mesh.rotateY(Math.PI / 4);

        /**
         * 光源设置
         */
        //点光源
        var pointLight = new THREE.PointLight(0xffffff, 1.0);
        pointLight.position.set(0, 200, 300); //点光源位置
        scene.add(pointLight); //点光源添加到场景中
        //环境光
        var ambient = new THREE.AmbientLight(0xffffff, 0.4);
        scene.add(ambient);

        // AxesHelper：辅助观察的坐标系
        const axesHelper = new THREE.AxesHelper(150);
        scene.add(axesHelper);

        // 光源辅助观察(可视化点光源)
        const pointLightHelper = new THREE.PointLightHelper(pointLight, 10);
        scene.add(pointLightHelper);

        // width和height用来设置Three.js输出的Canvas画布尺寸(像素px)
        var width = 800; //宽度
        var height = 500; //高度
        /**
         * 透视投影相机设置
         */
        // 30:视场角度, width / height:Canvas画布宽高比, 1:近裁截面, 3000：远裁截面
        var camera = new THREE.PerspectiveCamera(30, width / height, 1, 3000);
        camera.position.set(292, 223, 185); //相机在Three.js三维坐标系中的位置
        camera.lookAt(0, 0, 0); //相机观察目标指向Three.js坐标系原点
        /**
         * 创建渲染器对象
         */
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(width, height); //设置three.js渲染区域的尺寸(像素px)
        renderer.render(scene, camera); //执行渲染操作
        //three.js执行渲染命令会输出一个canvas画布，也就是一个HTML元素，你可以插入到web页面中
        document.body.appendChild(renderer.domElement);

        // 设置相机控件轨道控制器OrbitControls
        const controls = new OrbitControls(camera, renderer.domElement);
        controls.addEventListener('change', function () {
            renderer.render(scene, camera); //执行渲染操作
        });//监听鼠标、键盘事件
    </script>
</body>

</html>

script 引入版本

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

<head>
    <meta charset="UTF-8">
    <title>Three.js中文网：http://www.webgl3d.cn/</title>
    <script src="../../../R139版本/three.js-r139/build/three.js"></script>
    <script src="../../../R139版本/three.js-r139/examples/js/controls/OrbitControls.js"></script>
</head>

<body>
    <script>
        /**
         * 创建3D场景对象Scene
         */
        var scene = new THREE.Scene();
        /**
         * 创建网格模型
         */
        //创建一个长方体几何对象Geometry
        var geometry = new THREE.BoxGeometry(100, 100, 100);
        //材质对象Material
        var material = new THREE.MeshLambertMaterial({
            color: 0x0000ff, //设置材质颜色
        });
        var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
        scene.add(mesh); //网格模型添加到场景中

        /**
         * 光源设置
         */
        //点光源
        var pointLight = new THREE.PointLight(0xffffff,1.0);
        pointLight.position.set(400, 200, 300); //点光源位置
        scene.add(pointLight); //点光源添加到场景中
        //环境光
        var ambient = new THREE.AmbientLight(0xffffff,0.4);
        scene.add(ambient);

        // width和height用来设置Three.js输出的Canvas画布尺寸(像素px)
        var width = 800; //宽度
        var height = 500; //高度
        /**
         * 透视投影相机设置
         */
        // 30:视场角度, width / height:Canvas画布宽高比, 1:近裁截面, 3000：远裁截面
        var camera = new THREE.PerspectiveCamera(30, width / height, 1, 3000);
        camera.position.set(292, 223, 185); //相机在Three.js三维坐标系中的位置
        camera.lookAt(0, 0, 0); //相机观察目标指向Three.js坐标系原点
        /**
         * 创建渲染器对象
         */
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(width, height); //设置three.js渲染区域的尺寸(像素px)
        renderer.render(scene, camera); //执行渲染操作
        //three.js执行渲染命令会输出一个canvas画布，也就是一个HTML元素，你可以插入到web页面中
        document.body.appendChild(renderer.domElement);

        // 设置相机控件轨道控制器OrbitControls
        const controls = new THREE.OrbitControls(camera,renderer.domElement);
        controls.addEventListener('change', function(){
            renderer.render(scene, camera); //执行渲染操作
        });//监听鼠标、键盘事件
    
    </script>
</body>

</html>

循环排列最终版本

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

<head>
    <meta charset="UTF-8">
    <title>Three.js中文网：http://www.webgl3d.cn/</title>
    <style>
        body {
            overflow: hidden;
            /* 不用滚动条 */
            margin: 0px;
            /* 外边距都设置为0px */
        }
    </style>
</head>

<body>
    <!-- 如果你使用的three.js版本import引入的时候报错Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../". -->
    <!-- 可以通过设置type="importmap"解决引入报错 -->
    <script type="importmap">
        {
			"imports": {
				"three": "../../../R139版本/three.js-r139/build/three.module.js"
			}
		}
	</script>
    <script type="module">
        import * as THREE from 'three'
        import { OrbitControls } from '../../../R139版本/three.js-r139/examples/jsm/controls/OrbitControls.js'
       
        /**
         * 创建3D场景对象Scene
         */
        var scene = new THREE.Scene();
        /**
         * 创建网格模型
         */
        //创建一个长方体几何对象Geometry
        var geometry = new THREE.BoxGeometry(100, 100, 100);
        //材质对象Material
        var material = new THREE.MeshLambertMaterial({
            color: 0x00ffff, //设置材质颜色
            transparent: true,//开启透明
            opacity: 0.5,//设置透明度
        });
        for (let i = 0; i < 10; i++) {
            for (let j = 0; j < 10; j++) {
                var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
                // 在XOZ平面上分布
                mesh.position.set(i * 200, 0, j * 200);
                scene.add(mesh); //网格模型添加到场景中
            }

        }

        /**
         * 光源设置
         */
        //点光源
        var pointLight = new THREE.PointLight(0xffffff, 1.0);
        pointLight.position.set(400, 200, 300); //点光源位置
        scene.add(pointLight); //点光源添加到场景中
        //环境光
        var ambient = new THREE.AmbientLight(0xffffff, 0.4);
        scene.add(ambient);

        // AxesHelper：辅助观察的坐标系
        const axesHelper = new THREE.AxesHelper(150);
        scene.add(axesHelper);


        // width和height用来设置Three.js输出的Canvas画布尺寸(像素px)
        var width = window.innerWidth; //窗口文档显示区的宽度作为画布宽度
        var height = window.innerHeight; //窗口文档显示区的高度作为画布高度
        /**
         * 透视投影相机设置
         */
        // 30:视场角度, width / height:Canvas画布宽高比, 1:近裁截面, 3000：远裁截面
        //8000是远裁截面距离相机的距离，所以当相机足够远的话，物体就会在截面的后面，就会出现部分物体不显示
        var camera = new THREE.PerspectiveCamera(30, width / height, 1, 8000);
        camera.position.set(292, 223, 185); //相机在Three.js三维坐标系中的位置
        // 1. 相机位置拉远，可以看到更大的观察范围
        camera.position.set(800, 800, 800);
        // 2. 超出视锥体远裁界面的范围的会被剪裁掉，不渲染  可以调整far参数适配
        camera.position.set(2000, 2000, 2000);
        camera.lookAt(0, 0, 0); //相机观察目标指向Three.js坐标系原点
        // 3. 改变相机观察目标点
        camera.lookAt(1000, 0, 1000);
        // 4. 一个物体：体验透视投影相机远小近大的投影规律
        // 5. 视野角度fov越大，观察范围越大
        /**
         * 创建渲染器对象
         */
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(width, height); //设置three.js渲染区域的尺寸(像素px)
        //three.js执行渲染命令会输出一个canvas画布，也就是一个HTML元素，你可以插入到web页面中
        document.body.appendChild(renderer.domElement);
        // 渲染循环
        function render() {
            renderer.render(scene, camera); //执行渲染操作
            requestAnimationFrame(render);//请求再次执行渲染函数render，渲染下一帧
        }
        render();

        // 设置相机控件轨道控制器OrbitControls
        const controls = new OrbitControls(camera, renderer.domElement);
        // 相机控件.target属性在OrbitControls.js内部表示相机目标观察点，默认0,0,0
      
        console.log('controls.target', controls.target);
        controls.target.set(1000, 0, 1000);
        controls.update();//update()函数内会执行camera.lookAt(controls.targe)
    </script>
</body>

</html>

项目

新建一个项目

新建一个文件夹，
npm init (一直回车就行)
npm install parcel -bundler -dev
npm install three --save
npm run dev
在这里插入图片描述

<script type="importmap">
    {
        "imports":{
            "three":"../node_modules/three/build/three.module.js"
        }
    }
</script>

或者第二种办法新建一个项目

1.新建一个文件夹，在终端里面，npm install three,然后npm install (这个可写也可以不写吧)，然后新建一个main文件夹和index.html，main里面建立一个main.js,index.html中这样写
在这里插入图片描述

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./assets/css/style.css" />
</head>
<!-- <script type="importmap">
    {
        "imports": {
            "three": "../node_modules/three/build/three.module.js"
        }
    }

</script> -->

<script type="importmap">
    {
        "imports":{
            "three":"../node_modules/three/build/three.module.js"
        }
    }
</script>
<body>

    <script src="./main/main.js" type="module"></script>

</body>
</html>

main.js最初能运行的版本

import * as THREE from "three";
// 导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

// console.log(THREE);

// 目标：使用控制器查看3d物体

// 1、创建场景
const scene = new THREE.Scene();

// 2、创建相机
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

// 设置相机位置
camera.position.set(0, 0, 10);
scene.add(camera);

// 添加物体
// 创建几何体
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 });
// 根据几何体和材质创建物体
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
// 将几何体添加到场景中
scene.add(cube);


// 添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);


// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight);
// console.log(renderer);
// 将webgl渲染的canvas内容添加到body
document.body.appendChild(renderer.domElement);

// // 使用渲染器，通过相机将场景渲染进来
// renderer.render(scene, camera);

// 创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);



function render() {
  renderer.render(scene, camera);
  //   渲染下一帧的时候就会调用render函数
  requestAnimationFrame(render);
}

render();

main01.js 控制3d物体移动

import * as THREE from "three";
// 导入轨道控制器（来回转+围着某个轴转动）
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

// console.log(THREE);

// 目标：控制3d物体移动

// 1、创建场景
const scene = new THREE.Scene();

// 2、创建相机
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

// 设置相机位置
camera.position.set(0, 0, 10);
scene.add(camera);

// 添加物体
// 创建几何体
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 });
// 根据几何体和材质创建物体
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

// 修改物体的位置
// cube.position.set(5, 0, 0);
cube.position.x = 3;

// 缩放
// cube.scale.set(3, 2, 1);
// cube.scale.x = 5;
// 旋转
cube.rotation.set(Math.PI / 4, 0, 0, "XZY");

// 将几何体添加到场景中
scene.add(cube);

console.log(cube);

// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight);
// console.log(renderer);
// 将webgl渲染的canvas内容添加到body
document.body.appendChild(renderer.domElement);

// // 使用渲染器，通过相机将场景渲染进来
// renderer.render(scene, camera);

// 创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);

// 添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);
// var angle = 0
function render() {
  cube.position.x += 0.01;
  if (cube.position.x > 5) {
    cube.position.x = 0;
  }

   //围着某个轴转动
//    angle += 0.03
//    var x = 4 * Math.sin(angle) + 2
//    var z = 4 * Math.cos(angle)

//    cube.position.set(x, 0, z)

  renderer.render(scene, camera);
  //   渲染下一帧的时候就会调用render函数
  requestAnimationFrame(render);
}

render();

main02.js

import * as THREE from "three";
// 导入轨道控制器（来回转+围着某个轴转动）
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

// console.log(THREE);

// 目标：控制3d物体移动

// 1、创建场景
const scene = new THREE.Scene();

// 2、创建相机
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

// 设置相机位置
camera.position.set(0, 0, 10);
scene.add(camera);

// 添加物体
// 创建几何体
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 });
// 根据几何体和材质创建物体
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

// 修改物体的位置
// cube.position.set(5, 0, 0);
cube.position.x = 3;

// 缩放
// cube.scale.set(3, 2, 1);
// cube.scale.x = 5;
// 旋转
cube.rotation.set(Math.PI / 4, 0, 0, "XZY");

// 将几何体添加到场景中
scene.add(cube);

console.log(cube);

// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight);
// console.log(renderer);
// 将webgl渲染的canvas内容添加到body
document.body.appendChild(renderer.domElement);

// // 使用渲染器，通过相机将场景渲染进来
// renderer.render(scene, camera);

// 创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);

// 添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);
// var angle = 0
function render() {
  cube.position.x += 0.01;
  if (cube.position.x > 5) {
    cube.position.x = 0;
  }

  //绕着轴转动
//  cube.rotation.x += 0.01;

   //围着某个轴转动
//    angle += 0.03
//    var x = 4 * Math.sin(angle) + 2
//    var z = 4 * Math.cos(angle)

//    cube.position.set(x, 0, z)

  renderer.render(scene, camera);
  //   渲染下一帧的时候就会调用render函数
  requestAnimationFrame(render);
}

render();

动画

import * as THREE from "three";
// 导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
// 导入动画库
import gsap from "gsap";

// console.log("111");

// 目标：监听页面尺寸变化，修改渲染画面

// 1、创建场景
const scene = new THREE.Scene();

// 2、创建相机
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

// 设置相机位置
camera.position.set(0, 0, 10);
scene.add(camera);

// 添加物体
// 创建几何体
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 });
// 根据几何体和材质创建物体
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

// 修改物体的位置
// cube.position.set(5, 0, 0);
// cube.position.x = 3;
// 缩放
cube.scale.set(3, 2, 1);
// cube.scale.x = 5;
// 旋转
cube.rotation.set(Math.PI / 4, 0, 0, "XZY");

// 将几何体添加到场景中
scene.add(cube);

console.log(cube);
console.log("111");

// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight);
// console.log(renderer);
// 将webgl渲染的canvas内容添加到body
document.body.appendChild(renderer.domElement);

// // 使用渲染器，通过相机将场景渲染进来
// renderer.render(scene, camera);

// 创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);
// 设置控制器阻尼，让控制器更有真实效果,必须在动画循环里调用.  ()。
controls.enableDamping = true;

// 添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);
// 设置时钟
// const clock = new THREE.Clock();

// 设置动画
var animate1 = gsap.to(cube.position, {
  x: 5,
  duration: 5,
  ease: "power1.inOut",
  //   设置重复的次数，无限次循环-1
  repeat: -1,
  //   往返运动
  yoyo: true,
  //   delay，延迟2秒运动
  delay: 2,
  onComplete: () => {
    console.log("动画完成");
  },
  onStart: () => {
    console.log("动画开始");
  },
});
gsap.to(cube.rotation, { x: 2 * Math.PI, duration: 5, ease: "power1.inOut" });

window.addEventListener("dblclick", () => {
  //   console.log(animate1);
  if (animate1.isActive()) {
    //   暂停
    animate1.pause();
  } else {
    //   恢复
    animate1.resume();
  }
});

function render() {
  controls.update();
  renderer.render(scene, camera);
  //   渲染下一帧的时候就会调用render函数
  requestAnimationFrame(render);
}

render();

// 监听画面变化，更新渲染画面
window.addEventListener("resize", () => {
  //   console.log("画面变化了");
  // 更新摄像头
  camera.aspect = window.innerWidth / window.innerHeight;
  //   更新摄像机的投影矩阵
  camera.updateProjectionMatrix();

  //   更新渲染器
  renderer.setSize(window.innerWidth, window.innerHeight);
  //   设置渲染器的像素比
  renderer.setPixelRatio(window.devicePixelRatio);
});

是否双击进入屏幕


window.addEventListener('dblclick',()=>{
    if(animate1.isActive()){
        console.log("111");
        animate1.pause()
    }else{
        console.log("1222");
        animate1.resume();
    }

})

// window.addEventListener("dblclick", () => {
//     const fullScreenElement = document.fullscreenElement;
//     if (!fullScreenElement) {
//       //   双击控制屏幕进入全屏，退出全屏
//       // 让画布对象全屏
//       renderer.domElement.requestFullscreen();
//     } else {
//       //   退出全屏，使用document对象
//       document.exitFullscreen();
//     }
//     //   console.log(fullScreenElement);
//   });

main.js1

import * as THREE from "three";
// 导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
// 导入动画库
import gsap from "gsap";
// 导入dat.gui
import * as dat from "dat.gui";

// 目标：BufferGeometry

// 1、创建场景
const scene = new THREE.Scene();

// 2、创建相机
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

// 设置相机位置
camera.position.set(0, 0, 10);
scene.add(camera);

// 添加物体
// 创建几何体
const geometry = new THREE.BufferGeometry();
const vertices = new Float32Array([
  -1.0, -1.0, 1.0, 1.0, -1.0, 1.0,   1.0, 1.0, 1.0, 1.0, 1.0, 1.0, -1.0, 1.0, 1.0,
  -1.0, -1.0, 1.0,
]);

geometry.setAttribute("position", new THREE.BufferAttribute(vertices, 3));

const material = new THREE.MeshBasicMaterial({ color: 0xffff00 });
// 根据几何体和材质创建物体
const mesh = new THREE.Mesh(geometry, material);
console.log(mesh);
scene.add(mesh);

// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight);
// console.log(renderer);
// 将webgl渲染的canvas内容添加到body
document.body.appendChild(renderer.domElement);

// // 使用渲染器，通过相机将场景渲染进来
// renderer.render(scene, camera);

// 创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);
// 设置控制器阻尼，让控制器更有真实效果,必须在动画循环里调用.update()。
controls.enableDamping = true;

// 添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);
// 设置时钟
const clock = new THREE.Clock();

function render() {
  controls.update();
  renderer.render(scene, camera);
  //   渲染下一帧的时候就会调用render函数
  requestAnimationFrame(render);
}

render();

// 监听画面变化，更新渲染画面
window.addEventListener("resize", () => {
  //   console.log("画面变化了");
  // 更新摄像头
  camera.aspect = window.innerWidth / window.innerHeight;
  //   更新摄像机的投影矩阵
  camera.updateProjectionMatrix();

  //   更新渲染器
  renderer.setSize(window.innerWidth, window.innerHeight);
  //   设置渲染器的像素比
  renderer.setPixelRatio(window.devicePixelRatio);
});

main03.js

import * as THREE from "three";
// 导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
// 导入动画库
import gsap from "gsap";
// 导入dat.gui
import * as dat from "dat.gui";

// 目标：打造酷炫的三角形

// 1、创建场景
const scene = new THREE.Scene();

// 2、创建相机
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

// 设置相机位置
camera.position.set(0, 0, 10);
scene.add(camera);

// 添加物体
// 创建几何体
for (let i = 0; i < 50; i++) {
  // 每一个三角形，需要3个顶点，每个顶点需要3个值
  const geometry = new THREE.BufferGeometry();
  const positionArray = new Float32Array(9);
  for (let j = 0; j < 9; j++) {
    positionArray[j] = Math.random() * 10 - 5;
  }
  geometry.setAttribute(
    "position",
    new THREE.BufferAttribute(positionArray, 3)
  );
  let color = new THREE.Color(Math.random(), Math.random(), Math.random());
  const material = new THREE.MeshBasicMaterial({
    color: color,
    transparent: true,
    opacity: 0.5,
  });
  // 根据几何体和材质创建物体
  const mesh = new THREE.Mesh(geometry, material);
  console.log(mesh);
  scene.add(mesh);
}

// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight);
// console.log(renderer);
// 将webgl渲染的canvas内容添加到body
document.body.appendChild(renderer.domElement);

// // 使用渲染器，通过相机将场景渲染进来
// renderer.render(scene, camera);

// 创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);
// 设置控制器阻尼，让控制器更有真实效果,必须在动画循环里调用.update()。
controls.enableDamping = true;

// 添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);
// 设置时钟
const clock = new THREE.Clock();

function render() {
  controls.update();
  renderer.render(scene, camera);
  //   渲染下一帧的时候就会调用render函数
  requestAnimationFrame(render);
}

render();

// 监听画面变化，更新渲染画面
window.addEventListener("resize", () => {
  //   console.log("画面变化了");
  // 更新摄像头
  camera.aspect = window.innerWidth / window.innerHeight;
  //   更新摄像机的投影矩阵
  camera.updateProjectionMatrix();

  //   更新渲染器
  renderer.setSize(window.innerWidth, window.innerHeight);
  //   设置渲染器的像素比
  renderer.setPixelRatio(window.devicePixelRatio);
});

main03.js

import * as THREE from "three";
// 导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
// 导入动画库
import gsap from "gsap";
// 导入dat.gui
import * as dat from "dat.gui";

// 目标：基础材质与纹理

// 1、创建场景
const scene = new THREE.Scene();

// 2、创建相机
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

// 设置相机位置
camera.position.set(0, 0, 10);
scene.add(camera);

// 导入纹理
const textureLoader = new THREE.TextureLoader();
//因为打包之后的index.html和textures文件夹是在同一个目录下面
const doorColorTexture = textureLoader.load("./textures/door/color.jpg");

// console.log(doorColorTexture);
// 

// 添加物体
const cubeGeometry = new THREE.BoxBufferGeometry(1, 1, 1);
// 材质
const basicMaterial = new THREE.MeshBasicMaterial({
  color: "#ffff00",
  map: doorColorTexture,
});
const cube = new THREE.Mesh(cubeGeometry, basicMaterial);
scene.add(cube);

// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight);
// console.log(renderer);
// 将webgl渲染的canvas内容添加到body
document.body.appendChild(renderer.domElement);

// // 使用渲染器，通过相机将场景渲染进来
// renderer.render(scene, camera);

// 创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);
// 设置控制器阻尼，让控制器更有真实效果,必须在动画循环里调用.update()。
controls.enableDamping = true;

// 添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);
// 设置时钟
const clock = new THREE.Clock();

function render() {
  controls.update();
  renderer.render(scene, camera);
  //   渲染下一帧的时候就会调用render函数
  requestAnimationFrame(render);
}

render();

// 监听画面变化，更新渲染画面
window.addEventListener("resize", () => {
  //   console.log("画面变化了");
  // 更新摄像头
  camera.aspect = window.innerWidth / window.innerHeight;
  //   更新摄像机的投影矩阵
  camera.updateProjectionMatrix();

  //   更新渲染器
  renderer.setSize(window.innerWidth, window.innerHeight);
  //   设置渲染器的像素比
  renderer.setPixelRatio(window.devicePixelRatio);
});

纹理常用属性

import * as THREE from "three";
// 导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
// 导入动画库
import gsap from "gsap";
// 导入dat.gui
import * as dat from "dat.gui";

// 目标：纹理常用属性

// 1、创建场景
const scene = new THREE.Scene();

// 2、创建相机
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

// 设置相机位置
camera.position.set(0, 0, 10);
scene.add(camera);

// 导入纹理
const textureLoader = new THREE.TextureLoader();
const doorColorTexture = textureLoader.load("./textures/door/color.jpg");

const texture = textureLoader.load("./textures/minecraft.png");

// console.log(doorColorTexture);
// 设置纹理偏移
// doorColorTexture.offset.x = 0.5;
// doorColorTexture.offset.y = 0.5;
// doorColorTexture.offset.set(0.5, 0.5);
// 纹理旋转
// 设置旋转的原点
// doorColorTexture.center.set(0.5, 0.5);
// // 旋转45deg
// doorColorTexture.rotation = Math.PI / 4;
// 设置纹理的重复
// doorColorTexture.repeat.set(2, 3);
// // 设置纹理重复的模式
// doorColorTexture.wrapS = THREE.MirroredRepeatWrapping;
// doorColorTexture.wrapT = THREE.RepeatWrapping;


// 

// 添加物体
const cubeGeometry = new THREE.BoxBufferGeometry(1, 1, 1);
// 材质
const basicMaterial = new THREE.MeshBasicMaterial({
  color: "#ffff00",
  //   map: doorColorTexture,
  map: texture,
});
const cube = new THREE.Mesh(cubeGeometry, basicMaterial);
scene.add(cube);

// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight);
// console.log(renderer);
// 将webgl渲染的canvas内容添加到body
document.body.appendChild(renderer.domElement);

// // 使用渲染器，通过相机将场景渲染进来
// renderer.render(scene, camera);

// 创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);
// 设置控制器阻尼，让控制器更有真实效果,必须在动画循环里调用.update()。
controls.enableDamping = true;

// 添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);
// 设置时钟
const clock = new THREE.Clock();

function render() {
  controls.update();
  renderer.render(scene, camera);
  //   渲染下一帧的时候就会调用render函数
  requestAnimationFrame(render);
}

render();

// 监听画面变化，更新渲染画面
window.addEventListener("resize", () => {
  //   console.log("画面变化了");
  // 更新摄像头
  camera.aspect = window.innerWidth / window.innerHeight;
  //   更新摄像机的投影矩阵
  camera.updateProjectionMatrix();

  //   更新渲染器
  renderer.setSize(window.innerWidth, window.innerHeight);
  //   设置渲染器的像素比
  renderer.setPixelRatio(window.devicePixelRatio);
});

纹理显示的算法

import * as THREE from "three";
// 导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
// 导入动画库
import gsap from "gsap";
// 导入dat.gui
import * as dat from "dat.gui";

// 目标：纹理显示的算法

// 1、创建场景
const scene = new THREE.Scene();

// 2、创建相机
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

// 设置相机位置
camera.position.set(0, 0, 10);
scene.add(camera);

// 导入纹理
const textureLoader = new THREE.TextureLoader();
const doorColorTexture = textureLoader.load("./textures/door/color.jpg");

const texture = textureLoader.load("./textures/minecraft.png");

// console.log(doorColorTexture);
// 设置纹理偏移
// doorColorTexture.offset.x = 0.5;
// doorColorTexture.offset.y = 0.5;
// doorColorTexture.offset.set(0.5, 0.5);
// 纹理旋转
// 设置旋转的原点
// doorColorTexture.center.set(0.5, 0.5);
// // 旋转45deg
// doorColorTexture.rotation = Math.PI / 4;
// 设置纹理的重复
// doorColorTexture.repeat.set(2, 3);
// // 设置纹理重复的模式
// doorColorTexture.wrapS = THREE.MirroredRepeatWrapping;
// doorColorTexture.wrapT = THREE.RepeatWrapping;

// texture纹理显示设置
// texture.minFilter = THREE.NearestFilter;
// texture.magFilter = THREE.NearestFilter;
texture.minFilter = THREE.LinearFilter;
texture.magFilter = THREE.LinearFilter;

// 添加物体
const cubeGeometry = new THREE.BoxBufferGeometry(1, 1, 1);
// 材质
const basicMaterial = new THREE.MeshBasicMaterial({
  color: "#ffff00",
  //   map: doorColorTexture,
  map: texture,
});
const cube = new THREE.Mesh(cubeGeometry, basicMaterial);
scene.add(cube);

// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight);
// console.log(renderer);
// 将webgl渲染的canvas内容添加到body
document.body.appendChild(renderer.domElement);

// // 使用渲染器，通过相机将场景渲染进来
// renderer.render(scene, camera);

// 创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);
// 设置控制器阻尼，让控制器更有真实效果,必须在动画循环里调用.update()。
controls.enableDamping = true;

// 添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);
// 设置时钟
const clock = new THREE.Clock();

function render() {
  controls.update();
  renderer.render(scene, camera);
  //   渲染下一帧的时候就会调用render函数
  requestAnimationFrame(render);
}

render();

// 监听画面变化，更新渲染画面
window.addEventListener("resize", () => {
  //   console.log("画面变化了");
  // 更新摄像头
  camera.aspect = window.innerWidth / window.innerHeight;
  //   更新摄像机的投影矩阵
  camera.updateProjectionMatrix();

  //   更新渲染器
  renderer.setSize(window.innerWidth, window.innerHeight);
  //   设置渲染器的像素比
  renderer.setPixelRatio(window.devicePixelRatio);
});

纹理显示的算法

import * as THREE from "three";
// 导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
// 导入动画库
import gsap from "gsap";
// 导入dat.gui
import * as dat from "dat.gui";

// 目标：纹理显示的算法

// 1、创建场景
const scene = new THREE.Scene();

// 2、创建相机
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

// 设置相机位置
camera.position.set(0, 0, 10);
scene.add(camera);

// 导入纹理
const textureLoader = new THREE.TextureLoader();
const doorColorTexture = textureLoader.load("./textures/door/color.jpg");

const texture = textureLoader.load("./textures/minecraft.png");

// console.log(doorColorTexture);
// 设置纹理偏移
// doorColorTexture.offset.x = 0.5;
// doorColorTexture.offset.y = 0.5;
// doorColorTexture.offset.set(0.5, 0.5);
// 纹理旋转
// 设置旋转的原点
// doorColorTexture.center.set(0.5, 0.5);
// // 旋转45deg
// doorColorTexture.rotation = Math.PI / 4;
// 设置纹理的重复
// doorColorTexture.repeat.set(2, 3);
// // 设置纹理重复的模式
// doorColorTexture.wrapS = THREE.MirroredRepeatWrapping;
// doorColorTexture.wrapT = THREE.RepeatWrapping;

// texture纹理显示设置
// texture.minFilter = THREE.NearestFilter;
// texture.magFilter = THREE.NearestFilter;
texture.minFilter = THREE.LinearFilter;
texture.magFilter = THREE.LinearFilter;

// 添加物体
const cubeGeometry = new THREE.BoxBufferGeometry(1, 1, 1);
// 材质
const basicMaterial = new THREE.MeshBasicMaterial({
  color: "#ffff00",
  //   map: doorColorTexture,
  map: texture,
});
const cube = new THREE.Mesh(cubeGeometry, basicMaterial);
scene.add(cube);

// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight);
// console.log(renderer);
// 将webgl渲染的canvas内容添加到body
document.body.appendChild(renderer.domElement);

// // 使用渲染器，通过相机将场景渲染进来
// renderer.render(scene, camera);

// 创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);
// 设置控制器阻尼，让控制器更有真实效果,必须在动画循环里调用.update()。
controls.enableDamping = true;

// 添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);
// 设置时钟
const clock = new THREE.Clock();

function render() {
  controls.update();
  renderer.render(scene, camera);
  //   渲染下一帧的时候就会调用render函数
  requestAnimationFrame(render);
}

render();

// 监听画面变化，更新渲染画面
window.addEventListener("resize", () => {
  //   console.log("画面变化了");
  // 更新摄像头
  camera.aspect = window.innerWidth / window.innerHeight;
  //   更新摄像机的投影矩阵
  camera.updateProjectionMatrix();

  //   更新渲染器
  renderer.setSize(window.innerWidth, window.innerHeight);
  //   设置渲染器的像素比
  renderer.setPixelRatio(window.devicePixelRatio);
});

纹理透明

import * as THREE from "three";
// 导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
// 导入动画库
import gsap from "gsap";
// 导入dat.gui
import * as dat from "dat.gui";

// 目标：透明纹理

// 1、创建场景
const scene = new THREE.Scene();

// 2、创建相机
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

// 设置相机位置
camera.position.set(0, 0, 10);
scene.add(camera);

// 导入纹理
const textureLoader = new THREE.TextureLoader();
const doorColorTexture = textureLoader.load("./textures/door/color.jpg");
const doorAplhaTexture = textureLoader.load("./textures/door/alpha.jpg");

// 添加物体
const cubeGeometry = new THREE.BoxBufferGeometry(1, 1, 1);
// 材质
const basicMaterial = new THREE.MeshBasicMaterial({
  color: "#ffff00",
  map: doorColorTexture,
  //   alphaMap: doorAplhaTexture,
  transparent: true,
  opacity: 0.3,
  //   side: THREE.DoubleSide,
});
basicMaterial.side = THREE.DoubleSide;
const cube = new THREE.Mesh(cubeGeometry, basicMaterial);
scene.add(cube);

// 添加平面
const plane = new THREE.Mesh(
  new THREE.PlaneBufferGeometry(1, 1),
  basicMaterial
);
plane.position.set(3, 0, 0);
scene.add(plane);

// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight);
// console.log(renderer);
// 将webgl渲染的canvas内容添加到body
document.body.appendChild(renderer.domElement);

// // 使用渲染器，通过相机将场景渲染进来
// renderer.render(scene, camera);

// 创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);
// 设置控制器阻尼，让控制器更有真实效果,必须在动画循环里调用.update()。
controls.enableDamping = true;

// 添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);
// 设置时钟
const clock = new THREE.Clock();

function render() {
  controls.update();
  renderer.render(scene, camera);
  //   渲染下一帧的时候就会调用render函数
  requestAnimationFrame(render);
}

render();

// 监听画面变化，更新渲染画面
window.addEventListener("resize", () => {
  //   console.log("画面变化了");
  // 更新摄像头
  camera.aspect = window.innerWidth / window.innerHeight;
  //   更新摄像机的投影矩阵
  camera.updateProjectionMatrix();

  //   更新渲染器
  renderer.setSize(window.innerWidth, window.innerHeight);
  //   设置渲染器的像素比
  renderer.setPixelRatio(window.devicePixelRatio);
});