之前使用的是box去模擬天空盒
現在直接使用場景去切換
示例：@躍焱邵隼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>場景切換</title>
<link rel="stylesheet" href="../../plugins/ys/ys.min.css">
<link rel="stylesheet" href="../../css/ysThree/pageStyle.css">
</head>
<body>
<div class="ys-absolute-container" id="box" style="overflow: hidden"></div>
<div class="fix-btns">
<span class="ys-btn ys-btn-warm ys-btn-sm tips-btn">小記</span>
<span class="ys-btn ys-btn-sm change-scene">下一個場景</span>
</div>
<div class="tips-container ys-absolute-container">
<div class="ys-tit">場景切換</div>
<div class="ys-block"></div>
</div>
</body>
<script src="../../plugins/ys/ys.min.js"></script>
<script src="../../plugins/threeLibrary/three.min.js"></script>
<script src="../../plugins/threeLibrary/js/controls/OrbitControls.js"></script>
<script src="../../plugins/createJs/tween.min.js"></script>
<script src="../../plugins/threeLibrary/js/libs/stats.min.js"></script>
<script src="../../plugins/ysThree/ysThree.js"></script>
<script>
const el = document.getElementById('box')
const app = new YsThree(el,{
// gridHelper:true,//網格參考線
// axes:true,//座標輔助
//clearColor:'#000'//畫布顏色
})
const renderer = app.renderer
const clock = new THREE.Clock()
app.initStatus(Stats)
function initControls(camera) {
const controls = new THREE.OrbitControls(camera,renderer.domElement)
// 如果使用animate方法時，將此函數刪除
//controls.addEventListener( 'change', render );
// 使動畫循環使用時阻尼或自轉 意思是否有慣性
controls.enableDamping = true;
//動態阻尼係數 就是鼠標拖拽旋轉靈敏度
//controls.dampingFactor = 0.25;
//是否可以縮放
controls.enableZoom = true;
//是否自動旋轉
controls.autoRotate = true;
controls.autoRotateSpeed = 0.3;
//設置相機距離原點的最遠距離
controls.minDistance = 1;
//設置相機距離原點的最遠距離
// controls.maxDistance = 1000;
//是否開啓右鍵拖拽
controls.enablePan = true
this.controls = controls
return controls
}
/* **** **** 主要代碼 **** ****/
const textures = []
const loader = new THREE.TextureLoader()
for ( let i = 0; i < 6; i ++ ) {
textures[ i ] = loader.load( '../../images/ysThree/transition/transition' + ( i + 1 ) + '.png' )
}
const transitionParams = {
useTexture: true, //爲 false 默認採用漸變式
transition: 0,
transitionSpeed: 0.01,
texture: textures[0],
animate: false,
}
function OneScene( option ) {
//camera
this.camera = new THREE.PerspectiveCamera( 45, el.offsetWidth / el.offsetHeight, 1, 10000 )
this.camera.position = option.cameraPosition
// Setup scene
this.scene = new THREE.Scene()
this.scene.add( new THREE.AmbientLight( 0x555555 ) )
//light
const light = new THREE.SpotLight( 0xffffff, 1.5 )
light.position.set( 0, 500, 2000 )
this.scene.add( light )
// WebGLRenderTarget
const renderTargetParameters = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat, stencilBuffer: false };
this.fbo = new THREE.WebGLRenderTarget( el.offsetWidth, el.offsetHeight, renderTargetParameters )
this.controls = initControls(this.camera)
this.render = function ( delta, rtt ) {
if(option.renderCallBack) option.renderCallBack()
renderer.setClearColor( option.clearColor )
if ( rtt ) {
renderer.setRenderTarget( this.fbo )
renderer.clear()
renderer.render( this.scene, this.camera )
} else {
renderer.setRenderTarget( null )
renderer.render( this.scene, this.camera )
}
this.controls.update()
};
}
const sceneA = new OneScene({
cameraPosition: new THREE.Vector3( 0, 0, 1200 ),
clearColor: '#fff',
renderCallBack: function () {
}
})
const sceneB = new OneScene({
cameraPosition: new THREE.Vector3( 0, 0, 1200 ),
fov: 45,
clearColor: '#000',
renderCallBack: function () {
}
})
const sceneC = new OneScene({
cameraPosition: new THREE.Vector3( 0, 0, 1200 ),
fov: 45,
clearColor: '#efa7db',
renderCallBack: function () {
}
})
const sceneD = new OneScene({
cameraPosition: new THREE.Vector3( 0, 0, 1200 ),
fov: 45,
clearColor: '#A2EFAE',
renderCallBack: function () {
}
})
//場景A中的物體
for (let i = 0; i<100; i++) {
const box = new THREE.Mesh(new THREE.BoxBufferGeometry(5,5,5), new THREE.MeshBasicMaterial({color: 'red'}))
box.position.set(300-Math.random()*600, 300-Math.random()*600, 300-Math.random()*600)
sceneA.scene.add(box)
}
//場景B中的物體
for (let i = 0; i<100; i++) {
const sphere = new THREE.Mesh(new THREE.SphereBufferGeometry(5,20), new THREE.MeshBasicMaterial({color: 'yellow'}))
sphere.position.set(300-Math.random()*600, 300-Math.random()*600, 300-Math.random()*600)
sceneB.scene.add(sphere)
}
//場景C中的物體
for (let i = 0; i<100; i++) {
const sphere = new THREE.Mesh(new THREE.SphereBufferGeometry(5,20), new THREE.MeshBasicMaterial({color: 'green'}))
sphere.position.set(300-Math.random()*600, 300-Math.random()*600, 300-Math.random()*600)
sceneC.scene.add(sphere)
}
//場景D中的物體
for (let i = 0; i<100; i++) {
const sphere = new THREE.Mesh(new THREE.SphereBufferGeometry(5,20), new THREE.MeshBasicMaterial({color: 'blue'}))
sphere.position.set(300-Math.random()*600, 300-Math.random()*600, 300-Math.random()*600)
sceneD.scene.add(sphere)
}
const transition = new app.SceneTransition( sceneA, sceneB,transitionParams )
let FLOG = 0
$(".change-scene").click(function () {
transitionParams.texture = textures[parseInt(Math.random()*6)]
if(FLOG === 0) {
transition.update(sceneA,sceneB,true)
}else if(FLOG === 1) {
transition.update(sceneB,sceneC,true)
}else if(FLOG === 2) {
transition.update(sceneC,sceneD,true)
}else if(FLOG === 3) {
transition.update(sceneD,sceneA,true)
FLOG = -1
}
FLOG ++
})
/* **** **** 主要代碼 **** ****/
function render() {
app.staus.update()
requestAnimationFrame(render)
//
transition.render( clock.getDelta() )
}
render()
</script>
<!--此腳本與案例無關 可忽略-->
<script src="../../js/ysThree/pageJs.js"></script>
</html>