這個小案例是當(dāng)初我在學(xué)習(xí)的時候，小的一個小案例，代碼還需要進(jìn)一步優(yōu)化；還請諒解~~；主要用到了threeJS創(chuàng)建mesh，創(chuàng)建平面，設(shè)置mesh的平移，旋轉(zhuǎn)、縮放、自傳、透明度、拉伸等這些小功能；

采用的是正交投影攝像機(jī)?？赡艹鯇W(xué)者看到這個案例，想寫其中的某一個小功能可能會有點(diǎn)蒙，不要著急，后面我會持續(xù)更新，把每個小功能的demo寫出來分享給大家。和大家一起學(xué)習(xí)，共同進(jìn)步。也希望大家可以給出一些建議！！非常感謝~~

1? 需要加載這些相關(guān)的js文件

2? ?下面是實現(xiàn)的一些小功能

3? ?下面是相關(guān)代碼，代碼還沒有優(yōu)化，請諒解~~(具體的每一個小功能后面我都會進(jìn)行一一講解)

body {

margin: 0;

overflow: hidden;

/* 隱藏body窗口區(qū)域滾動條 */

}

// once everything is loaded, we run our Three.js stuff.

$(function () {

var stats = initStats();

// create a scene, that will hold all our elements such as objects, cameras and lights.

var scene = new THREE.Scene();

// create a camera, which defines where we're looking at.

var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

// create a render and set the size

var renderer;

var webGLRenderer = new THREE.WebGLRenderer();

webGLRenderer.setClearColorHex(0xEEEEEE, 1.0);

webGLRenderer.setSize(window.innerWidth, window.innerHeight);

webGLRenderer.shadowMapEnabled = true;

var canvasRenderer = new THREE.CanvasRenderer();

canvasRenderer.setSize(window.innerWidth, window.innerHeight);

renderer = webGLRenderer;

var groundGeom = new THREE.PlaneGeometry(100, 100, 4, 4);

var groundMesh = new THREE.Mesh(groundGeom, new THREE.MeshBasicMaterial({ color: 0x777777 }));

groundMesh.rotation.x = -Math.PI / 2;

groundMesh.position.y = -20;

scene.add(groundMesh);

var sphereGeometry = new THREE.SphereGeometry(14, 20, 20);

var cubeGeometry = new THREE.CubeGeometry(15, 15, 15);

var planeGeometry = new THREE.PlaneGeometry(14, 14, 4, 4);

var meshMaterial = new THREE.MeshNormalMaterial({ color: 0x7777ff });

var sphere = new THREE.Mesh(sphereGeometry, meshMaterial);

var cube = new THREE.Mesh(cubeGeometry, meshMaterial);

var plane = new THREE.Mesh(planeGeometry, meshMaterial);

// position the sphere

sphere.position.x = 0;

sphere.position.y = 3;

sphere.position.z = 2;

for (var f = 0, fl = sphere.geometry.faces.length; f < fl; f++) {

var face = sphere.geometry.faces[f];

var arrow = new THREE.ArrowHelper(

face.normal,

face.centroid,

2,

0x3333FF);

sphere.add(arrow);

}

cube.position = sphere.position;

plane.position = sphere.position;

// add the sphere to the scene

scene.add(cube);

// position and point the camera to the center of the scene

camera.position.x = -20;

camera.position.y = 30;

camera.position.z = 40;

camera.lookAt(new THREE.Vector3(10, 0, 0));

// add subtle ambient lighting

var ambientLight = new THREE.AmbientLight(0x0c0c0c);

scene.add(ambientLight);

// add spotlight for the shadows

var spotLight = new THREE.SpotLight(0xffffff);

spotLight.position.set(-40, 60, -10);

spotLight.castShadow = true;

scene.add(spotLight);

// add the output of the renderer to the html element

$("#WebGL-output").append(renderer.domElement);

// call the render function

var step = 0;

var oldContext = null;

var controls = new function () {

this.rotationSpeed = 0.02;

this.bouncingSpeed = 0.03;

this.opacity = meshMaterial.opacity;

this.transparent = meshMaterial.transparent;

this.visible = meshMaterial.visible;

this.side = "front";

this.wireframe = meshMaterial.wireframe;

this.wireframeLinewidth = meshMaterial.wireframeLinewidth;

this.selectedMesh = "cube";

this.shadow = "flat";

}

var gui = new dat.GUI();

var spGui = gui.addFolder("Mesh");

spGui.add(controls, 'opacity', 0, 1).onChange(function (e) {

meshMaterial.opacity = e

});

spGui.add(controls, 'transparent').onChange(function (e) {

meshMaterial.transparent = e

});

spGui.add(controls, 'wireframe').onChange(function (e) {

meshMaterial.wireframe = e

});

spGui.add(controls, 'wireframeLinewidth', 0, 20).onChange(function (e) {

meshMaterial.wireframeLinewidth = e

});

spGui.add(controls, 'visible').onChange(function (e) {

meshMaterial.visible = e

});

spGui.add(controls, 'side', ["front", "back", "double"]).onChange(function (e) {

console.log(e);

switch (e) {

case "front":

meshMaterial.side = THREE.FrontSide;

break;

case "back":

meshMaterial.side = THREE.BackSide;

break;

case "double":

meshMaterial.side = THREE.DoubleSide

break;

}

meshMaterial.needsUpdate = true;

});

spGui.add(controls, 'shadow', ["flat", "smooth"]).onChange(function (e) {

switch (e) {

case "flat":

// https://github.com/mrdoob/three.js/issues/1929

meshMaterial.shading = THREE.FlatShading;

break;

case "smooth":

meshMaterial.shading = THREE.SmoothShading;

break;

}

var oldPos = sphere.position.clone();

scene.remove(sphere);

scene.remove(plane);

scene.remove(cube);

sphere = new THREE.Mesh(sphere.geometry.clone(), meshMaterial);

cube = new THREE.Mesh(cube.geometry.clone(), meshMaterial);

plane = new THREE.Mesh(plane.geometry.clone(), meshMaterial);

sphere.position = oldPos;

cube.position = oldPos;

plane.position = oldPos;

switch (controls.selectedMesh) {

case "cube":

scene.add(cube);

break;

case "sphere":

scene.add(sphere);

break;

case "plane":

scene.add(plane);

break;

}

meshMaterial.needsUpdate = true;

console.log(meshMaterial);

});

spGui.add(controls, 'selectedMesh', ["cube", "sphere", "plane"]).onChange(function (e) {

scene.remove(plane);

scene.remove(cube);

scene.remove(sphere);

switch (e) {

case "cube":

scene.add(cube);

break;

case "sphere":

scene.add(sphere);

break;

case "plane":

scene.add(plane);

break;

}

scene.add(e);

});

render();

function render() {

stats.update();

cube.rotation.y = step += 0.01;

plane.rotation.y = step;

sphere.rotation.y = step;

// render using requestAnimationFrame

requestAnimationFrame(render);

renderer.render(scene, camera);

}

function initStats() {

var stats = new Stats();

stats.setMode(0); // 0: fps, 1: ms

// Align top-left

stats.domElement.style.position = 'absolute';

stats.domElement.style.left = '0px';

stats.domElement.style.top = '0px';

$("#Stats-output").append(stats.domElement);

return stats;

}

});

/**

* 創(chuàng)建場景對象Scene

*/

var scene = new THREE.Scene();

/**

* 創(chuàng)建網(wǎng)格模型

*/

//創(chuàng)建第一個方塊

var geometry = new THREE.BoxGeometry(100, 100, 100); //創(chuàng)建一個立方體幾何對象Geometry

var material = new THREE.MeshLambertMaterial({

color: 0x0000ff

}); //材質(zhì)對象Material

var mesh = new THREE.Mesh(geometry, material); //網(wǎng)格模型對象Mesh

scene.add(mesh); //網(wǎng)格模型添加到場景中

// 設(shè)置產(chǎn)生投影的網(wǎng)格模型

mesh.castShadow = true;

//創(chuàng)建第二個方塊

var geometry2 = new THREE.BoxGeometry(100, 100, 100); //創(chuàng)建一個立方體幾何對象Geometry

var material2 = new THREE.MeshLambertMaterial({

color: 0x0000ff

}); //材質(zhì)對象Material

var mesh2 = new THREE.Mesh(geometry2, material2); //網(wǎng)格模型對象Mesh

mesh2.translateY(200);//方塊二沿y軸正方向平移40

scene.add(mesh2); //網(wǎng)格模型添加到場景中

//創(chuàng)建第三個方塊

var geometry3 = new THREE.BoxGeometry(100, 100, 100); //創(chuàng)建一個立方體幾何對象Geometry

var material3 = new THREE.MeshLambertMaterial({

color: 0x0000ff,

transparent: true,//開啟透明度

opacity: 0.5,//設(shè)置透明度具體值

}); //材質(zhì)對象Material

var mesh3 = new THREE.Mesh(geometry3, material3); //網(wǎng)格模型對象Mesh

mesh3.translateY(400);//方塊二沿y軸正方向平移80

scene.add(mesh3); //網(wǎng)格模型添加到場景中

//創(chuàng)建第四個方塊

var geometry4 = new THREE.BoxGeometry(100, 100, 100); //創(chuàng)建一個立方體幾何對象Geometry

var material4 = new THREE.MeshLambertMaterial({

color: 0x0000ff,

transparent: true,//開啟透明度

opacity: 0.5,//設(shè)置透明度具體值

}); //材質(zhì)對象Material

var mesh4 = new THREE.Mesh(geometry4, material4); //網(wǎng)格模型對象Mesh

mesh4.translateY(600);//方塊二沿y軸正方向平移120

scene.add(mesh4); //網(wǎng)格模型添加到場景中

//創(chuàng)建第五個方塊

var geometry5 = new THREE.BoxGeometry(100, 100, 100); //創(chuàng)建一個立方體幾何對象Geometry

var material5 = new THREE.MeshLambertMaterial({

color: 0x0000ff

}); //材質(zhì)對象Material

var mesh5 = new THREE.Mesh(geometry5, material5); //網(wǎng)格模型對象Mesh

mesh5.translateY(800);//方塊二沿y軸正方向平移160

scene.add(mesh5); //網(wǎng)格模型添加到場景中

//創(chuàng)建第六個方塊

var geometry6 = new THREE.BoxGeometry(100, 100, 100); //創(chuàng)建一個立方體幾何對象Geometry

var material6 = new THREE.MeshLambertMaterial({

color: 0x0000ff

}); //材質(zhì)對象Material

var mesh6 = new THREE.Mesh(geometry6, material6); //網(wǎng)格模型對象Mesh

mesh6.translateX(200);//方塊二沿y軸正方向平移40

scene.add(mesh6); //網(wǎng)格模型添加到場景中

mesh6.castShadow = true;

//創(chuàng)建第七個方塊

var geometry7 = new THREE.BoxGeometry(100, 100, 100); //創(chuàng)建一個立方體幾何對象Geometry

var material7 = new THREE.MeshLambertMaterial({

color: 0x0000ff

}); //材質(zhì)對象Material

var mesh7 = new THREE.Mesh(geometry7, material7); //網(wǎng)格模型對象Mesh

mesh7.translateX(400);//方塊二沿y軸正方向平移80

scene.add(mesh7); //網(wǎng)格模型添加到場景中

mesh7.castShadow = true;

//創(chuàng)建第八個方塊

var geometry8 = new THREE.BoxGeometry(100, 100, 100); //創(chuàng)建一個立方體幾何對象Geometry

var material8 = new THREE.MeshLambertMaterial({

color: 0x0000ff

}); //材質(zhì)對象Material

var mesh8 = new THREE.Mesh(geometry8, material8); //網(wǎng)格模型對象Mesh

mesh8.translateX(600);//方塊二沿y軸正方向平移120

scene.add(mesh8); //網(wǎng)格模型添加到場景中

mesh8.castShadow = true;

//創(chuàng)建第九個方塊

var geometry9 = new THREE.BoxGeometry(100, 100, 100); //創(chuàng)建一個立方體幾何對象Geometry

var material9 = new THREE.MeshLambertMaterial({

color: 0x0000ff

}); //材質(zhì)對象Material

var mesh9 = new THREE.Mesh(geometry9, material9); //網(wǎng)格模型對象Mesh

mesh9.translateX(800);//方塊二沿y軸正方向平移160

scene.add(mesh9); //網(wǎng)格模型添加到場景中

mesh9.castShadow = true;

//創(chuàng)建第十個方塊

var geometry10 = new THREE.BoxGeometry(200, 200, 200); //創(chuàng)建一個立方體幾何對象Geometry

var material10 = new THREE.MeshLambertMaterial({

color: 0x0000ff

}); //材質(zhì)對象Material

var newMesh = new THREE.Mesh(geometry10, material10); //網(wǎng)格模型對象Mesh

newMesh.copy(mesh);

//相比mesh而言，在平移

newMesh.translateX(-500);//方塊二沿y軸正方向平移300

scene.add(newMesh); //網(wǎng)格模型添加到場景中

// 通過Path類的線條繪制方法方法定義輪廓

var shape = new THREE.Shape();

shape.moveTo(0, 0); //起點(diǎn)

shape.lineTo(0, 100); //第2點(diǎn)

shape.lineTo(100, 100); //第3點(diǎn)

shape.lineTo(100, 0); //第4點(diǎn)

shape.lineTo(0, 0); //第5點(diǎn)

var geometry11 = new THREE.ExtrudeGeometry( //拉伸造型

shape, //二維輪廓

//拉伸參數(shù)

{

amount: 300, //拉伸長度

}

);

var material11 = new THREE.MeshPhongMaterial({

color: 0x0000ff,

side: THREE.DoubleSide, //兩面可見

// wireframe: true,

}); //材質(zhì)對象

var mesh11 = new THREE.Mesh(geometry11, material11); //網(wǎng)格模型對象

mesh11.translateY(-500);//方塊二沿y軸正方向平移40

scene.add(mesh11); //網(wǎng)格模型添加到場景中

// 輔助坐標(biāo)系

var axisHelper = new THREE.AxisHelper(250);

scene.add(axisHelper);

/**

* 光源設(shè)置

*/

//點(diǎn)光源

var point = new THREE.PointLight(0xffffff);

point.position.set(40, 40, 30); //點(diǎn)光源位置

scene.add(point); //點(diǎn)光源添加到場景中

//環(huán)境光

var ambient = new THREE.AmbientLight(0x444444);

scene.add(ambient);

//創(chuàng)建一個平面幾何體作為投影面

var planeGeometry = new THREE.PlaneGeometry(2000, 2000);

var planeMaterial = new THREE.MeshLambertMaterial({

color: 0x999999

}); //材質(zhì)對象Material

// 平面網(wǎng)格模型作為投影面

var planeMesh = new THREE.Mesh(planeGeometry, planeMaterial); //網(wǎng)格模型對象Mesh

scene.add(planeMesh); //網(wǎng)格模型添加到場景中

planeMesh.rotateX(-Math.PI / 2); //旋轉(zhuǎn)網(wǎng)格模型

planeMesh.position.y = -50; //設(shè)置網(wǎng)格模型y坐標(biāo)

// 設(shè)置接收陰影的投影面

planeMesh.receiveShadow = true;

// 方向光

var directionalLight = new THREE.DirectionalLight(0xffffff, 1);

// 設(shè)置光源位置

directionalLight.position.set(60, 60, 60);

scene.add(directionalLight);

// 設(shè)置用于計算陰影的光源對象

directionalLight.castShadow = true;

// 設(shè)置計算陰影的區(qū)域，最好剛好緊密包圍在對象周圍

// 計算陰影的區(qū)域過大：模糊 過小：看不到或顯示不完整

directionalLight.shadow.camera.near = 0.5;

directionalLight.shadow.camera.far = 300;

directionalLight.shadow.camera.left = -50;

directionalLight.shadow.camera.right = 50;

directionalLight.shadow.camera.top = 200;

directionalLight.shadow.camera.bottom = -100;

// 設(shè)置mapSize屬性可以使陰影更清晰，不那么模糊

// directionalLight.shadow.mapSize.set(1024,1024)

console.log(directionalLight.shadow.camera);

/**

* 相機(jī)設(shè)置

*/

var width = window.innerWidth; //窗口寬度

var height = window.innerHeight; //窗口高度

var k = width / height; //窗口寬高比

var s = 1000; //三維場景顯示范圍控制系數(shù)，系數(shù)越大，顯示的范圍越大

//創(chuàng)建相機(jī)對象

var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 2000);

camera.position.set(200, 300, 200); //設(shè)置相機(jī)位置

camera.lookAt(scene.position); //設(shè)置相機(jī)方向(指向的場景對象)

//實現(xiàn)相機(jī)切換

this.switchCamera = function () {

if (camera instanceof THREE.PerspectiveCamera) {

camera = new THREE.OrthographicCamera(window.innerWidth / -16, window.innerWidth / 16, window.innerHeight / 16, window.innerHeight / -16, -200, 500);

camera.position.x = 120;

camera.position.y = 60;

camera.position.z = 180;

camera.lookAt(scene.position);

this.perspective = "Orthographic";

} else {

camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

camera.position.x = 120;

camera.position.y = 60;

camera.position.z = 180;

camera.lookAt(scene.position);

this.perspective = "Perspective";

}

};//代碼放入GUI工具中，可以在頁面上動態(tài)切換相機(jī)

//聲明raycaster和mouse變量

var raycaster = new THREE.Raycaster();

console.log(raycaster);

var mouse = new THREE.Vector2();

function onMouseClick(event) {

//通過鼠標(biāo)點(diǎn)擊的位置計算出raycaster所需要的點(diǎn)的位置，以屏幕中心為原點(diǎn)，值的范圍為-1到1.

mouse.x = (event.clientX / window.innerWidth) * 2 - 1;

mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;

// 通過鼠標(biāo)點(diǎn)的位置和當(dāng)前相機(jī)的矩陣計算出raycaster

raycaster.setFromCamera(mouse, camera);

// 獲取raycaster直線和所有模型相交的數(shù)組集合

var intersects = raycaster.intersectObjects(scene.children);

console.log(intersects[i].object);

console.log(intersects);

//將所有的相交的模型的顏色設(shè)置為紅色，如果只需要將第一個觸發(fā)事件，那就數(shù)組的第一個模型改變顏色即可

for (var i = 0; i < intersects.length; i++) {

//ransparent: true;//開啟透明度

//acity: 0.5//設(shè)置透明度具體值

intersects[i].object.material.color.set(0xff0000);

// console.log(intersects[i].object);

// 因為sphereMaterial.opacity和sphere.material.opacity值是相等的，所以只判斷一個

// if (sphereMaterial.opacity > 0) {

// sphereMaterial.opacity -= 0.05;

// sphere.material.opacity -= 0.05;

// }

// else {

// sphere.material.transparent = true;

// clearInterval(timer);

// }

}

}

window.addEventListener('click', onMouseClick, false);

//初始化dat.GUI簡化試驗流程

var gui;

function initGui() {

//聲明一個保存需求修改的相關(guān)數(shù)據(jù)的對象

controls = {

};

var gui = new dat.GUI();

}

//初始化性能插件

var stats;

function initStats() {

stats = new Stats();

document.body.appendChild(stats.dom);

}

//用戶交互插件 鼠標(biāo)左鍵按住旋轉(zhuǎn)，右鍵按住平移，滾輪縮放

var controls;

function initControls() {

controls = new THREE.OrbitControls(camera, renderer.domElement);

// 如果使用animate方法時，將此函數(shù)刪除

//controls.addEventListener( 'change', render );

// 使動畫循環(huán)使用時阻尼或自轉(zhuǎn) 意思是否有慣性

controls.enableDamping = true;

//動態(tài)阻尼系數(shù) 就是鼠標(biāo)拖拽旋轉(zhuǎn)靈敏度

//controls.dampingFactor = 0.25;

//是否可以縮放

controls.enableZoom = true;

//是否自動旋轉(zhuǎn)

controls.autoRotate = false;

//設(shè)置相機(jī)距離原點(diǎn)的最遠(yuǎn)距離

controls.minDistance = 50;

//設(shè)置相機(jī)距離原點(diǎn)的最遠(yuǎn)距離

controls.maxDistance = 1000;

//是否開啟右鍵拖拽

controls.enablePan = true;

}

//窗口變動觸發(fā)的函數(shù)

function onWindowResize() {

camera.aspect = window.innerWidth / window.innerHeight;

camera.updateProjectionMatrix();

render();

renderer.setSize(window.innerWidth, window.innerHeight);

}

function animate() {

//更新控制器

render();

//更新性能插件

stats.update();

//controls.update();

requestAnimationFrame(animate);

}

function draw() {

initGui();

initControls();

initStats();

animate();

window.onresize = onWindowResize;

}

/**

* 創(chuàng)建渲染器對象

*/

var renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });

renderer.setSize(width, height);//設(shè)置渲染區(qū)域尺寸

renderer.setClearColor(0xb9d3ff, 1); //設(shè)置背景顏色

renderer.shadowMapEnabled = true;

document.body.appendChild(renderer.domElement); //body元素中插入canvas對象

scene.add(ambient);

//執(zhí)行渲染操作 指定場景、相機(jī)作為參數(shù)

renderer.render(scene, camera);

// 渲染函數(shù)

function render() {

renderer.render(scene, camera); //執(zhí)行渲染操作

mesh8.rotateY(0.01);//每次繞y軸旋轉(zhuǎn)0.01弧度

requestAnimationFrame(render); //請求再次執(zhí)行渲染函數(shù)render，渲染下一幀

}

render();

//通過x,y,z指定旋轉(zhuǎn)中心，obj是要旋轉(zhuǎn)的對象

//function changePivot(x, y, z, obj) {

// let wrapper = new THREE.Object3D();

//wrapper.position.set(250, 250, 250);

//wrapper.add(mesh8);

//mesh8.position.set(x, y, z);

//return wrapper;

//}

//changePivot();

//創(chuàng)建控件對象 相機(jī)對象camera作為參數(shù) 控件可以監(jiān)聽鼠標(biāo)的變化，改變相機(jī)對象的屬性

var controls = new THREE.OrbitControls(camera);

// onresize 事件會在窗口被調(diào)整大小時發(fā)生

window.onresize = function () {

// 重置渲染器輸出畫布canvas尺寸

renderer.setSize(width, height);

// 重置相機(jī)投影的相關(guān)參數(shù)

k = window.innerWidth / window.innerHeight;//窗口寬高比

camera.left = -s * k;

camera.right = s * k;

camera.top = s;

camera.bottom = -s;

// 渲染器執(zhí)行render方法的時候會讀取相機(jī)對象的投影矩陣屬性projectionMatrix

// 但是不會每渲染一幀，就通過相機(jī)的屬性計算投影矩陣(節(jié)約計算資源)

// 如果相機(jī)的一些屬性發(fā)生了變化，需要執(zhí)行updateProjectionMatrix ()方法更新相機(jī)的投影矩陣

camera.updateProjectionMatrix();

};

// onresize 事件會在窗口被調(diào)整大小時發(fā)生

window.onresize = function () {

// 重置渲染器輸出畫布canvas尺寸

renderer.setSize(width, height);

// 全屏情況下：設(shè)置觀察范圍長寬比aspect為窗口寬高比

camera.aspect = window.innerWidth / window.innerHeight;

// 渲染器執(zhí)行render方法的時候會讀取相機(jī)對象的投影矩陣屬性projectionMatrix

// 但是不會每渲染一幀，就通過相機(jī)的屬性計算投影矩陣(節(jié)約計算資源)

// 如果相機(jī)的一些屬性發(fā)生了變化，需要執(zhí)行updateProjectionMatrix ()方法更新相機(jī)的投影矩陣

camera.updateProjectionMatrix();

};

//創(chuàng)建控件對象 相機(jī)對象camera作為參數(shù) 控件可以監(jiān)聽鼠標(biāo)的變化，改變相機(jī)對象的屬性

var control = new THREE.OrbitControls(camera);

//監(jiān)聽鼠標(biāo)事件，觸發(fā)渲染函數(shù)，更新canvas畫布渲染效果

control.addEventListener('change', render);

總結(jié)

以上是生活随笔為你收集整理的mesh threejs 属性_threeJS创建mesh，创建平面，设置mesh的平移，旋转、缩放、自传、透明度、拉伸...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。