前端前沿web 3d可視化技術(shù)

完整案例與項(xiàng)目代碼：gitee開(kāi)源項(xiàng)目地址 https://gitee.com/jumping-world-line/01_threeJS_basic

隨著瀏覽器性能和網(wǎng)絡(luò)帶寬的提升 使得3D技術(shù)不再是桌面的專(zhuān)利 打破傳統(tǒng)平面展示模式

前端方向主要流向的3D圖形庫(kù)包括Three.js和WebGL

• WebGL靈活高性能，但代碼量大，難度大，需要掌握很多底層知識(shí)和數(shù)學(xué)知識(shí)
• Threejs封裝了WebGL的底層細(xì)節(jié)，可拓展性強(qiáng)，有很多開(kāi)源的插件和工具，更易上手

就像2G時(shí)代文字信息是主要傳輸媒介 3G時(shí)代的圖片 4G時(shí)代的視頻
隨著硬件性能與技術(shù)的提升，未來(lái)的前端也一定是3D的

開(kāi)始學(xué)習(xí)

threejs官方項(xiàng)目

首先要有一定的前端開(kāi)發(fā)基礎(chǔ)以及開(kāi)發(fā)環(huán)境 不多贅述

訪問(wèn)https://threejs.org/ 點(diǎn)擊github

拷貝項(xiàng)目到本地即可查看文檔 案例文件 使用編輯器等

parcel打包工具

就像前端需要webpack來(lái)進(jìn)行模塊化開(kāi)發(fā) three JS也需要一個(gè)對(duì)應(yīng)的工具，他就是PARCEL https://www.parceljs.cn/
當(dāng)然，也可以使用前端常用的webpack vite等 各有優(yōu)劣
parcel的優(yōu)勢(shì)在于上手速度快 0配置

本地新建空文件夾 使用npm init 命令創(chuàng)建新的NPM包
npm install -g parcel-bundler 安裝parcel
手動(dòng)建立如圖的目錄結(jié)構(gòu)與基礎(chǔ)文件 參考

到此 使用parcel搭建的最基礎(chǔ)的threeJS開(kāi)發(fā)環(huán)境就完成了

可以拿到ThreeJS的各種接口 方法 常量等

搭建第一個(gè)場(chǎng)景和物體

打開(kāi)上文提到的本地編輯器
。。。感覺(jué)和當(dāng)年在學(xué)校學(xué)的unity很像，如果有過(guò)類(lèi)似經(jīng)驗(yàn)，理解上手會(huì)很快

相機(jī)，即使觀察視角
場(chǎng)景，即被觀察的物體

• 理解相機(jī)的視錐體概念，官方案例
  const camera = new THREE.PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number )
  fov — 攝像機(jī)視錐體垂直視野角度
  aspect — 攝像機(jī)視錐體長(zhǎng)寬比
  near — 攝像機(jī)視錐體近端面
  far — 攝像機(jī)視錐體遠(yuǎn)端面

這些參數(shù)一起定義了攝像機(jī)的viewing frustum（視錐體）。

main.js案例代碼

//  1.創(chuàng)建場(chǎng)景
const scene = new THREE.Scene()  

//  2.創(chuàng)建并添加相機(jī)
const camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000)  
camera.position.set(0,0,10) //設(shè)置相機(jī)位置
scene.add(camera)


//  3. 在場(chǎng)景中創(chuàng)建并添加物體
const cubGeometry = new THREE.BoxGeometry( 1, 1, 1 );// 創(chuàng)建幾何立方體
const cubMaterial = new THREE.MeshBasicMaterial({color: 0x00ff00} );// 添加材質(zhì)
const cube = new THREE.Mesh( cubGeometry, cubMaterial );// 將幾何體和材質(zhì)組合為物體
scene.add( cube );

//  4.設(shè)置渲染器并渲染場(chǎng)景
const renderer = new THREE.WebGL1Renderer() //初始化渲染器
renderer.setSize(window.innerWidth,window.innerHeight)  //設(shè)置渲染的尺寸大小
document.body.appendChild(renderer.domElement);// 將webgl渲染的內(nèi)容添加到body
renderer.render(scene,camera) // 使用渲染器，通過(guò)相機(jī)將場(chǎng)景渲染進(jìn)來(lái)

案例成功
在瀏覽器中會(huì)渲染出一個(gè)固定視角下觀察到的，黑色場(chǎng)景內(nèi)的綠色綠色正方體的一面。

軌道控制器查看物體

// 引入軌道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
// 5.添加控制器-軌道控制器 可以使得相機(jī)圍繞目標(biāo)進(jìn)行軌道運(yùn)動(dòng)  通過(guò)不斷地重新渲染來(lái)實(shí)現(xiàn)移動(dòng)視角的效果
const controls = new OrbitControls(camera,renderer.domElement);

function render(){//遞歸實(shí)現(xiàn)每一幀的重新渲染
    renderer.render(scene,camera)
    requestAnimationFrame(render);
}
render();

添加坐標(biāo)軸輔助器

const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );

設(shè)置物體移動(dòng)

function render(){//遞歸實(shí)現(xiàn)每一幀的重新渲染
    //  7.通過(guò)循環(huán) 不斷修改物體的位置
    cube.position.x += 0.1;
    if(cube.position.x > 5){
        cube.position.x = 0;
    }
    renderer.render(scene,camera)
    requestAnimationFrame(render);
}

設(shè)置物體縮放和旋轉(zhuǎn)

//  物體的縮放
cube.scale.set(3,2,1);//指物體在X,Y,Z軸上的縮放倍數(shù)
//  物體的旋轉(zhuǎn) ———— 歐拉角描述一個(gè)旋轉(zhuǎn)變換，通過(guò)指定軸順序和其各個(gè)軸向上的指定旋轉(zhuǎn)角度來(lái)旋轉(zhuǎn)一個(gè)物體。
cube.rotation.set(Math.PI/4,0,0,'XYZ')//物體沿X軸旋轉(zhuǎn)90度

動(dòng)畫(huà)

gsap 補(bǔ)間動(dòng)畫(huà)： https://www.npmjs.com/package/gsap
文檔：https://greensock.com/ 動(dòng)畫(huà)速度調(diào)整

//  9.gsap 補(bǔ)間動(dòng)畫(huà)  ——  無(wú)需再手動(dòng)計(jì)算時(shí)間做動(dòng)畫(huà)了  內(nèi)置API自動(dòng)生成  并能通過(guò)豐富的參數(shù)和回調(diào)進(jìn)行控制
let animate_line = gsap.to(cube.position,{ 
    x: 5 ,                  //軸對(duì)象與動(dòng)畫(huà)值
    duration: 5 ,           //持續(xù)時(shí)間
    ease: "power1.inOut" ,  //速度
    repeat:-1 ,             //重復(fù)次數(shù)
    yoyo:true ,             //往返運(yùn)動(dòng)
    delay:2 ,               //延遲動(dòng)畫(huà)開(kāi)始時(shí)間 
    onComplete:()=>{        //動(dòng)畫(huà)完成的回調(diào)函數(shù)

    },
    onStart:()=>{        //動(dòng)畫(huà)開(kāi)始的回調(diào)函數(shù)

    }
});
let animate_rotat = gsap.to(cube.rotation,{ x: Math.PI*2 , duration: 5 , repeat:-1 , ease: "power1.inOut"});

window.addEventListener("click",()=>{//單擊屏幕暫停
    animate_line.isActive()?animate_line.pause():animate_line.resume()
    animate_rotat.isActive()?animate_rotat.pause():animate_rotat.resume()
})
window.addEventListener("dbclick",()=>{//雙擊屏幕全屏/取消全屏
    document.fullscreenElement?document.exitFullscreen():renderer.domElement.requestFullscreen()
})

function render(){//遞歸實(shí)現(xiàn)每一幀的重新渲染
    //  8.制作動(dòng)畫(huà)  ——  時(shí)間動(dòng)畫(huà)原理(通過(guò)每一幀的生成時(shí)間為基準(zhǔn)來(lái)渲染動(dòng)畫(huà)  clock函數(shù)或render自帶時(shí)間參數(shù))  較簡(jiǎn)單 略...  
    renderer.render(scene,camera)
    requestAnimationFrame(render);
}
render();

設(shè)置阻尼與監(jiān)聽(tīng)畫(huà)面變化渲染畫(huà)面

// 10.設(shè)置控制器阻尼 更真實(shí)  需要在每一幀重新生成時(shí)調(diào)用controls.update();
controls.enableDamping = true;
// 11.監(jiān)聽(tīng)畫(huà)面變化渲染畫(huà)面  
window.addEventListener('resize',()=>{
    camera.aspect = window.innerWidth/window.innerHeight//更新相機(jī)
    camera.updateProjectionMatrix();//更新相機(jī)投影矩陣
    renderer.setSize(window.innerWidth,window.innerHeight)//更新渲染器尺寸大小
    renderer.setPixelRatio(window.devicePixelRatio)//設(shè)置渲染器像素比————就是縮放比
})

基本案例完成
總結(jié)主要步驟:

• 創(chuàng)建場(chǎng)景
• 創(chuàng)建并添加相機(jī)
• 在場(chǎng)景中創(chuàng)建并添加物體(幾何體+材質(zhì))
• 添加軌道控制器與阻尼、 補(bǔ)間動(dòng)畫(huà)(移動(dòng) 縮放 旋轉(zhuǎn)等)、監(jiān)聽(tīng)畫(huà)面變化重新渲染、輔助坐標(biāo)軸等
• 設(shè)置渲染器并渲染場(chǎng)景

入門(mén)部分的進(jìn)階內(nèi)容

GUI庫(kù) —輕量級(jí)UI界面控制庫(kù)

安裝npm install dat.gui,
很方便的工具 感覺(jué)也可以用在echarts上

import  * as dat from 'dat.gui';



// 12. GUI  實(shí)現(xiàn)開(kāi)發(fā)中快速調(diào)試物體的效果
const gui = new dat.GUI();
// 折疊目錄  設(shè)置文件夾
let folder = gui.addFolder('設(shè)置立方體')
//材質(zhì)工具欄
folder.add(cube.material,'wireframe').name('材質(zhì)');
//坐標(biāo)軸工具欄
folder.add(cube.position,'x').min(0).max(5).step(0.001).name('移動(dòng)X軸坐標(biāo)').onChange((val)=>{
    // 回調(diào)函數(shù) val是修改后的值
}).onFinishChange((val)=>{
    // 回調(diào)函數(shù) val是修改后的值
});
//展示工具欄
folder.add(cube,'visible').name('是否展示')
const params = {
    color:'#ffff00',
    fn:()=>{//動(dòng)畫(huà)
        gsap.to(cube.position,{ 
            x: 5 ,                  //軸對(duì)象與動(dòng)畫(huà)值
            duration: 3 ,           //持續(xù)時(shí)間
            ease: "power1.inOut" ,  //速度
            repeat:-1 ,             //重復(fù)次數(shù)
            yoyo:true ,             //往返運(yùn)動(dòng)
            delay:2 ,               //延遲動(dòng)畫(huà)開(kāi)始時(shí)間 
            onComplete:()=>{        //動(dòng)畫(huà)完成的回調(diào)函數(shù)
        
            },
            onStart:()=>{        //動(dòng)畫(huà)開(kāi)始的回調(diào)函數(shù)
        
            }
        });
    }
};
//顏色工具欄
folder.addColor(params,'color').onChange((val)=>{
    // 回調(diào)函數(shù) val是修改后的值
    cube.material.color.set(val);
})
//動(dòng)畫(huà)工具欄  點(diǎn)擊觸發(fā)特定效果
folder.add(params,'fn').name('移動(dòng)動(dòng)畫(huà)')

幾何體

基礎(chǔ)概念：

正方體坐標(biāo)：最基礎(chǔ)的正方體擁有六個(gè)面，每個(gè)面4個(gè)點(diǎn)，共24個(gè)點(diǎn)。每個(gè)點(diǎn)都需要xyz三軸的坐標(biāo)，即72個(gè)坐標(biāo)數(shù)據(jù)。
法相量：面的朝向角度

// 13. 通過(guò)頂點(diǎn)設(shè)置創(chuàng)建幾何體矩形
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: 0x00ff00} );// 添加材質(zhì)
const cube = new THREE.Mesh( geometry, Material );// 將幾何體和材質(zhì)組合為物體

常用網(wǎng)格幾何體：

立方緩沖幾何體、圓形緩沖幾何體、圓錐緩沖幾何體、圓柱緩沖幾何體、八面緩沖幾何體、十二面緩沖幾何體、二十面緩沖幾何體、邊緣緩沖幾何體、擠壓緩沖幾何體、車(chē)削緩沖幾何體、參數(shù)化緩沖幾何體、平面緩沖幾何體、多面緩沖幾何體、圓環(huán)緩沖幾何體、形狀緩沖幾何體、球緩沖幾何體、圓環(huán)緩沖扭結(jié)幾何體、管道緩沖幾何體、網(wǎng)格幾何體

紋理與材質(zhì)

物體=幾何體+紋理與材質(zhì)
相同的形狀，加上不同的紋理即可表示不同的物體。例如長(zhǎng)方體，可能是板磚，可能是煙盒，也可能是手機(jī)等

紋理

// 14 紋理與材質(zhì)
// 導(dǎo)入紋理 通過(guò)圖片加載
const textureLoader = new THREE.TextureLoader();
const wenliColorTexture = textureLoader.load('./textures/123.png')
// const wenliColorTexture = textureLoader.load(require('../assets/imgs/textures/123.pn'))
// 添加物體
const cubeGeometry = new THREE.BoxBufferGeometry(1,1,1)
//材質(zhì)
const BasicMaterial = new THREE.MeshBasicMaterial({
    color:'#ffff00',
    map:wenliColorTexture,
})
const cube = new THREE.Mesh( cubeGeometry, BasicMaterial );// 將幾何體和材質(zhì)組合為物體
scene.add( cube );//在場(chǎng)景中添加物體

紋理偏移 旋轉(zhuǎn) 重復(fù)等常用屬性

// 14 紋理與材質(zhì)
// 導(dǎo)入紋理 通過(guò)圖片加載
const textureLoader = new THREE.TextureLoader();
const wenliColorTexture = textureLoader.load(require('../assets/imgs/textures/123.png'));//紋理加載器
// 紋理常用屬性
wenliColorTexture.offset.set(0.5,0.5);//偏移
wenliColorTexture.rotation = Math.PI/4;///旋轉(zhuǎn)45°
wenliColorTexture.center.set(0.5,0.5);///旋轉(zhuǎn)原點(diǎn) 默認(rèn)(0,0)
wenliColorTexture.repeat.set(2,3);///重復(fù)次數(shù)
wenliColorTexture.wrapS = THREE.MirroredRepeatWrapping;///重復(fù)模式  水平方向  鏡像重復(fù)
wenliColorTexture.wrapT = THREE.RepeatWrapping;///重復(fù)模式  垂直方向  無(wú)限重復(fù)

紋理顯示算法與mipmap

// 紋理的顯示算法
// wenliColorTexture.minFilter = THREE.NearestFilter;//一紋素小于一像素時(shí)，貼圖如何采樣
// wenliColorTexture.magFilter = THREE.NearestFilter;//一紋素大于一像素時(shí)，貼圖如何采樣
wenliColorTexture.minFilter = THREE.LinearFilter;//默認(rèn)值
wenliColorTexture.magFilter = THREE.LinearFilter;//默認(rèn)值

透明材質(zhì)與透明紋理

類(lèi)似鐵柵欄場(chǎng)景 需要部分透明 遵循黑遮白顯的原則

// 紋理的透明
const wenliAplhaTexture = textureLoader.load(require('../assets/imgs/alphaMap/alphaMap.png'));//紋理加載器加載不透明度灰階圖片

// 添加物體
const cubeGeometry = new THREE.BoxBufferGeometry(1,1,1)
//材質(zhì)
const BasicMaterial = new THREE.MeshBasicMaterial({
    color:'#ffff00',
    map:wenliColorTexture,
    alphaMap:wenliAplhaTexture,//控制表面透明度(黑色完全透明 白色完全不透明  灰階代表不透明度)
    transparent:true,//允許透明
})
const cube = new THREE.Mesh( cubeGeometry, BasicMaterial );// 將幾何體和材質(zhì)組合為物體
scene.add( cube );//在場(chǎng)景中添加物體

紋理圖片

設(shè)置透明紋理圖片

（用PS調(diào)整了半天 一開(kāi)始圖片沒(méi)選好效果不盡如人意了23333）

PBR——材質(zhì)

基于物理渲染，通過(guò)計(jì)算環(huán)境光線使物體更真實(shí)

• 燈光屬性(Light Properties):
  • 直接照明：直接從光源發(fā)射的光至物體表面，造成直接漫反射(整體亮)或高光(局部亮)
  • 間接照明： 環(huán)境光直接光等二次反射至物體表面，造成間接漫反射或高光
  • 直接高光
  • 間接高光
  • 陰影
  • 環(huán)境光閉塞
• 表面屬性(Surface Properties)
  • 基礎(chǔ)色
  • 法線：使得表面顯得凹凸不平，用于添加表面細(xì)節(jié)，是一種三維向量（Vector3）數(shù)據(jù)
  • 高光:定義物體表面不同區(qū)域上不同的反射率來(lái)區(qū)分不同的物體材質(zhì)
  • 粗糙度
  • 金屬度

標(biāo)準(zhǔn)網(wǎng)格材質(zhì)與光照效果

漫反射環(huán)境光

// 添加物體
const cubeGeometry = new THREE.BoxBufferGeometry(1,1,1)
// 14 紋理與材質(zhì)   紋理常用屬性 顯示算法 紋理材質(zhì)的透明
// 導(dǎo)入紋理 通過(guò)圖片加載
const textureLoader = new THREE.TextureLoader();
const wenliColorTexture = textureLoader.load(require('../assets/imgs/textures/123.png'));//紋理加載器
// const BasicMaterial = new THREE.MeshBasicMaterial({//基礎(chǔ)材質(zhì) MeshBasicMaterial
// 15. 標(biāo)準(zhǔn)物理網(wǎng)格材質(zhì) MeshStandardMaterial ??需要燈光和表面屬性
const material = new THREE.MeshStandardMaterial({
    map:wenliColorTexture,
    color:'#62b5eb',
})
const cube = new THREE.Mesh( cubeGeometry, material );// 將幾何體和材質(zhì)組合為物體
scene.add( cube );//在場(chǎng)景中添加物體

// 16. 設(shè)置燈光
// 環(huán)境光(顏色 強(qiáng)度)
const light = new THREE.AmbientLight(0XFFFFFF,0.8);
// 直線平行光(顏色 強(qiáng)度 位置)
const directionLight = new THREE.DirectionalLight(0XFFFFFF,0.8);
directionLight.position.set(10,10,10)
scene.add( light );

漫反射平行光

// 16. 設(shè)置燈光
// 環(huán)境光(顏色 強(qiáng)度)
const light = new THREE.AmbientLight(0XFFFFFF,0.8);
// 直線平行光(顏色 強(qiáng)度 位置)
const directionLight = new THREE.DirectionalLight(0XFFFFFF,0.8);
directionLight.position.set(10,10,10)
scene.add( directionLight);

粗糙度與粗糙貼圖，金屬度與金屬貼圖，法線貼圖

粗糙度

const material = new THREE.MeshStandardMaterial({
    map:wenliColorTexture,
    color:'#62b5eb',
    roughness:0,//15.2 粗糙度  0-1 數(shù)值越小越光滑
    // roughnessMap:0,//粗糙度貼圖  暫無(wú)資源
})

金屬度

const material = new THREE.MeshStandardMaterial({
    map:wenliColorTexture,
    color:'#62b5eb',
    roughness:0,//15.2 粗糙度  0-1 數(shù)值越小越光滑
    // roughnessMap:0,//粗糙度貼圖  暫無(wú)資源
    metalness:1,//15.3 金屬度  0-1 數(shù)值越小越不像金屬
    // metalnessMap:0,//金屬度貼圖  暫無(wú)資源
})

法線：使得表面顯得凹凸不平，用于添加表面細(xì)節(jié)，通過(guò)設(shè)置對(duì)應(yīng)貼圖后效果是不同區(qū)域內(nèi)面對(duì)光的反射效果不同，使物體看起來(lái)更真實(shí)。無(wú)圖片資源，下面僅作門(mén)的案例展示
設(shè)置法線貼圖前

法線貼圖

設(shè)置法線貼圖后

紋理材質(zhì)資源網(wǎng)站

到這里已經(jīng)不難發(fā)現(xiàn)，再ThreeJS開(kāi)發(fā)中，各種圖片資源對(duì)于最終的效果呈現(xiàn)有著相當(dāng)重要的作用。
這里有推介的資源網(wǎng)站：

• https://www.poliigon.com/texture ，部分收費(fèi)

• https://3dtextures.me/

• http://arroway-textures.ch/textures/，注冊(cè)EPIC 虛幻引擎賬號(hào)可以免費(fèi)試用資源

紋理加載進(jìn)度-設(shè)置加載管理器 LoadingManager

LoadingManager 跟蹤已加載和待加載的數(shù)據(jù)

// 16 設(shè)置加載管理器LoadingManager   跟蹤已加載和待加載的數(shù)據(jù)
let event = {}
event.onLoad = function(){
    console.log('所有資源圖片加載完成')
}
event.onProgress = function(url,num,total){
    console.log(url+'加載完成')
    console.log('加載進(jìn)度：'+num)
    console.log('資源總數(shù)：'+total)
    console.log('加載進(jìn)度百分比：'+(num/total*100).toFixed(2)+'%')
}
event.onError = function(e){
    console.log(e)
    console.log('圖片加載錯(cuò)誤')
}
const loadingManager = new THREE.LoadingManager(
    event.onLoad,event.onProgress,event.onError
);

// 14 紋理與材質(zhì)   紋理常用屬性 顯示算法 紋理材質(zhì)的透明
// 導(dǎo)入紋理 通過(guò)圖片加載
const textureLoader = new THREE.TextureLoader(loadingManager);

環(huán)境紋理貼圖 物體環(huán)境貼圖與場(chǎng)景環(huán)境貼圖

像鏡子一樣 將周?chē)鷪?chǎng)景的圖像映射在物體上
需要設(shè)置三個(gè)軸兩個(gè)方向上的圖片屬性，共六張圖片。

// 17. 環(huán)境貼圖
const cubeTextureLoader = new THREE.CubeTextureLoader();
const envMapTetxture =  cubeTextureLoader.load([
    require('../assets/imgs/textures/envMapTetxture/px.jpg'),
    require('../assets/imgs/textures/envMapTetxture/nx.jpg'),
    require('../assets/imgs/textures/envMapTetxture/py.jpg'),
    require('../assets/imgs/textures/envMapTetxture/ny.jpg'),
    require('../assets/imgs/textures/envMapTetxture/pz.jpg'),
    require('../assets/imgs/textures/envMapTetxture/nz.jpg'),
])

const spherGeometry = new THREE.SphereBufferGeometry(1,20,20);
const material = new THREE.MeshStandardMaterial({
    metalness:0.7,//15.3 金屬度  0-1 數(shù)值越小越不像金屬
    roughness:0.1,//15.2 粗糙度  0-1 數(shù)值越小越光滑
    envMap:envMapTetxture,//17.1  物體環(huán)境貼圖
});

//17.2  場(chǎng)景環(huán)境貼圖  缺少資源  待續(xù)。。。

const sphere = new THREE.Mesh( spherGeometry, material );// 將幾何體和材質(zhì)組合為物體
scene.add( sphere );//在場(chǎng)景中添加物體

環(huán)境紋理貼圖 物體環(huán)境貼圖與場(chǎng)景環(huán)境貼圖

//17.2   給場(chǎng)景添加背景
scene.background = envMapTetxture;
//17.3   給場(chǎng)景所有物體添加默認(rèn)的環(huán)境貼圖
scene.environment = envMapTetxture;

燈光屬性

待續(xù)。。。

紋理材質(zhì)初步學(xué)習(xí)完成
總結(jié):文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-790852.html

• 創(chuàng)建場(chǎng)景
• 創(chuàng)建并添加相機(jī) 、可設(shè)置軌道控制器與阻尼
• 在場(chǎng)景中創(chuàng)建并添加物體、可設(shè)置動(dòng)畫(huà)效果(移動(dòng) 縮放 旋轉(zhuǎn)等)
  • 幾何體 多個(gè)三維坐標(biāo)點(diǎn)組成一個(gè)面或二維圖形，多個(gè)面組成一個(gè)幾何體。
    手動(dòng)標(biāo)記點(diǎn)和面生成或利用已有API生成。
  • 紋理：通過(guò)紋理API設(shè)置紋理的顏色、各種效果貼圖、偏移、旋轉(zhuǎn)、重復(fù)、透明貼圖、環(huán)境遮擋等。并設(shè)置紋理顯示算法
  • 材質(zhì) ：通過(guò)物理渲染使物體更真實(shí)。設(shè)置燈光屬性的照明與反射效果，陰影等；設(shè)置物體表面的基礎(chǔ)色、法線貼圖、高光、粗糙度及粗糙度貼圖、金屬度及金屬度貼圖等。
• 設(shè)置渲染器并渲染場(chǎng)景、監(jiān)聽(tīng)畫(huà)面變化重新渲染、輔助坐標(biāo)軸等
• GUI輕量級(jí)UI界面控制庫(kù)

到了這里，關(guān)于前端前沿web 3d可視化技術(shù) ThreeJS學(xué)習(xí)全記錄的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！