three添加和移除對象

時間 2019-11-19

標籤添加移除對象简体版

原文原文鏈接

建立場景
在第一章的地方就講過怎麼樣建立一個最基本的場景，這裏不重複了
html:部分css

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.bootcss.com/three.js/92/three.min.js"></script>
<script src="https://threejs.org/examples/js/libs/stats.min.js"></script>
<script src="https://threejs.org/examples/js/controls/TrackballControls.js"></script>
<script src="https://threejs.org/examples/js/libs/dat.gui.min.js"></script>
<title>場景</title>
<style>
body{
margin:0;padding:0;
overflow:hidden;
}
</style>
</head>
<body>
<div id="WebGL-output"></div>
</body>
js:部分html

var scene,camera,renderer,axes;
function init(){
scene = new THREE.Scene();app

camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);
camera.position.set(-30,30,30);
camera.lookAt(scene.position);dom

renderer = new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(0Xeeeeee));
renderer.shadowMapEnabled;
renderer.setSize(window.innerWidth,window.innerHeight);
document.getElementById("WebGL-output").appendChild(renderer.domElement);ide

axes = new THREE.AxesHelper(20);
scene.add(axes);函數

planeGeometry = new THREE.PlaneGeometry(60,30);
var planeMaterial = new THREE.MeshPhongMaterial({color:0xeeeeee});
var plane = new THREE.Mesh(planeGeometry,planeMaterial);
plane.position.set(15,0,0);
plane.rotation.x = -0.5*Math.PI;
scene.add(plane);ui

var stats = new Stats();
document.body.appendChild(stats.dom);this

var controls = new THREE.TrackballControls(camera,renderer.domElement);
controls.maxDistance = 400.0;
controls.minDistance = 20.0;spa

var spotlight = new THREE.SpotLight(0xffffff);
var spotlightHelper = new THREE.SpotLightHelper(spotlight);
spotlight.position.set(-50,100,2);
spotlight.castShadow = true;
spotlight.shadow.mapSize.width = 2000; // default512
spotlight.shadow.mapSize.height = 2000; // default512
scene.add(spotlight);
scene.add(spotlightHelper);code

function animate(){
requestAnimationFrame(animate);
renderer.render(scene,camera);
controls.update();
stats.update();
}

function onResize(){
camera.aspect = window.innerWidth/window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}

window.addEventListener('resize', onResize, false);
animate();
onResize();
}
init();

上面的代碼運行以後能夠看到一個有點像是金屬材質的平面

創造

向這個場景中加入對象的方法，把這個方法放在gui組件裏面：
外部全做用域：

var gui = new dat.GUI(); gui.add(guiControl, 'addCube');

而後運行，在右上角的gui面板中按addcube，就會在平面上隨機產生一個新的立方體
生成不少個立方體：
在init函數中添加代碼

function addmanycube(number){ for (var i = 0 ; i < number; i++){ guiControl.addCube(); } } addmanycube(50);

移除：

既然談到了創造，就不得不說毀滅，這是與創造相對應的
在gui控制組件對象中添加函數：

var guiControl = new function(){
...
this.removeCube = function(){
var allChildren = scene.children;
var lastObject = allChildren[allChildren.length-1];
if(lastObject instanceof THREE.Mesh){
scene.remove(lastObject);
this.numberOfObjects = scene.children.length;
}
}

...

}
而後將這個函數添加進gui控制組件中：

init(){ ... gui.add(guiControl, 'removeCube'); ... }

這個時候：點擊左上角的removeCube就會讓方塊消失一個：這裏的對象組相似於堆棧，先添加的方塊是最後移除的，後添加的方塊最早移除

獲取某個對象
方法：.getObjectById();
經過惟一的id標示來獲取對象；
以前已經生成過50個方塊，咱們試試從其中獲取一個方塊而且讓他的速度更快一些：