ThreeJS 官方案例学习(webgl_effects_stereo)
1.效果图
2.源码
< template> < div> < div id= "container" > < / div> < / div>
< / template>
< script>
import * as THREE from 'three' ;
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls' ;
import { RoomEnvironment } from 'three/examples/jsm/environments/RoomEnvironment.js' ;
import Stats from 'three/examples/jsm/libs/stats.module.js' ;
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader'
import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js' ;
import gsap from 'gsap' ;
import { StereoEffect } from 'three/examples/jsm/effects/StereoEffect.js' ;
const path = '/textures/cube/Park3Med/'
const format = '.jpg'
const urls = [ path + 'px' + format, path + 'nx' + format, path + 'py' + format, path + 'ny' + format, path + 'pz' + format, path + 'nz' + format
]
const textureCube = new THREE. CubeTextureLoader ( ) . load ( urls) ;
export default { data ( ) { return { container : null , scene : null , camera : null , renderer : null , controller : null , stats : null , mixer : null , model : null , clock : new THREE. Clock ( ) , spheres : [ ] , mouseX : 0 , mouseY : 0 , windowHalfX : 0 , windowHalfY : 0 , effect : null , } ; } , mounted ( ) { this . init ( ) this . animate ( ) window. addEventListener ( "resize" , this . onWindowSize) window. addEventListener ( 'mousemove' , this . onDocumentMouseMove) ; } , beforeUnmount ( ) { console. log ( 'beforeUnmount===============' ) ; this . container = null this . scene = null this . camera = null this . renderer = null this . controller = null this . stats = null this . mixer = null this . model = null } , methods : { init ( ) { this . container = document. getElementById ( 'container' ) this . windowHalfX = this . container. clientWidth / 2 ; this . windowHalfY = this . container. clientHeight / 2 ; this . setScene ( ) this . setCamera ( ) this . setRenderer ( ) this . setEffect ( ) this . setController ( ) this . addHelper ( ) this . setPMREMGenerator ( ) this . setLight ( ) this . setMesh ( ) this . addStatus ( ) } , setScene ( ) { this . scene = new THREE. Scene ( ) this . scene. background = textureCube; } , setCamera ( ) { this . camera = new THREE. PerspectiveCamera ( 60 , this . container. clientWidth / this . container. clientHeight, 1 , 100000 ) this . camera. position. set ( 0 , 0 , 3200 ) this . camera. aspect = this . container. clientWidth / this . container. clientHeight; this . camera. updateProjectionMatrix ( ) ; this . camera. lookAt ( new THREE. Vector3 ( 0 , 0 , 0 ) ) this . scene. add ( this . camera) } , setRenderer ( ) { this . renderer = new THREE. WebGLRenderer ( { antialias : true , logarithmicDepthBuffer : true , } ) this . renderer. setSize ( this . container. clientWidth, this . container. clientHeight) ; this . renderer. setPixelRatio ( window. devicePixelRatio) ; this . container. appendChild ( this . renderer. domElement) ; } , setEffect ( ) { this . effect = new StereoEffect ( this . renderer) this . effect. setSize ( this . container. clientWidth, this . container. clientHeight) ; } , setController ( ) { this . controller = new OrbitControls ( this . camera, this . renderer. domElement) ; this . controller. enableDamping = true ; this . controller. dampingFactor = 0.04 ; } , addHelper ( ) { let helper = new THREE. CameraHelper ( this . camera) ; let axisHelper = new THREE. AxesHelper ( 150 ) ; this . scene. add ( axisHelper) let gridHelper = new THREE. GridHelper ( 100 , 30 , 0x2C2C2C , 0x888888 ) ; this . scene. add ( gridHelper) ; } , setPMREMGenerator ( ) { const pmremGenerator = new THREE. PMREMGenerator ( this . renderer) ; this . scene. environment = pmremGenerator. fromScene ( new RoomEnvironment ( this . renderer) , 0.04 ) . texture; } , setLight ( ) { const ambientLight = new THREE. AmbientLight ( 0x404040 , 4 ) ; const directionalLight = new THREE. DirectionalLight ( 0xffffff , 1.0 ) ; const test = new THREE. PointLight ( "#ffffff" , 10 , 2 ) ; const testHelperMap = new THREE. PointLightHelper ( test) ; } , addStatus ( ) { this . stats = new Stats ( ) ; this . container. appendChild ( this . stats. dom) ; } , setMesh ( ) { textureCube. mapping = THREE . CubeRefractionMapping; const geometry = new THREE. SphereGeometry ( 100 , 32 , 16 ) ; const material = new THREE. MeshBasicMaterial ( { color : 0xffffff , envMap : textureCube, refractionRatio : 0.95 , } ) for ( let i = 0 ; i < 500 ; i++ ) { const mesh = new THREE. Mesh ( geometry, material) mesh. position. x = Math. random ( ) * 10000 - 5000 mesh. position. y = Math. random ( ) * 10000 - 5000 mesh. position. z = Math. random ( ) * 10000 - 5000 mesh. scale. x = mesh. scale. y = mesh. scale. z = Math. random ( ) * 3 + 1 this . scene. add ( mesh) this . spheres. push ( mesh) } } , onWindowSize ( ) { this . windowHalfX = this . container. clientWidth / 2 ; this . windowHalfY = this . container. clientHeight / 2 ; this . camera. aspect = this . container. clientWidth / this . container. clientHeight; this . camera. updateProjectionMatrix ( ) ; this . effect. setSize ( this . container. clientWidth, this . container. clientHeight) ; } , onDocumentMouseMove ( event ) { this . mouseX = ( event. clientX - this . windowHalfX) * 10 ; this . mouseY = ( event. clientY - this . windowHalfY) * 10 ; } , animate ( ) { const timer = 0.0001 * Date. now ( ) ; this . camera. position. x += ( this . mouseX - this . camera. position. x) * .05 ; this . camera. position. y += ( - this . mouseY - this . camera. position. y) * .05 ; this . camera. lookAt ( this . scene. position) ; for ( let i = 0 ; i < this . spheres. length; i++ ) { const sphere = this . spheres[ i] ; sphere. position. x = 5000 * Math. cos ( timer + i) ; sphere. position. y = 5000 * Math. sin ( timer + i * 1.1 ) ; } const delta = this . clock. getDelta ( ) ; if ( this . mixer) { this . mixer. update ( delta) ; } requestAnimationFrame ( this . animate) ; this . controller. update ( delta) ; this . stats. update ( ) ; this . effect. render ( this . scene, this . camera) ; } , } ,
} ;
< / script>
< style>
#container { position : absolute; width : 100 % ; height : 100 % ;
}
< / style> . lookAt ( x, y, z) this . controller. update ( delta) ; this . stats. update ( ) ; this . effect. render ( this . scene, this . camera) ; } , } ,
} ;
< / script>
< style>
#container { position : absolute; width : 100 % ; height : 100 % ;
}
< / style>