Maison >interface Web >js tutoriel >Three.js utilise des méthodes d'instance de composition d'objets
Three.js utilise des méthodes d'instance de composition d'objets
- 小云云original
- 2018-03-14 17:32:222964parcourir
Mettre plusieurs modèles dans un groupe est une combinaison d'objets. La création de groupes est très simple, chaque grille que vous créez peut contenir des éléments enfants, et des éléments enfants peuvent être ajoutés à l'aide de la fonction add. L'ajout d'éléments enfants à un groupe a pour effet que vous pouvez déplacer, mettre à l'échelle, faire pivoter et transformer l'objet parent, et tous les objets enfants seront affectés.
Implémentation de la combinaison d'objets
La combinaison d'objets est facile à implémenter. Créez d'abord un objet de classe THREE.Object3D. Il s'agit de la classe de base pour THREE.Mesh et THREE.Scene, mais elle ne contient rien en elle-même et ne restitue rien. Notez qu'un nouvel objet nommé THREE.js a été introduit dans la dernière version de THREE.Group pour prendre en charge le regroupement. Cet objet est identique à l'objet THREE.Object3D et les deux sont interchangeables.
var group = new THREE.Object3D(); //实例化一个THREE.Object3D对象
group.add(sphere); //在对象里面添加第一个子元素
group.add(cube); //在对象里面添加第二个子元素
scene.add(group); //将对象组添加到场景当中Le code est comme ci-dessus, et nous avons implémenté un groupe de scènes.
Remarque : Lorsque vous faites pivoter un groupe, vous ne faites pas pivoter chaque objet du groupe individuellement, mais faites plutôt pivoter l'ensemble du groupe autour de son centre (dans notre cas, autour du centre de l'group objet l'ensemble groupe).
Lorsque vous utilisez des groupes, vous pouvez toujours référencer, modifier et positionner chaque géométrie individuelle. La seule chose à retenir est que tous les positionnements, rotations et transformations sont relatifs à l'objet parent.
Code de cas
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
html, body { margin: 0; height: 100%; }
canvas { display: block; }
</style></head><body onload="draw();"></body><script src="/lib/three.js"></script><script src="/lib/js/controls/OrbitControls.js"></script><script src="/lib/js/libs/stats.min.js"></script><script src="/lib/js/libs/dat.gui.min.js"></script><script>
var renderer; function initRender() {
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(window.innerWidth, window.innerHeight); //告诉渲染器需要阴影效果
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = 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.set(0, 40, 50);
camera.lookAt(new THREE.Vector3(0,0,0));
} var scene; function initScene() {
scene = new THREE.Scene();
} //初始化dat.GUI简化试验流程
var gui; function initGui() {
//声明一个保存需求修改的相关数据的对象
gui = {
sphereX:-5, //球的x轴的位置
sphereY:5, //球的y轴的位置
sphereZ:0, //球的z轴的位置
sphereScale:1, //球的缩放
cubeX:15, //立方体的x轴位置
cubeY:5, //立方体的y轴位置
cubeZ:-5, //立方体的z轴的位置
cubeScale:1, //立方体的缩放
groupX:0, //模型组的x轴位置
groupY:0, //模型组的y轴位置
groupZ:0, //模型组的z轴的位置
groupScale:1, //模型组的缩放
grouping:false, //是否整个模型组旋转
rotate:false, //是否旋转
}; var datGui = new dat.GUI(); //将设置属性添加到gui当中，gui.add(对象，属性，最小值，最大值）
//球型的操作
var sphereFolder = datGui.addFolder("sphere");
sphereFolder.add(gui,"sphereX",-30,30).onChange(function (e) {
sphere.position.x = e;
});
sphereFolder.add(gui,"sphereY",-30,30).onChange(function (e) {
sphere.position.y = e;
});
sphereFolder.add(gui,"sphereZ",-30,30).onChange(function (e) {
sphere.position.z = e;
});
sphereFolder.add(gui,"sphereScale",0,3).onChange(function (e) {
sphere.scale.set(e, e, e);
}); //立方体的操作
var cubeFolder = datGui.addFolder("cube");
cubeFolder.add(gui,"cubeX",-30,30).onChange(function (e) {
cube.position.x = e;
});
cubeFolder.add(gui,"cubeY",-30,30).onChange(function (e) {
cube.position.y = e;
});
cubeFolder.add(gui,"cubeZ",-30,30).onChange(function (e) {
cube.position.z = e;
});
cubeFolder.add(gui,"cubeScale",0,3).onChange(function (e) {
cube.scale.set(e, e, e);
}); //场景组的操作
var groupFolder = datGui.addFolder("group");
groupFolder.add(gui,"groupX",-30,30).onChange(function (e) {
group.position.x = e;
});
groupFolder.add(gui,"groupY",-30,30).onChange(function (e) {
group.position.y = e;
});
groupFolder.add(gui,"groupZ",-30,30).onChange(function (e) {
group.position.z = e;
});
groupFolder.add(gui,"groupScale",0,3).onChange(function (e) {
group.scale.set(e, e, e);
}); //添加旋转功能
datGui.add(gui, "grouping");
datGui.add(gui, "rotate");
} var light; function initLight() {
scene.add(new THREE.AmbientLight(0x444444));
light = new THREE.PointLight(0xffffff);
light.position.set(15,50,10); //告诉平行光需要开启阴影投射
light.castShadow = true;
scene.add(light);
} var sphere,cube,group; function initModel() {
//模型组
group = new THREE.Object3D();
scene.add(group); //球
var sphereGeometry = new THREE.SphereGeometry(5,200,200); var sphereMaterial = new THREE.MeshLambertMaterial({color:0xaaaaaa});
sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphere.position.x = -5;
sphere.position.y = 5; //告诉球需要投射阴影
sphere.castShadow = true;
group.add(sphere); //辅助工具
var helper = new THREE.AxisHelper(50);
scene.add(helper); //立方体
var cubeGeometry = new THREE.CubeGeometry(10,10,8); var cubeMaterial = new THREE.MeshLambertMaterial({color:0x00ffff});
cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.x = 15;
cube.position.y = 5;
cube.position.z = -5; //告诉立方体需要投射阴影
cube.castShadow = true;
group.add(cube); //底部平面
var planeGeometry = new THREE.PlaneGeometry(100,100); var planeMaterial = new THREE.MeshStandardMaterial({color:0xaaaaaa}); var plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotation.x = - 0.5 * Math.PI;
plane.position.y = -0; //告诉底部平面需要接收阴影
plane.receiveShadow = true;
scene.add(plane);
} //初始化性能插件
var stats; function initStats() {
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.enableDamping = true; //动态阻尼系数 就是鼠标拖拽旋转灵敏度
//controls.dampingFactor = 0.25;
//是否可以缩放
controls.enableZoom = true; //是否自动旋转
controls.autoRotate = false; //设置相机距离原点的最远距离
controls.minDistance = 100; //设置相机距离原点的最远距离
controls.maxDistance = 200; //是否开启右键拖拽
controls.enablePan = true;
} var step = 0.02; //模型旋转的速度
function render() {
//判断当前是否自动旋转
if(gui.rotate){ //判断是单个模型自转，还是模型组自转
if(gui.grouping){
group.rotation.y += step;
} else{
sphere.rotation.y += step;
cube.rotation.y += step;
}
}
renderer.render( scene, camera );
} //窗口变动触发的函数
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();
initRender();
initScene();
initCamera();
initLight();
initModel();
initControls();
initStats();
animate();
window.onresize = onWindowResize;
}</script></html>Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Articles Liés
Voir plus- Une analyse approfondie du composant de groupe de liste Bootstrap
- Explication détaillée du currying de la fonction JavaScript
- Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
- Angularjs intègre l'interface utilisateur WeChat (weui)
- Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript