three实现三维空间镜子发射折射效果代码
代码语言:html
所属分类:三维
代码描述:three实现三维空间镜子发射折射效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <link type="text/css" rel="stylesheet" href="main.css"> <style> body { color: #444; } a { color: #08f; } </style> </head> <body> <div id="container"></div> <!-- Import maps polyfill --> <!-- Remove this when import maps will be widely supported --> <script async type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/es-module-shims.1.3.6.js"></script> <script type="importmap"> { "imports": { "three": "//repo.bfw.wiki/bfwtool/build/three.module.js" } } </script> <script type="module"> import * as THREE from 'three'; import Stats from '//repo.bfw.wiki/bfwtool/examples/jsm/libs/stats.module.js'; import { OrbitControls } from '//repo.bfw.wiki/bfwtool/examples/jsm/controls/OrbitControls.js'; import { Reflector } from '//repo.bfw.wiki/bfwtool/examples/jsm/objects/Reflector.js'; let camera, scene, renderer; let cameraControls; let sphereGroup, smallSphere; let groundMirror, verticalMirror; init(); animate(); function init() { const container = document.getElementById( 'container' ); // renderer renderer = new THREE.WebGLRenderer( { antialias: true } ); renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize( window.innerWidth, window.innerHeight ); container.appendChild( renderer.domElement ); // scene scene = new THREE.Scene(); // camera camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 500 ); camera.position.set( 0, 75, 160 ); cameraControls = new OrbitControls( camera, renderer.domElement ); cameraControls.target.set( 0, 40, 0 ); cameraControls.maxDistance = 400; cameraControls.minDistance = 10; cameraControls.update(); // const planeGeo = new THREE.PlaneGeometry( 100.1, 100.1 ); // reflectors/mirrors let geometry, material; geometry = new THREE.CircleGeometry( 40, 64 ); groundMirror = new Reflector( geometry, { clipBias: 0.003, textureWidth: window.innerWidth * window.devicePixelRatio, textureHeight: window.innerHeight * window.devicePixelRatio, color: 0x777777 } ); groundMirror.position.y = 0.5; groundMirror.rotateX( - Math.PI / 2 ); scene.add( groundMirror ); geometry = new THREE.PlaneGeometry( 100, 100 ); verticalMirror = new Reflector( geometry, { clipBias: 0.003, textureWidth: window.innerWidth * window.devicePixelRatio, textureHeight: window.innerHeight * window.devicePixelRatio, color: 0x889999 } ); verticalMirror.position.y = 50; verticalMirror.position.z = - 50; scene.add( verticalMirror ); sphereGroup = new THREE.Object3D(); scene.add( sphereGroup ); geometry = new THREE.CylinderGeometry( 0.1, 15 * Math.cos( Math.PI / 180 * 30 ), 0.1, 24, 1 ); material = new THREE.MeshPhongMaterial( { color: 0xffffff, emissive: 0x444444 } ); const sphereCap = new THREE.Mesh( geometry, material );.........完整代码请登录后点击上方下载按钮下载查看
网友评论0