three打造三维少年在客厅打游戏的动画效果
代码语言:html
所属分类:三维
代码描述:three打造三维少年在客厅打游戏的动画效果,电视机的内容可以直接从你的摄像头获取实时视频流,必须在新窗口打开,iframe内无用
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>HTML5 Canvas 房间3D模型动画DEMO演示</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; } html, body { min-width: 100%; min-height: 100%; background-color: #222; font-family: 'Lato', sans-serif; } body { font-size: 80%; font-weight: lighter; background: radial-gradient(#1A5970 0%, #000 100%); overflow: hidden; } canvas { -webkit-filter: drop-shadow(0 0 3em black); filter: drop-shadow(0 0 3em black); } video#myVideo { position: absolute; top: 0; } </style> </head> <body> <div id="container"></div> <video id="myVideo" autoplay controls loop width="640" height="320" style="display:none;" crossOrigin="anonymous"> <source src="//repo.bfw.wiki/bfwrepo/video/5d8449e2482ad.mp4" type="video/mp4"> </video> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.71.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/orbit_controls.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> <script> var container; var camera, scene,controls; var raycaster = new THREE.Raycaster(); var renderer; var clock = new THREE.Clock(); var time = 0; var duration = 100; var keyframes = 4; var interpolation = duration / keyframes; var currentKeyframe = 0; var lastKeyframe = 0; var animOffset = 1; var radius = 600; var theta = 0; var prevTime = Date.now(); var lamp_light,light,fake_light; var video, videoImage, videoImageContext, videoTexture; var mouseX = 0, mouseY = 0; var mesh,circle,controller_animation, helper; var morph_logic; var screen_mesh; var texture1; var base = "//repo.bfw.wiki/bfwrepo/threemodel/things/"; var tv_screen,tv_context; var å = { ready : { count:0 }, colors : { blank : 0xffffff }, mouse : { x : 0, y : 0, z : 0.5 }, models :{ couch : base+"couch.json", monitor : base+"tv_monitor.json", tv : base+"tv.json", lamp : base+"lamp_.json", kid:base+"little_kid.json", }, targetList : [] } //___________________________________________ function generate_color(x,y,z){ if(x < 1){ x += .01; }else{ x = 0; } if(y < 1){ y += .01; }else{ y = 0; } if(z < 1){ z += .01; }else{ z = 0; } return [x,y,z]; } function getRandomColor() { var letters = '0123433333000ccc'.split(''); var color = '#'; for (var i = 0; i < 6; i++ ) { color += letters[Math.floor(Math.random() * 16)]; } return color; } var baseMaterial = new THREE.MeshLambertMaterial({ color : å.colors.blank, shading: THREE.FlatShading, side: THREE.DoubleSide, //map: couch_texture }) //___________________________________________ KICK IT OFF init(); animate(); //___________________________________________ INIT function init() { container = document.getElementById( 'container' ); camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, .1, 10000 ); camera.position.x = -305; camera.position.y = 55; camera.position.z = -65; camera.move_direction = 1; scene = new THREE.Scene(); //scene.fog = new THREE.FogExp2( 0x000000, 0.015 ); å.ready.count++; scene.add( camera ); //___________________________________________ CONTROLS controls = new THREE.OrbitControls( camera ); controls.damping = 0.2; controls.addEventListener( 'change', render ); controls.maxPolarAngle = Math.PI/2; camera.lookAt(new THREE.Vector3(0,50,0)); controls.target = new THREE.Vector3(0,50,0); å.ready.count++; //___________________________________________ HEMI var ambient = new THREE.AmbientLight(0x111111); scene.add(ambient); // TV light = new THREE.SpotLight( 0x1A5970, 2 ); light.position.set( 15, 15,68 ).multiplyScalar( 1 ); scene.add( light ); //___________________________________________ FAKE LIGHT fake_light = new THREE.SpotLight( 0x1A5970, 15,200,Math.PI/2 ); fake_light.position.set( 15, 150,268 ).multiplyScalar( 1 ); scene.add( fake_light ); fake_light.castShadow = true; fake_light.shadowMapWidth = 1024 * 2; fake_light.shadowMapHeight = 1024 * 2; fake_light.target.position.set( -20, 20,-50); fake_light.target.updateMatrixWorld(); var d = 350; fake_light = new THREE.SpotLight( 0xF0C043, 2 ); fake_light.shadowCameraLeft = -d; fake_light.shadowCameraRight = d; fake_light.shadowCameraTop = d * 2.8; fake_light.shadowCameraBottom = -d; fake_light.shadowCameraNear = 0.01; å.ready.count++; // LAMP lamp_light = new THREE.SpotLight( 0xF0C043, .25 ); lamp_light.position.set( -55,50,-50 ).multiplyScalar( 1 ); scene.add( lamp_light ); lamp_light.target.position.set( -55, 0,-50); lamp_light.target.updateMatrixWorld(); å.ready.count++; // RENDERER renderer = new THREE.WebGLRenderer( { antialias: true,transparent:true,alpha: true } ); renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize( window.innerWidth, window.innerHeight ); container.appendChild( renderer.domElement ); renderer.shadowMapEnabled = true; å.ready.count++; //__________________________________ LOAD MODEL var loader = new THREE.JSONLoader( true ); loader.load( å.models.couch, function ( geometry ) { couch = new THREE.Mesh( geometry, baseMaterial); couch.scale.set( 20,20,20 ); couch.receiveShadow = true; couch.castShadow = true; couch.position.y = -20; scene.add( couch ); å.ready.count++; }); var loader = new THREE.JSONLoader( true ); loader.load( å.models.monitor , function ( geometry ) { tv_monitor = new THREE.Mesh( geometry, baseMaterial); tv_monitor.scale.set( 20,20,20 ); tv_monitor.receiveShadow = true; //tv_monitor.castShadow = true; tv_monitor.position.y = -20; scene.add( tv_monitor ); å.ready.count++; }); //___________________________________________ TV SCREEN var errorCallback = function(e) { console.log('Nope!', e); }; video = document.getElementById( 'myVideo' ); navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; var opt = { audio: true, video: { width: 375, height: 250 } }; navigator.mediaDevices.getUserMedia(opt) .then(function(mediaStream) { video.srcObject = mediaStream; video.onloadedmetadata = function(e) { video.play(); }; }) .catch(function(err) { console.log(err.name + ": " + err.message); }); // always check for errors at the end. //if (navigator.getUserMedia) { // navigator.getUserMedia({audio: false, video: true}, function(stream) { // video.src = window.URL.createObjectURL(stream); // }, errorCallback); //} else { // video.src = '//repo.bfw.wiki/bfwrepo/video/5d8449e2482ad.mp4'; // } videoImage = document.createElement( 'canvas' ); videoImage.width = 640; videoImage.height = 320; videoImageContext = videoImage.getContext( '2d' ); videoImageContext.fillStyle = '#ffffff'; videoImageContext.fillRect( 0, 0, videoImage.width, videoImage.height ); videoTexture = new THREE.Texture( videoImage ); videoTexture.crossOrigin = "Anonymous"; videoTexture.minFilter = THREE.LinearFilter; videoTexture.magFilter = THREE.LinearFilter; loader.load( å.models.tv, function ( geometry ) { var material = new THREE.MeshBasicMaterial({ color : å.colors.blank, map: videoTexture, overdraw: true, side:THREE.DoubleSide }); var uvs = geometry.faceVertexUvs[ 0 ]; uvs[ 0 ][ 0 ].set( 0, 0 ); uvs[ 0 ][ 1 ].set( 1, 0 ); uvs[ 0.........完整代码请登录后点击上方下载按钮下载查看
网友评论0