|
| 1 | +<!DOCTYPE html> |
| 2 | + |
| 3 | +<html> |
| 4 | + |
| 5 | +<head> |
| 6 | + <title>Example 10.11 - Video texture - non canvas</title> |
| 7 | + <script type="text/javascript" src="../libs/three.js"></script> |
| 8 | + <script type="text/javascript" src="../libs/jquery-1.9.0.js"></script> |
| 9 | + <script type="text/javascript" src="../libs/stats.js"></script> |
| 10 | + <script type="text/javascript" src="../libs/dat.gui.js"></script> |
| 11 | + <script type="text/javascript" src="../libs/sketch.js"></script> |
| 12 | + <style> |
| 13 | + body { |
| 14 | + /* set margin to 0 and overflow to hidden, to go fullscreen */ |
| 15 | + margin: 0; |
| 16 | + overflow: hidden; |
| 17 | + } |
| 18 | + </style> |
| 19 | +</head> |
| 20 | +<body> |
| 21 | + |
| 22 | +<div id="Stats-output"> |
| 23 | +</div> |
| 24 | + |
| 25 | +<video id="video" style="display: none; position: absolute; left: 15px; top: 75px;" |
| 26 | + src="../assets/movies/Big_Buck_Bunny_small.ogv" controls="true" autoplay="true"></video> |
| 27 | + |
| 28 | +<!-- Div which will hold the Output --> |
| 29 | +<div id="WebGL-output"> |
| 30 | +</div> |
| 31 | + |
| 32 | +<!-- Javascript code that runs our Three.js examples --> |
| 33 | +<script type="text/javascript"> |
| 34 | + |
| 35 | + var texture; |
| 36 | + |
| 37 | + // once everything is loaded, we run our Three.js stuff. |
| 38 | + $(function () { |
| 39 | + |
| 40 | + var stats = initStats(); |
| 41 | + |
| 42 | + // create a scene, that will hold all our elements such as objects, cameras and lights. |
| 43 | + var scene = new THREE.Scene(); |
| 44 | + |
| 45 | + // create a camera, which defines where we're looking at. |
| 46 | + var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); |
| 47 | + |
| 48 | + // create a render and set the size |
| 49 | + var webGLRenderer = new THREE.WebGLRenderer(); |
| 50 | + webGLRenderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0)); |
| 51 | + webGLRenderer.setSize(window.innerWidth, window.innerHeight); |
| 52 | + webGLRenderer.shadowMapEnabled = true; |
| 53 | + |
| 54 | + var video = document.getElementById('video'); |
| 55 | + texture = new THREE.VideoTexture(video); |
| 56 | + var cube; |
| 57 | + |
| 58 | + |
| 59 | + cube = createMesh(new THREE.BoxGeometry(22, 16, 0.2), "floor-wood.jpg"); |
| 60 | + cube.position.y = 2; |
| 61 | + scene.add(cube); |
| 62 | + |
| 63 | + |
| 64 | + // position and point the camera to the center of the scene |
| 65 | + camera.position.x = 00; |
| 66 | + camera.position.y = 1; |
| 67 | + camera.position.z = 28; |
| 68 | + camera.lookAt(new THREE.Vector3(0, 0, 0)); |
| 69 | + |
| 70 | + var ambiLight = new THREE.AmbientLight(0x141414) |
| 71 | + scene.add(ambiLight); |
| 72 | + |
| 73 | + var light = new THREE.DirectionalLight(); |
| 74 | + light.position.set(0, 30, 20); |
| 75 | + scene.add(light); |
| 76 | + |
| 77 | + // add the output of the renderer to the html element |
| 78 | + $("#WebGL-output").append(webGLRenderer.domElement); |
| 79 | + |
| 80 | + // call the render function |
| 81 | + var step = 0; |
| 82 | + |
| 83 | +// var polyhedron = createMesh(new THREE.PolyhedronGeometry(vertices, faces, controls.radius, controls.detail)); |
| 84 | + |
| 85 | + // setup the control gui |
| 86 | + var controls = new function () { |
| 87 | + |
| 88 | + this.showVideo = false; |
| 89 | + this.rotate = false; |
| 90 | + |
| 91 | + this.showCanvas = function () { |
| 92 | + if (controls.showVideo) { |
| 93 | + $('#video').show(); |
| 94 | + } else { |
| 95 | + $('#video').hide(); |
| 96 | + } |
| 97 | + } |
| 98 | + |
| 99 | + }; |
| 100 | + |
| 101 | + |
| 102 | + var gui = new dat.GUI(); |
| 103 | + gui.add(controls, "rotate"); |
| 104 | + gui.add(controls, "showVideo").onChange(controls.showCanvas); |
| 105 | + |
| 106 | + |
| 107 | + render(); |
| 108 | + |
| 109 | + function createMesh(geom) { |
| 110 | + |
| 111 | + var materialArray = []; |
| 112 | + materialArray.push(new THREE.MeshBasicMaterial({ color: 0x0051ba })); |
| 113 | + materialArray.push(new THREE.MeshBasicMaterial({ color: 0x0051ba })); |
| 114 | + materialArray.push(new THREE.MeshBasicMaterial({ color: 0x0051ba })); |
| 115 | + materialArray.push(new THREE.MeshBasicMaterial({ color: 0x0051ba })); |
| 116 | + materialArray.push(new THREE.MeshBasicMaterial({ map: texture })); |
| 117 | + materialArray.push(new THREE.MeshBasicMaterial({ color: 0xff51ba })); |
| 118 | + var faceMaterial = new THREE.MeshFaceMaterial(materialArray); |
| 119 | + |
| 120 | + |
| 121 | + // create a multimaterial |
| 122 | + var mesh = new THREE.Mesh(geom, faceMaterial); |
| 123 | + |
| 124 | + return mesh; |
| 125 | + } |
| 126 | + |
| 127 | + function render() { |
| 128 | + stats.update(); |
| 129 | + |
| 130 | + if (controls.rotate) { |
| 131 | + cube.rotation.x += -0.01; |
| 132 | + cube.rotation.y += -0.01; |
| 133 | + cube.rotation.z += -0.01; |
| 134 | + } |
| 135 | + |
| 136 | + |
| 137 | + // render using requestAnimationFrame |
| 138 | + requestAnimationFrame(render); |
| 139 | + webGLRenderer.render(scene, camera); |
| 140 | + } |
| 141 | + |
| 142 | + function initStats() { |
| 143 | + |
| 144 | + var stats = new Stats(); |
| 145 | + stats.setMode(0); // 0: fps, 1: ms |
| 146 | + |
| 147 | + // Align top-left |
| 148 | + stats.domElement.style.position = 'absolute'; |
| 149 | + stats.domElement.style.left = '0px'; |
| 150 | + stats.domElement.style.top = '0px'; |
| 151 | + |
| 152 | + $("#Stats-output").append(stats.domElement); |
| 153 | + |
| 154 | + return stats; |
| 155 | + } |
| 156 | + }); |
| 157 | + |
| 158 | + |
| 159 | +</script> |
| 160 | + |
| 161 | +</body> |
| 162 | +</html> |
| 163 | + |
| 164 | + |
| 165 | + |
0 commit comments