THREE.js удаление объекта
У меня проблемы с Three.js,
Задача состоит в том, чтобы сделать машину, которая останавливается на красный свет. У меня есть сцена, и машина движется, но я не могу изменить свет, что бы я ни пытался. Я создал сферу, которая представляет свет, и кнопку, которая должна изменить его цвет. Я хочу, чтобы он вызывал функцию, которая скрывает красный свет и показывает зеленый.
Однако, когда я вызываю функцию:
function removeSphere() {
scene.remove(sphere2);
render();}
Ничего не произошло. Я пробовал разные варианты, но никак не могу отредактировать сферу.
Может ли кто-нибудь помочь мне с этим?
Полный код ниже:
<head>
<title>#16 Three.js - ColladaLoader</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
var kamera ="A";
var delta = 0.01;
var deltaTmp = 0.01;
function kameraA() { kamera ="A";}
function kameraB() { kamera ="B";}
function kameraStartStop() {
if(delta == 0.0) {delta = deltaTmp;}
else {delta = 0.0;}}
function kameraPrawoLewo() {
delta = -delta;
deltaTmp = -deltaTmp;}
</script>
</head>
<body>
<div >
       
<button onclick="kameraA();">Kamera 1</button>
<button onclick="kameraB();">Kamera B</button>
<button onclick="kameraStartStop();">Kamera START/STOP</button>
<button onclick="kameraPrawoLewo();">Kamera PRAWO/LEWO</button>
               
<button onclick="removeSphere();">Remove sphere</button>
<br />
</div>
<script src="js/three.js"></script>
<script src="js/loaders/ColladaLoader.js"></script>
<script src="js/Detector.js"></script>
<script>
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var container;
var camera, scene, renderer, objects;
var dae,dae1,dae2;
var loader = new THREE.ColladaLoader();
loader.options.convertUpAxis = true;
var url='obj/auto20.dae';
loader.load( url, function ( collada ) {
dae = collada.scene;
dae.traverse( function ( child ) {
if ( child instanceof THREE.SkinnedMesh ) {
var animation = new THREE.Animation( child, child.geometry.animation );
animation.play();
}
} );
dae.scale.x = dae.scale.y = dae.scale.z = 200;
dae.position.y-=460;
dae.position.x-=4096;
dae.position.z+=512;
dae.updateMatrix();
dae.traverse( function ( child ) {
child.castShadow = true;
child.receiveShadow = false;
} );
init();
animate();
} );
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 40000 );
camera.position.set( Math.pow(2,13), 1024, 0);
scene = new THREE.Scene();
scene.add( dae );
scene.add( dae1 );
// swiatla
var light1 = new THREE.DirectionalLight( 0xffffff );
light1.castShadow = true;
light1.position.set(-2000, 2000, -5000);
light1.shadowCameraNear = 1;
light1.shadowCameraFar = 16000;
light1.shadowCameraRight = 10000;
light1.shadowCameraLeft = -10000;
light1.shadowCameraTop = 10000;
light1.shadowCameraBottom = -10000;
// light1.shadowCameraVisible = true;
scene.add( light1 );
var geometr = new THREE.SphereGeometry( 100, 32, 32 );
var materi = new THREE.MeshBasicMaterial( {color: 0xff0000} );
var sphere2 = new THREE.Mesh( geometr, materi );
sphere2.position.set(200, 500, 500);
scene.add( sphere2 );
function removeSphere() {
scene.remove(sphere2);
render();
}
scene.add( new THREE.AmbientLight( 0xcccccc ) );
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth -16, window.innerHeight - 64 ); //okno renderowania
renderer.shadowMapEnabled=true;
renderer.shadowMapType=THREE.PCFSoftShadowMap;
container.appendChild( renderer.domElement );
window.addEventListener( 'resize', onWindowResize, false );
scene.fog = new THREE.Fog( 0xbbddee, -2*1024, 32*1024 ); //mgla (kolor, near, far)
var texture = THREE.ImageUtils.loadTexture('img/dirt2.jpg');
texture.repeat.set( 64,32);
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.anisotropy = 16;
var planeMaterial = new THREE.MeshBasicMaterial({map: texture});
var planeGeometry = new THREE.PlaneGeometry(Math.pow(2,16), Math.pow(2,15));
for ( var i = 0; i < 2; i ++ ) {
var plane = new THREE.Mesh( planeGeometry, planeMaterial );
plane.rotation.x = - Math.PI / 2;
plane.position.y -= 512;
plane.position.z = i*(Math.pow(2,15)+1024)-Math.pow(2,14);
plane.castShadow = false;
plane.receiveShadow = true;
scene.add( plane );
}
var texture_1 = THREE.ImageUtils.loadTexture('img/asfalt4.jpg');
texture_1.repeat.set( 64,1);
texture_1.wrapS = THREE.RepeatWrapping;
texture_1.wrapT = THREE.RepeatWrapping;
texture_1.anisotropy = 16;
var planeMaterial_1 = new THREE.MeshBasicMaterial({map: texture_1});
var planeGeometry_1= new THREE.PlaneGeometry(Math.pow(2,16), 1024);
var plane_1 = new THREE.Mesh( planeGeometry_1, planeMaterial_1 );
plane_1.rotation.x = - Math.PI / 2;
plane_1.position.y -= 512;
plane_1.position.z += 512;
plane_1.castShadow = false;
plane_1.receiveShadow = true;
scene.add( plane_1 );
//======================================================================
var textures = ['img/Desert/north.jpg',
'img/Desert/south.jpg',
'img/Desert/top.jpg',
'img/Desert/bottom.jpg',
'img/Desert/west.jpg',
'img/Desert/east.jpg'];
var materials = [];
for(var i=0;i<textures.length;i++) {
var texture = THREE.ImageUtils.loadTexture(textures[i]);
texture.anisotropy = renderer.getMaxAnisotropy();
materials.push( new THREE.MeshBasicMaterial({map: texture, side: THREE.BackSide}));
}
var geometry = new THREE.CubeGeometry(32*1024,32*1024,32*1024);
var skyBox = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ));
skyBox.position.y -= 1024;
scene.add( skyBox );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth -16, window.innerHeight - 64);
}
function animate() {
requestAnimationFrame( animate );
render();
}
var a = new THREE.Vector3( 1,2,0 );
var clock = new THREE.Clock();
var kat = 0;
function render() {
kat += delta;
if (kamera=="A"){
camera.position.x = Math.cos( kat ) * Math.pow(2,13);
camera.position.y = 1024;
camera.position.z = Math.sin( kat ) * Math.pow(2,13);
camera.lookAt( scene.position );
}
else{
camera.position.x = 0;
camera.position.y = 4;
camera.position.z = 0;
a.x = Math.cos( kat ) * 8;
a.y = 2;
a.z = Math.sin( kat ) * 8;
camera.lookAt( a );
}
dae.position.x += 16;
if (dae.position.x>Math.pow(2,14)) {
dae.position.x=-Math.pow(2,14);}
THREE.AnimationHandler.update( clock.getDelta() );
renderer.render( scene, camera );
}
</script>
</body>
2 ответа
Вы объявили свой removeSphere функционировать внутри вашего init функция. Попробуйте переместить объявление функции за пределы init функция и декларирование sphere2 как глобальная переменная.
var sphere2;
function init() {
...
}
function removeSphere() {
scene.remove(sphere2);
render();
}
Попробуй это:
При добавлении сферы на сцену задайте уникальное имя для сферы, например:
sphere.name = "trololol";
Затем, когда вы хотите удалить сферу из сцены, вы можете сделать это:
var sphereObject = scene.getObjectByName("trololol");
scene.remove(sphereObject);