更多有趣示例 尽在 知屋安砖社区
示例
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);
}