0
J'ai des problèmes avec Three.js.Objet THREE.js en cours de suppression
La tâche est de faire une voiture qui s'arrête au feu rouge. J'ai la scène, et la voiture bouge, mais je ne peux pas changer la lumière, peu importe ce que j'essaie. J'ai créé une sphère qui représente la lumière, et un bouton qui devrait changer sa couleur. Je veux qu'il appelle une fonction, qui cache la lumière rouge et montre le vert.
Cependant, quand j'appelle la fonction:
function removeSphere() {
scene.remove(sphere2);
render();}
rien ne se passe. J'ai essayé différentes variantes, mais je ne peux pas éditer la sphère de quelque façon que ce soit.
Quelqu'un peut-il m'aider avec ceci?
code complet ci-dessous:
<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>
Pourquoi supprimez-vous l'objet en premier lieu? Il est plus rapide et plus simple d'ajuster simplement la valeur du drapeau '.visible'. – bjorke