three.js 场景切换

2019独角兽企业重金招聘Python工程师标准>>>

查看场景切换效果

用6个面组成的立方体作为场景图，发现会出现变形的现象，css3DRenderer 不会变形，但是不方便增加文字，最后采用scene的背景作为场景，背景是用cubeTextureLoader()加载的。

完整代码

        切换场景1
        切换场景2
        
        

如果点击文字的时候弹出对话框，需要用到Raycaster ,特别注意有多个精灵sprite的话，最好建一个组，把所有的精灵放进去

	var group = new THREE.Group();

	function showSprite1(){
	  scene.add(group);
	  showText()
	  const canvasTexture = new THREE.CanvasTexture(
	    document.querySelector("#canvas")
	  )
	  	const spritMaterial = new THREE.SpriteMaterial({
	    map:canvasTexture
	  })
	  sprite = new THREE.Sprite(spritMaterial)
	  sprite.position.set(-380,100,0);
	  //精灵的默认大小很小估计是[1,1,1]
	  sprite.scale.set(0.64*256,0.64*64,1);
	  sprite.name = "the first sprite";
	  group.add(sprite)
	
	}

关于事件交互的具体用法请见我另一篇博客

转载于:https://my.oschina.net/u/2612473/blog/3048051