济南网站万词优化,网站设计协议,开发app最好的工具,烟台做网站企业类似境面反射可以使用CubeCamera但是CubeCamera更适用于创建物体自身对环境的反射#xff0c;但是如果想要创建一面镜子的话使用CubeCamera会难调试所反射物体的位置#xff0c;而且镜面中的物体不会随着控制器的缩放而变动。 使用Reflector.js可以很容易的创建一面镜子但是如果想要创建一面镜子的话使用CubeCamera会难调试所反射物体的位置而且镜面中的物体不会随着控制器的缩放而变动。 使用Reflector.js可以很容易的创建一面镜子并且镜子中的对象会依据发光体的缩放而缩放而且可以调试镜子的发光色类似墨镜的效果。
2、使用步骤
2.1、引入js文件
和创建镜头炫光 Lensflare一样需要单独引入
!-- 导入 Reflector.js --
script src../../libs/examples/js/objects/Reflector.js/script
2.2、创建镜子形状 let planeGeometry new THREE.PlaneBufferGeometry(10, 10);
此处创建了一个矩形的平面
2.3、配置镜子参数
let options {clipBias: 0.03,textureWidth: window.innerWidth * window.devicePixelRatio,textureHeight: window.innerHeight * window.devicePixelRatio,color: 0x889999,recursion: 1};2.4、创建镜子并加入场景
let mirror new THREE.Reflector(planeGeometry, options);
scene.add(mirror);
3、示例代码
!DOCTYPE html
html langen
headmeta charsetUTF-8link relicon href../../../three.pngtitle通过 Reflector 创建反光镜/titlestylebody {margin: 0;overflow: hidden; /* 溢出隐藏 */}#loading {position: fixed;top: 50%;left: 50%;color: #FFFFFF;font-size: 20px;margin-top: -30px;margin-left: -40px;}/stylescript src../../libs/build/three-r93.js/scriptscript src../../libs/examples/js/Detector.js/scriptscript src../../libs/examples/js/libs/dat.gui.min.js/scriptscript src../../libs/examples/js/libs/stats.min.js/scriptscript src../../libs/examples/js/controls/OrbitControls.js/script!-- 导入 Reflector.js --script src../../libs/examples/js/objects/Reflector.js/script/head
body
p idloadingloading....../p
scriptlet scene, camera, renderer, controls, guiControls;let stats initStats();/* 场景 */function initScene() {scene new THREE.Scene();scene.background new THREE.CubeTextureLoader().setPath(../../textures/cube/Bridge2/).load([posx.jpg,negx.jpg,posy.jpg,negy.jpg,posz.jpg,negz.jpg]);}/* 相机 */function initCamera() {camera new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);camera.position.set(-10, 2, 20);camera.lookAt(new THREE.Vector3(0, 0, 0));}/* 渲染器 */function initRender() {renderer new THREE.WebGLRenderer({antialias: true});renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);}/* 灯光 */function initLight() {scene.add(new THREE.AmbientLight(0x0c0c0c));let spotLight1 new THREE.SpotLight(0xffffff);spotLight1.position.set(-400, -400, -400);let spotLight2 new THREE.SpotLight(0xffffff);spotLight2.position.set(400, 400, 400);scene.add(spotLight1);scene.add(spotLight2);}/* 控制器 */function initControls() {/* 地图控件 */controls new THREE.OrbitControls(camera, renderer.domElement);/* 属性参数 */}/* 调试插件 */function initGui() {guiControls new function () {};let gui new dat.GUI();}/* 场景中的内容 */let mesh;function initContent() {let loader new THREE.JSONLoader();loader.load(../../models/json/uv-standard.json, function (geometry) {let material new THREE.MeshBasicMaterial();let texture new THREE.TextureLoader().load(../../textures/uv/ash_uvgrid01.jpg);material.map texture;mesh new THREE.Mesh(geometry, material);mesh.translateZ(5);scene.add(mesh);removeLoading();});let planeGeometry new THREE.PlaneBufferGeometry(10, 10);let options {clipBias: 0.03,textureWidth: window.innerWidth * window.devicePixelRatio,textureHeight: window.innerHeight * window.devicePixelRatio,color: 0x889999,recursion: 1};let mirror new THREE.Reflector(planeGeometry, options);scene.add(mirror);}/* 移除加载元素 */function removeLoading() {document.getElementById(loading).style.display none;}/* 性能插件 */function initStats() {let stats new Stats();document.body.appendChild(stats.domElement);return stats;}/* 窗口变动触发 */function onWindowResize() {camera.aspect window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize(window.innerWidth, window.innerHeight);}/* 数据更新 */function update() {stats.update();controls.update();if (mesh) {mesh.rotateX(0.01);mesh.rotateY(0.01);mesh.rotateZ(0.01);}}/* 初始化 */function init() {initScene();initCamera();initRender();initLight();initControls();initContent();initGui();/* 监听事件 */window.addEventListener(resize, onWindowResize, false);}/* 循环渲染 */function animate() {requestAnimationFrame(animate);renderer.render(scene, camera);update();}/* 初始加载 */(function () {console.log(three init start...);init();animate();console.log(three init end...);})();/script
/body
/html
