Three.js中⽹格对象MESH的属性与⽅法详解
前⾔
本⽂主要给⼤家介绍了关于Three.js⽹格对象MESH的属性与⽅法，分享出来供⼤家参考学习，下⾯话不多说了，来⼀起看看详细的介绍：
创建⼀个⽹格需要⼀个⼏何体，以及⼀个或多个材质。当⽹格创建好之后，我们就可以将它添加到场景中并进⾏渲染。⽹格对象提供了⼏个属性和⽅法⽤于改变它在场景中的位置和显⽰效果。rabbithole
如下：
还有⼀个属性就是visible属性，默认为true，如果设置为fal，THREE.Mesh将不渲染到场景中。
mesh对象的前三个属性position，rotation和scale有三种设置⽅法。
第⼀种，直接设置相关坐标轴
cube.position.x = 5;
cube.position.y = 6;
cube.position.z = 7;
望风
第⼆种，⼀次性设置x，y和z坐标的值
cube.position.t(5,6,7); //效果同第⼀种
第三种，因为它们都是⼀个THREE.Vector3对象，所以我们可以直接赋值⼀个新的对象给它
cube.position = new THREE.Vector3(5,6,7); //效果同上
为了形象的显⽰这些效果，我书写了⼀个案例：
meggings这个效果是使⽤dat.GUI实现的效果，具体效果⾃⼰将代码下载下来测试即可：
<!DOCTYPE html>
<html lang="en">
<head>
<meta chart="UTF-8">
<title>Title</title>
<style type="text/css">
html, body {
margin: 0;
height: 100%;
}
canvas {
display: block;half
}
</style>
</head>
<body onload="draw();">
</body>
<script src="build/three.js"></script>
<script src="examples/js/controls/OrbitControls.js"></script>
<script src="examples/js/libs/stats.min.js"></script>
<script src="examples/js/libs/dat.gui.min.js"></script>
<script>
var renderer;
function initRender() {
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.tSize(window.innerWidth, window.innerHeight);
/
/告诉渲染器需要阴影效果
abled = true;
pe = THREE.PCFSoftShadowMap; // 默认的是，没有设置的这个清晰 THREE.PCFShadowMap
document.body.appendChild(renderer.domElement);
}
var camera;
function initCamera() {
camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000); camera.position.t(0, 40, 100);
camera.lookAt(new THREE.Vector3(0,0,0));
}
var scene;
function initScene() {
scene = new THREE.Scene();
}
//初始化dat.GUI简化试验流程
var ttings;
function initGui() {
//声明⼀个保存需求修改的相关数据的对象
ttings = {
positionX:0,
positionY:5,
positionZ:0,
rotationX:0,
rotationY:0,
rotationZ:0,
scaleX:1,
scaleY:1,
scaleZ:1,
translateX:0,
translateY:0,
translateZ:0,
translate:function () {
/
/anslateZ);
ttings.positionX = cube.position.x;
ttings.positionY = cube.position.y;
ttings.positionZ = cube.position.z;
},
visible:true
};
//初始化gui
var gui = new dat.GUI();
var position = gui.addFolder("position");
position.add(ttings,"positionX",-30,30).listen();
position.add(ttings,"positionY",-30,30).listen();
position.add(ttings,"positionZ",-30,30).listen();
var scale = gui.addFolder("scale");
scale.add(ttings,"scaleX",0.01,5);
scale.add(ttings,"scaleY",0.01,5);
scale.add(ttings,"scaleZ",0.01,5);
var rotation = gui.addFolder("rotation");
rotation.add(ttings,"rotationX",-2*Math.PI,2*Math.PI);
rotation.add(ttings,"rotationY",-2*Math.PI,2*Math.PI);
rotation.add(ttings,"rotationZ",-2*Math.PI,2*Math.PI);
var translate = gui.addFolder("translate");
translate.add(ttings,"translateX",-5,5);
translate.add(ttings,"translateY",-5,5);
粤语翻译
translate.add(ttings,"translateZ",-5,5);
translate.add(ttings,"translate");
gui.add(ttings,"visible");
}
var light;
function initLight() {
scene.add(new THREE.AmbientLight(0x444444));
light = new THREE.PointLight(0xffffff);
light.position.t(15,30,10);
//告诉平⾏光需要开启阴影投射
light.castShadow = true;
scene.add(light);
}
var cube;
function initModel() {
//辅助⼯具
var helper = new THREE.AxisHelper(10);
scene.add(helper);
//⽴⽅体
var cubeGeometry = new THREE.CubeGeometry(10,10,10);
var cubeMaterial = new THREE.MeshLambertMaterial({color:0x00ffff});
cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
//告诉⽴⽅体需要投射阴影
cube.castShadow = true;
scene.add(cube);
//底部平⾯
var planeGeometry = new THREE.PlaneGeometry(100,100);
var planeMaterial = new THREE.MeshStandardMaterial({color:0xaaaaaa}); var plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.position.y = -0;
//告诉底部平⾯需要接收阴影
scene.add(plane);
}
//初始化性能插件
var stats;
classic是什么意思
function initStats() {
vietnam是什么意思stats = new Stats();
document.body.appendChild(stats.dom);
}
//⽤户交互插件⿏标左键按住旋转，右键按住平移，滚轮缩放
var controls;
function initControls() {
controls = new THREE.OrbitControls( camera, renderer.domElement );
// 如果使⽤animate⽅法时，将此函数删除
//controls.addEventListener( 'change', render );
// 使动画循环使⽤时阻尼或⾃转意思是否有惯性
//动态阻尼系数就是⿏标拖拽旋转灵敏度
//controls.dampingFactor = 0.25;
/gdg
/是否可以缩放
//是否⾃动旋转
controls.autoRotate = fal;
//设置相机距离原点的最远距离
controls.minDistance = 100;
//设置相机距离原点的最远距离
controls.maxDistance = 200;
//是否开启右键拖拽
}
function render() {
}
//窗⼝变动触发的函数
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.tSize( window.innerWidth, window.innerHeight );
}
function animate() {
//更新控制器
vermouth
render();
//更新性能插件
stats.update();
//更新相关位置
cube.position.t(ttings.positionX,ttings.positionY,ttings.positionZ);
cube.scale.t(ttings.scaleX,ttings.scaleY,ttings.scaleZ);
cube.visible = ttings.visible;
controls.update();
requestAnimationFrame(animate);
}
strokefunction draw() {
initGui();
initRender();
initScene();
initCamera();
initLight();
initModel();
initControls();
initStats();
animate();
}
</script>
</html>
总结
以上就是这篇⽂章的全部内容了，希望本⽂的内容对⼤家学习或者使⽤Three.js具有⼀定的参考学习价值，如果有疑问⼤家可以留⾔交流，谢谢⼤家对的⽀持。
