WebGL三维太阳系之旅：木星

WebGL Tour of the Solar System: Jupiter, 学习如何使用Three.JS视频类型的纹理贴图。

three, planet

《使用js把svg图形转成png图像》申请公开！

第三方库
作品简介 3388
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

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 = "http://r2v.me/uploads/mvs/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);
}

编译

CSS

HTML

WebGL Tour of the Solar System: Jupiter, 学习如何使用Three.JS视频类型的纹理贴图。

three, planet

编辑器支持Emmet

快捷键

WebGL Tour of the Solar System: Jupiter, 学习如何使用Three.JS视频类型的纹理贴图。

three, planet

WebGL Three.js动漫风格的3D太阳系

WebGL Three.js构建流浪地球3D场景（新的太阳）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：