太阳系之旅：木星

更多有趣示例 尽在 小红砖社区

示例

HTML

<div id="jupiterloc"></div>
<article id="jupiterinfo">
<h1></h1>
  <div>
    <p>
      <p>
  </div>
</article>

CSS

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400i|Oxygen:300');
* {
  box-sizing: border-box;
}
body {
  background-color: black;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/starfield-background.jpg);
  background-size: cover;
  margin: 0;
  min-height: 100vh;
  font-family: Oxygen, sans-serif;
  color: #fff;
}
#jupiterinfo { 
  position: absolute;
  top: 0;
  width: 100%;
  padding: 2rem;
}
#jupiterinfo h1 {
  font-size: 8vw;
  margin-top: 0;
  font-weight: 100;
  line-height: 1;
  position: absolute;
}
#jupiterinfo div {
  width: 40%;
  position: absolute;
  background-color: rgba(0,0,0,0.3);
  right: 0;
  padding: 1.3rem;
  line-height: 1.6;
  font-size: 1.2rem;
  pointer-events: none;
  @media all and (max-width: 540px) {
    width: 100%;
    left: 0;
    top: 40vw;
  }
}

JS

var renderer = new THREE.WebGLRenderer( { alpha: true } );
renderer.setSize(window.innerWidth - 1, window.innerHeight - 12);

jupiterloc.appendChild(renderer.domElement);
scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(100, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.target = new THREE.Vector3(0, 0, 0);
camera.position.set(0,100,400);
camera.lookAt(scene.position);  
scene.add(camera);

light = new THREE.SpotLight(0xFFFFFF, 1, 0, Math.PI / 2, 1);
light.position.set(-2000, 2000, 1500);
light.target.position.set (0, 0, 0);
scene.add(light);

var video = document.createElement("video");
video.src = "https://thenewcode.com/assets/videos/jupiter.mp4";
video.autoplay = true;
video.loop = true;
video.crossOrigin ="Anonymous";

var videocanvas = document.createElement('canvas'),
videocanvasctx = videocanvas.getContext('2d');
videocanvas.width = 2048;
videocanvas.height = 1024;
videocanvasctx.fillStyle = '#000000';
videocanvasctx.fillRect(0, 0, videocanvas.width, videocanvas.height);

jupiterTexture = new THREE.Texture(videocanvas);
var jupiterMaterial = new THREE.MeshPhongMaterial( { map: jupiterTexture, shininess: 10, overdraw: true } );
var jupiter = new THREE.SphereGeometry(300, 100, 100);
var completeJupiter = new THREE.Mesh(jupiter, jupiterMaterial );

scene.add(completeJupiter);

function render(){
  if ( video.readyState === video.HAVE_ENOUGH_DATA ) {
      videocanvasctx.drawImage( video, 0, 0 );
      jupiterTexture.needsUpdate = true;
   }
  renderer.render(scene, camera);
  requestAnimationFrame(render);
}

render();

window.addEventListener( 'resize', onWindowResize, false );

function onWindowResize(){
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth - 1, window.innerHeight - 12);
}