新增在线演示地址

新增在线演示地址

新增在线演示地址
397a3932 · xiao149 · 424dd88e · 397a3932 · 397a3932 · 397a3932
6 changed file
--- a/3DProject.html
+++ b/3DProject.html
@@ -49,7 +49,7 @@
  <div id="label"></div>
  <div id="container"></div>
  <video id="video" autoplay loop muted>
-    <source src="./video.mp4">
+    <source src="./video/videoPlane.mp4">
  </video>

  <script>
@@ -302,19 +302,6 @@
      createWindow(100, 100, 2, 0, 900, 90, 700, "窗户");
      createWindow(100, 100, 2, 0, -200, 90, 700, "窗户");
      createWindow(100, 100, 2, 0, 200, 90, 700, "窗户");
-
-      var planeGeometry = new THREE.PlaneGeometry(200, 100);
-      var material = new THREE.MeshPhongMaterial();
-      material.side = THREE.DoubleSide;
-      var video = document.getElementById('video');
-      var texture = new THREE.VideoTexture(video);
-      texture.minFilter = THREE.LinearFilter;
-      texture.magFilter = THREE.LinearFilter;
-      texture.format = THREE.RGBFormat;
-      material.map = texture;
-      var mesh = new THREE.Mesh(planeGeometry, material);
-      mesh.position.set(0, 60, -690);
-      scene.add(mesh);
    }

    // 初始化轨迹球控件
@@ -450,6 +437,7 @@
      initMat();
      initScene();
      addSkybox( 10000, scene );
+      addVideoPlane( 0, 60, -690, 200, 100 ,scene, 'video' );
      initCamera();
      initRenderer();
      initContent();

--- a/3DVideo.html
+++ b/3DVideo.html
@@ -27,7 +27,7 @@
 </head>
 <body>
 <video id="my-video" class="video-js" controls preload="auto" autoplay loop data-setup="{}" crossorigin="anonymous">
-    <source src="./video/movie.mp4"/>
+    <source src="./video/video.mp4"/>
 </video>
 </body>
 </html>
--- a/README.md
+++ b/README.md
 # ThreeJsDemo
-ThreeJs示例代码
+在线演示地址：
+http://www.yuyaowujin.top/3DProject.html
--- a/ThreeJs/Modules.js
+++ b/ThreeJs/Modules.js
@@ -218,8 +218,24 @@ function addRollPlane(scene) {
 }
 //endregion

+//region 放置视频面板
+function addVideoPlane( x,y,z,width,length,scene,videoId ) {
+  var planeGeometry = new THREE.PlaneGeometry(width, length);
+  var material = new THREE.MeshPhongMaterial();
+  material.side = THREE.DoubleSide;
+  var video = document.getElementById(videoId);
+  var texture = new THREE.VideoTexture(video);
+  texture.minFilter = THREE.LinearFilter;
+  texture.magFilter = THREE.LinearFilter;
+  texture.format = THREE.RGBFormat;
+  material.map = texture;
+  var mesh = new THREE.Mesh(planeGeometry, material);
+  mesh.position.set(x,y,z);
+  scene.add(mesh);
+}
+//endregion
+
 //region 矩形区域
-/**  */
 function addPlane(x,z,width,length,scene) {
    var lineWidth = 8
    var geometry = new THREE.PlaneGeometry( lineWidth, length );

--- a/video/movie.mp4
+++ b/video/movie.mp4
--- a/video/videoPlane.mp4
+++ b/video/videoPlane.mp4