<script src="https://wow.techbrood.com/libs/three.r73.js"></script>
在Three.js中要渲染物体到网页中我们需要3个组件
场景scene
场景是所有物体的容器，如果要显示一个苹果，就需要将苹果对象加入场景中
let scene = new THREE.Scene();
相机camera
另一个组建是相机，相机决定了场景中那个角度的景色会显示出来。相机就像人的眼睛一样，人站在不同位置，抬头或者低头都能够看到不同的景色。
场景只有一种，但是相机却有很多种
只要设置不同的相机参数，就能够让相机产生不一样的效果
透视相机这里使用的是透视相机
let camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000)
设置不同的相机需要不同的参数
会出现不同的效果
渲染器renderer
渲染器决定了渲染的结果应该画在页面的什么元素上面
并且以怎样的方式来绘制
let renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
//挂载到页面
document.body.appendChild(renderer.domElement)
let geometry = new THREE.CubeGeometry(1, 1, 1);
//width:立方体x轴的长度,height:立方体y轴的长度,depth:立方体z轴的长度也是深度
renderer.render(scene, camera)
//scene:前面定义的场景,camera:前面定义的相机
//renderTarget:渲染的目标默认是是渲染到前面定义的render变量中
//forceClear:每次绘制之前都将画布的内容给清除,即使自动清除标志autoClear为false,也会清除
function render() {
    cube.rotation.x += 0.1
    cube.rotation.y += 0.1
    renderer.render(scene, camera)
    requestAnimationFrame(render)
模型操作:
生成几何体 => 生成材质 => 混合生成模型
商城模型  => 添加到场景中
生成场景(配置参数...)  =>  模型导入场景
生成相机  = > 添加控制器(控制相机)
渲染器操作
生成渲染器 => 场景和相机添加到渲染器中  => 建立和canvas 关联
更新模块(动画模块)
动画的连续 ,相机 ,场景的更新控制
案例演示 :创建一个简单的立方体
three.js 里面的颜色是 new THREE.Color()
简单的控制相机
//真是世界的相机 : 近大远小
const camera = new THREE.PerspectiveCamera(75, width / height, 0.01, 1000);
//摆放向机的位置 相机的朝向
camera.position.z = 6;camera.lookAt(0, 0, 0);
//简单的控制相机
const control = new THREE.OrbitControls(camera);
创建好后在动画渲染里面更新控制器
//更新控制器
control.update();
案例演示 点击拖动: 简单的控制相机
常见的几何体 Geometry
生成一个辅助网格体
就是带有辅助线的立方体
THREE.WireframeGeometry
THREE.BoxGeometry : 立体矩形
​	构造函数: 前面三个参数(x, y, z)默认1
​		后面还有三个参数(每个面的分段)
THREE.CircleGeometry : 圆
//创建圆形  CircleGeometry: 半径 分段 第一个分段的起始角度 旋转角度/弧度
//分段越多越像圆
const geometry = new THREE.CircleGeometry(3,30,Math.PI * 2)
THREE.CylinderGeometry : 圆柱
//创建圆柱  CylinderGeometry : 顶部半径  底部半径  高
const geometry = new THREE.CylinderGeometry(2,2,5);
THREE.ConeGeometry : 圆锥
//圆锥 ConeGeometry : 底面半径 高
const geometry = new THREE.ConeGeometry(2,5);
THREE.DodecahedronGeometry :十二面几何体(球)
//十二面几何体 DodecahedronGeometry :半径 第二个参数越大越接近球
const geometry = new THREE.DodecahedronGeometry(2,2);
PlaneGeometry 平面几何体 (重要)生成底面
//平面几何体 生成底面 PlaneGeometry : 宽 高 宽分段 高分段
const geometry = new THREE.PlaneGeometry(10,10,30,30);
RingGeometry 平面圆环几何体
//圆环几何体 RingGeometry : 内部半径 外部半径 圆的分段数越大越圆  圆环表面的分段数
const geometry = new THREE.RingGeometry(2,5,20,8);
TorusGeometry :圆环几何体
//圆环几何体 TorusGeometry : 圆环的半径  管道的半径 圆环的分段 管道的分段越多越圆
const geometry = new THREE.TorusGeometry( 4,1,10,20 );
案例演示: 常见的几何体
自定义几何体
必须要有端点(定义制作)
必须要有面(三点形成一个面 手动添加面的关联)
建立一个坐标系 AxesHelper
//建立一个简单的坐标系 坐标系的长度
const axesHelper = new THREE.AxesHelper(5);
scene.add( axesHelper );
创建自定义
描述一个点 THREE.Vector3()
描述一个面 THREE.Faces()
//生成Geometry的实例
const geometry = new THREE.Geometry();
//添加点
geometry.vertices.push(new THREE.Vector3(1,0,0));
geometry.vertices.push(new THREE.Vector3(0,1,0));
geometry.vertices.push(new THREE.Vector3(0,0,1));
//根据这些点确定一个面
geometry.faces.push(new THREE.Face3(0,1,2, normal, color));
创建点可以写坐标 也可以写极坐标
Vector3().applyEuler 参数里面要生成一个欧拉角 Euler
geometry.vertices.push(new THREE.Vector3(5,0,0).applyEuler(new THREE.Euler(0,0,1,'XYZ')));//参数 前三个是根据多少值 旋转 对应 XYZ
案例演示: 自定义几何体
几何体组合
Object3D 实例对象内部可以存放多个mesh ,每个mesh都是独立控制的
 THREE.Object3D
let obj = new THREE.Object3D();
//模型对象添加子模型
obj.add(mesh1);
obj.add(mesh2);
//模型对象添加到场景中
scene.add(obj);
案例演示 :小案例
LineBasicMaterial() 基础线条
/生成Geometry的实例
const geometry = new THREE.Geometry();
//添加关键点
geometry.vertices.push(new THREE.Vector3(1,1,1));
geometry.vertices.push(new THREE.Vector3(3,3,3));
//将线条按顺序连接起来
const material = new THREE.LineBasicMaterial();
new THREE.Line(geometry,material)
线条渐变色
//生成Geometry的实例
const geometry = new THREE.Geometry();
//添加关键点
geometry.vertices.push(new THREE.Vector3(1,1,1));
geometry.vertices.push(new THREE.Vector3(3,3,3));
geometry.vertices.push(new THREE.Vector3(5,3,2));
geometry.colors.push(
    new THREE.Color(0xff0000),
    new THREE.Color(0x0000ff)
//线条是被点来进行染色的
const material = new THREE.LineBasicMaterial({  vertexColors:true});
new THREE.Line(geometry,material)
案例演示: 线的绘画
法线网格材质(初学) MeshNormalMaterial
物体内部有光
const material = new THREE.MeshNormalMaterial({  
    //内部也有光  
    side:THREE.DoubleSide
基础网格材质 MeshBasicMaterial
一个以简单着色（平面或线框）方式来绘制几何体的材质。
基础材质可以进行贴图
new THREE.MeshNormalMaterial({side:THREE.DoubleSide})
//wireframe 显示线条
const material = new THREE.MeshNormalMaterial({
    side:THREE.DoubleSide,
    wireframe:true
const geometry = new THREE.BoxGeometry( 2, 2, 2, 2, 2, 2);
const mesh = new THREE.Mesh( geometry, material );
mesh.position.x = index * 3 - meshList.length;
scene.add(mesh);
可以载入纹理




    

Lambert网格材质MeshLambertMaterial
一种非光泽表面的材质，没有镜面高光。
new THREE.MeshLambertMaterial({map:texture})
//flatShading 每一个面接受光照
new THREE.MeshLambertMaterial({map:texture,flatShading:true})
Phong网格材质 MeshPhongMaterial
具有镜面高光的光泽表面的材质
new THREE.MeshPhongMaterial({flatShading:true,envMap:scene.background})
//envMap 环境贴图
卡通网格材质 MeshToonMaterial
new THREE.MeshToonMaterial({map:texture,side:THREE.DoubleSide})
案例演示: 材质
纹理和材质
纹理 : 本质是一张图片或者Canvas ,或视频
材质: 包含了贴图的纹理 ,相当于实际物体的质感, 物体在场景中的表现
纹理(texture)
需要引入贴图 , 加载纹理贴图到物体表面, 或者是作为镜面反射或折射的贴图
简单的纹理引入 : TextureLoader
//引入纹理
//创建纹理引入工具
const loader = new THREE.TextureLoader();
const texture = loader.load("图片地址");
const material = new THREE.MeshBasicMaterial({
    map:texture,
    side:THREE.DoubleSide
例如下面这个案例
案例演示 : 几何体的纹理
盒子世界纹理引入 CubeTextureLoader
const loader = new THREE.CubeTextureLoader();
//场景引入
scene.background = loader.setPath( '../lib/textures/cube/Park3Med/' )    
    .load( [
    'px.jpg','nx.jpg',      
    'py.jpg','ny.jpg',      
    'pz.jpg','nz.jpg'
例如下面这个案例
案例演示 : 世界纹理
PerspectiveCamera 透视相机(近大远小)
//透视相机 近大远小 :垂直视野角度  锥体长宽比  物体近端面 物体远端面
const camera = new THREE.PerspectiveCamera(75, width / height, 0.01, 1000);//摆放向机的位置 相机的朝向
camera.position.z = 10;
//看向哪里
camera.lookAt(0, 0, 0);
OrthographicCamera 正交相机
环境光 AmbientLight
没有一个固定光源的时候, 周围的物体会根据环境折射光线
不能投射阴影
//环境光的颜色  光照强度
const ambientLight = new THREE.AmbientLight( 0xffffff, 0.3 );
scene.add( ambientLight );
点光源 PointLight
//十六进制光照颜色  光照强度  从光源到光照强度为0的位置
const light2 = new THREE.PointLight( 0xffffff, 1, 1000 );
//设置位置
light2.position.set( 0, 8, 8 );
scene.add( light2 );
点光源辅助线THREE.PointLightHelper
平行光 DirectionalLight
//两个参数 光的颜色及其光照强度
const directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
scene.add( directionalLight );
DirectionalLightHelper 平行光的辅助线
半球光 HemisphereLight
模拟日出日落
不能投射阴影
const hemisphereLight = new THREE.HemisphereLight( 0xffffff, 0x000000, 1 );
scene.add( hemisphereLight );
聚光灯 SpotLight
//灯光的颜色
const spotLight = new THREE.SpotLight( 0xffffff );
spotLight.position.set( 0, 10, 0 );
//聚光灯的弧度大小
spotLight.angle = Math.PI/6;
scene.add( spotLight );
平面光光源 RectAreaLight
从一个矩形平面上均匀地发射光线
不支持阴影
//颜色  强度 宽度 高度
const rectLight = new THREE.RectAreaLight( 0xffffff, 1,  10, 10 );
rectLight.position.set( 5, 5, 0 );
rectLight.lookAt( 0, 0, 0 );
scene.add( rectLight );
特殊的光源 比如 点光源 聚光灯
必须有 产生阴影的物体
必须要有 显示(接收)阴影的物体
灯光照射产生阴影
const spotLight = new THREE.SpotLight( 0xffffff );//聚光灯
spotLight.position.set( 0, 10, 0 );
spotLight.angle = Math.PI/6;
this.spot.castShadow = true;//照射产生阴影
scene.add( spotLight );
物体要产生阴影
const geometry =new THREE.BoxGeometry(3, 3, 3);
const material = new THREE.MeshLambertMaterial({
    color:new THREE.Color(0xffffff),
    side:THREE.DoubleSide,
    map:new THREE.TextureLoader().load('图片地址')
const mesh = new THREE.Mesh(geometry,material);
scene.add(mesh);
//物体产生阴影
mesh.castShadow = true;
底面接收阴影
const geometry = new THREE.PlaneGeometry(100,100,10,10);
const material = new THREE.MeshPhongMaterial({
    color: 0xeeeeee,
    side: THREE.DoubleSide
const mesh = new THREE.Mesh(geometry,material);
//旋转90度
mesh.rotateX(- Math.PI / 2);
mesh.position.set(0, -5 ,0);
scene.add(mesh);
//接收阴影
mesh.receiveShadow = true;
产生阴影要开启阴影模式
renderer.shadowMap.enabled = true;
加载方式是一个异步加载: 使用回调函数添加到场景当中
GLTFLoader 加载器
const loader = new THREE.GLTFLoader()//获取加载器的实例方法
//path/to/sourse 资源的加载地址
loader.load("path/to/sourse",res=>{
    //res 是加载的资源
    //res.scene是模型的场景
    scene.add(res.scene)
    //res的材质十多个面
    //数组遍历每一个面设置不同的反光效果
    //res.scene.traverse 相当于 res.scene是一个数组, 遍历数组的每一个面设置不同的反光
    res.scene.traverse(mesh=>{
        if (mesh.isMesh){
            //观看模型的内部
            mesh.material.side = THREE.BackSide
            //背景对所有的面进行一一映射
            mesh.material.envMap = scene.background;
MMDLoader 加载器
const loader = new THREE.MMDLoader();
loader.load('pmd后缀的文件',mesh=>{
    //调整位置
    mesh.position.set(0,-10,0)
    scene.add(mesh);
MMD 动画效果
需要引入AMMO 物理引擎
MMDAnimationHelper 动画效果
//需要一个pmd后缀文件和vmd后缀文件
const helper = new THREE.MMDAnimationHelper();
const loader = new THREE.MMDLoader();
loader.loadWithAnimation(
    'pmd后缀文件',
    'vmd后缀文件',
    mmd => {
        helper.add(mmd.mesh, {
            animation: mmd.animation,
            physics: true
        scene.add( mmd.mesh );
//在动画渲染的地方写上
//动画实时渲染
const clock = new THREE.Clock();
helper.update(clock.getDelta());
镜面效果Reflector
import {Reflector} from "three/examples/jsm/objects/Reflector";
const geometry = new THREE.PlaneGeometry(10,10);
//设置镜子材质
const mirrorMesh = new Reflector(geometry,{
    color:new THREE.Color(0x7f7f7f)//镜子的颜色
//设置位置
mirrorMesh.position.set(0,0,-5);
//镜子的朝向
mirrorMesh.lookAt(0,0,0)
拖拽控制 OrbitControls
//传入相机和控制的标签
let control = new OrbitControls(camera,renderer.domElement);
control.enabled = true//禁止事件
//在动画里渲染
control.update();
进阶拖拽控制器 TrackballControls
let control = new TrackballControls(camera,renderer.domElement);
control.noPan = true//禁止平移
control.noZoom = true//是否允许放大
control.noRotate = true//禁止拖拽
control.rotateSpeed = 5//拖拽的速度
control.zoomSpeed = 5//滚轮的速度
control.panSpeed = 5//平移的速度
//在动画里渲染
control.update();
飞行控制器 FlyControls
let control = new FlyControls(camera,renderer.domElement);
control.movementSpeed = 10;//移动的速度
control.rollSpeed = 3;//平移旋转速度
control.autoForward = true;//自动飞行
control.dragToLook = true;//拖拽调整方向
//在动画里渲染 需要传入一个时间的参数
const clock = new THREE.Clock()
control.update(clock.getDelta());
第一人称控制器FirstPersonControls
let control = new FirstPersonControls(camera,renderer.domElement);
control.lookSpeed = 0.15//鼠标移动速度 默认值 0.001
control.movementSpeed = 10//移动速度 默认值 1
//在动画里渲染 需要传入一个时间的参数
const clock = new THREE.Clock()
control.update(clock.getDelta());
锁定鼠标控制器 PointerLockControls
3D游戏的最佳选择
let control = new PointerLockControls(camera,renderer.domElement);
//需要锁定指针 
canvas.addEventListener("click",()=>{
    control.lock()
//监听lock事件
controls.addEventListener( 'lock',  ()=> {
	//锁定指针
controls.addEventListener( 'unlock',  ()=> {
	//没有锁定指针
复制代码
 





    
 
   
相关推荐
 
   初识three.js，搭建three.js+vue.js项目
 
简介：WebGL（全写Web Graphics Library）是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0（OpenGL for Embedded Systems，OpenGL嵌入式版本，针对手机、游戏机等设备相对较轻量级的版本）…
 
  
            Vue.js
            JavaScript
            WebGL
          
 
 
  
   threejs粒子系统
 
创作不易，猪猪叹气！这边文章写了我一整天的时间，我努力的将整个文章的思想都加上了注释，代码量有点多，但是满满的干活！希望有收获的同学能够轻轻的点一个赞~
 
  
            three.js
          
 
 
  
   threejs自动巡游
 
自动巡游-有个需求是模拟保安巡检以及类似观光沿着轨道自动巡游，通过解析拆分。可以通过一系列的点连接成线，并将相机或保安模型沿着线进行运动，并调整其角度沿着切线方向保持~
 
  
            three.js
          
 
 
  
   Three.js 动效方案
 
Three.js（下面简称 Three） 作为一个 3D 库，不仅减少了我们学习 OpenGL 和 WebGL 的成本，还大大提升了前端在可视化上给用户带来更多的真实、沉浸式的体验。众所周知，Three 更多的是用 3D 模型 + 投影相机 + 用户交互的方式来构建一个「3D …
 
  
                网易云音乐技术团队
            WebGL
            three.js
          
 
 
  
   Threejs 地图3D可视化
 
我正在参加「掘金·启航计划」 在开始绘制图形前，需要一份包含地理信息数据，我们可以从阿里云提供的小工具获取，properties中包含了名字、中心、质心等信息
 
  
                Defineee
            three.js
            JavaScript
          
 
 
  
   最通俗的threejs原理介绍
 
threejs原理介绍 我在这篇文章threejs开发入门介绍中介绍了threejs开发入门，不过大部分人还是对实战更感兴趣，都希望能对着文章直接撸出一个3D的小项目出来。
 
  
            three.js
            WebGL
            OpenGL
          
 
 
  
   threeJs全景视频
 
各位大佬们大家好😊，很久没更新文章了。因为前端时间挺忙的，各种项目、准备软考等等给耽搁了🙏。最近这段时间有点迷上threeJs，经过搜寻发现网络上关于threeJs的资源还是相对较少的，而且比较旧。 
 
  
                半个糯米鸡
            three.js
          
 
 
  
   我为什么学 Three.js
 
大家可能会发现，我最近一直在更一些 Three.js 的内容。难道我去做可视化或者游戏了？ 不是的，我下份工作还是工具链相关或者普通的前端开发相关的。 那既然不是工作相关的技术，为什么要去学呢？3D 
 
  
                zxg_神说要有光
            JavaScript
          
 
 
  
   threejs实现3d全景看房
 
背景 随着电商时代的发展，网上购物的方式已经成为主流，良好的购物体验已经显得极为重要。展示给用户的视觉效果便不能仅仅局限于2D视觉效果，全方位的3D立体展示效果能让用户对商品进行 360度无死角的认识
 
  
                hide_in_code
            three.js
          
 
 
  
   Threejs开发3D展馆 | 大帅老猿threejs特训
 
本文将介绍如果使用Threejs开发制作一个3D展馆，效果如图： 首先，我们需要一个展馆模型。我是通过Blender做出来的，在Blender中将模型导出为glb格式。
 
  
            JavaScript
          
 
 
  
   three.js深入浅出
 
从简入繁的教大家使用three.js。阅读本篇文章，你可学到以下知识 2. 生成一个场景，我们的物体都需要添加到场景中 用户所能看到的场景，需要通过照相机来呈现，相当于人的眼睛，照相机分为两种一种是正交投影照相机，一种是透视投影照相机，它们之间最大的区别是透视投影照相机会根据照…
 
  
                shen1992君
            three.js
          
 
 
  
   Threejs绘制地图(geojson)
 
基于geojson的地图绘制目前已经有比较成熟的框架和解决方案了。 但是今天我们还是要在Threejs里来简单实现一下三维数据的展示。 注意这里的类型是 MultiPolygon（多面），我们的坐标点是嵌套在多层数组里面的。 如果是在室内地图的开发，我们通常会需要显示模块的一些…
 
  
                JesseLuo
            Canvas
            three.js
          
 
 
  
   threejs双人称场景漫游
 
场景漫游 前言 最近太忙了，断更了一段时间，最近一直忙碌于多个项目组。参与了公司threejs引擎的二次封装，收获颇多，这篇文章主要介绍在3d场景中实现第一人称与第三人称切换以及碰撞监测的漫游方案。 
 
  
            three.js
          
 
 
  
   我在前端干工地——three.js
 
我在前端干工地，最后成果如下图。 从图中可以看到，整个画面由以下构成 地面 房子 天空 下面就能一步步的构建这个场景。 一、 准备工作 我这里的环境是vue3 + vite，基本环境准备好后就要安装t
 
  
            JavaScript
            three.js
          
 
 
  
   BabylonJs和Three.js核心功能比较
 
介绍 Three.js和Babylon.js 都是对于Webgl的封装，Three.js比较早，使用人数和社区活跃度都比Babylon高，Babylon开发过程中，大部分情况下只能去官方的社区去提问或
 
  
                ZoeLee
            three.js
          
 
 
  
 
友情链接：
 

        婚然心动：战少宠妻如令
        睁开眼，回到老婆难产当天
        神奇宝贝：巅峰之路
        绝世仙武神
        不敢爱了 用英语怎么说
        绝世丑妃电视剧免费播放
        js怎么判断ie 5 6 7
        sql 表权限 引用 选择
    土豆Potato
        全栈攻城狮