制作球形状3D全景图

这是一张图片的全景图

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
html, body {
margin: 0;
height: 100%;
}

canvas {
display: block;
}

</style>
</head>
<body οnlοad="draw();">
</body>
<script src="https://johnson2heng.github.io/three.js-demo/lib/three.js"></script>
<script src="https://johnson2heng.github.io/three.js-demo/lib/js/controls/OrbitControls.js"></script>
<script>
//渲染器
var renderer;

function initRender() {
renderer = new THREE.WebGLRenderer({antialias: true});
//renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0)); //设置背景颜色
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
}
//相机
var camera;

function initCamera() {
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
//相机位置
camera.target = new THREE.Vector3( 0, 100, 0 );
}
//场景
var scene;

function initScene() {
scene = new THREE.Scene();
}
//光源
var light;

function initLight() {

}
//模型 /网格= 几何+纹理
function initModel() {

//轴辅助（每一个轴的长度）
var object = new THREE.AxesHelper(500);
//scene.add(object);

//声明一个球体
var geometry = new THREE.SphereBufferGeometry( 500, 60, 40 );
// 反转X轴上的几何图形，使所有的面点向内。
geometry.scale( - 1, 1, 1 );
//声明球体纹理
var material = new THREE.MeshBasicMaterial( {
map: new THREE.TextureLoader().load( 'city.jpg' ) //加载一整张纹理图片
} );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );

}

//用户交互插件鼠标左键按住旋转，右键按住平移，滚轮缩放
var controls;

function initControls() {

controls = new THREE.OrbitControls(camera, renderer.domElement);

// 如果使用animate方法时，将此函数删除
//controls.addEventListener( 'change', render );
// 使动画循环使用时阻尼或自转意思是否有惯性
controls.enableDamping = true;
//动态阻尼系数就是鼠标拖拽旋转灵敏度
//controls.dampingFactor = 0.25;
//是否可以缩放
controls.enableZoom = true;
//是否自动旋转
controls.autoRotate = false;
//设置相机距离原点的最远距离
controls.minDistance = 20;
//设置相机距离原点的最远距离
controls.maxDistance = 10000;
//是否开启右键拖拽
controls.enablePan = true;
}

function render() {
renderer.render(scene, camera);
}

//窗口变动触发的函数
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
render();
renderer.setSize(window.innerWidth, window.innerHeight);

}

function animate() {
//更新控制器
controls.update();
render();

//更新性能插件
stats.update();
requestAnimationFrame(animate);
}

function draw() {
initRender();
initScene();
initCamera();
initLight();
initModel();
initControls();
initStats();
initGui();

animate();
window.onresize = onWindowResize;
}
</script>
</html>

制作球形状3D全景图相关推荐

3d效果图全景难制作吗？制作3d全景图的目的是什么
3d效果图对于现在的人们来说是很常见的,而且有些3d图片甚至不需要借助特殊的设备,就可以直接用肉眼就能够看到3d效果,但3d图片和3d全景图片其实是完全不一样的概念,只是很多人常常会对这两种图片混淆, ...
ZAM 3D 制作简单的3D字幕流程(二)
ZAM 3D 制作简单的3D字幕流程(二) 原文:ZAM 3D 制作简单的3D字幕流程(二) 原地址:http://www.cnblogs.com/yk250/p/5663907.html 文中表 ...
3d全景的市场如何？该如何做好3d全景图？
我们现在看图片或者是看电视已经不仅仅是看清楚这么简单了,随着品味的上升,我们不再以简单的标清为标准,而开始追求高清以及超清画质.图片更加接近实物,就更加让人喜欢,因此很多行业对3d全景更加青睐.在互联 ...
c4d中的3D插图制作视频教程 Skillshare – 3D Illustration in Cinema 4D
技能分享--C4D的3D插图教程大小解压后:1.33G 1920X1080 mp4 语言:英语+中英文字幕(根据原英文字幕机译更准确) C4D是众所周知的平易近人的软件,也是进入3D艺术梦幻世界的理 ...
opencv极坐标转换成直角坐标_媲美 PS，用 Python 制作酷炫极坐标全景图
点击上方"Python数据之道",选择"星标公众号" 收藏文章的同时,不要忘记「在看」媲美 PS, 用 Python 制作酷炫极坐标全景图 0 概述今天要 ...
css中border制作各种形状
css利用border制作各种形状的原理如图: 使用border绘制三角形是什么原理?事实上,宽度相等的border是以45度对接的,如下图: 没有了上border如图所示: 再设置border的宽度 ...
js操作设置css动画,使用 CSS3 和 JavaScript 制作链接反转 3D 动画 - 文章教程
使用 CSS3 和 JavaScript 制作链接反转 3D 动画,CSS 和 JavaScript 技巧用来创建顶层的悬浮效果,使用 transfomr-origin 和 transform-sty ...
Python 图像一样大小_媲美 PS，用 Python 制作酷炫极坐标全景图
点击上方"Python数据之道",选择"星标公众号" 收藏文章的同时,不要忘记「在看」媲美 PS, 用 Python 制作酷炫极坐标全景图 0 概述今天要 ...
利用threejs实现3D全景图
threejs下载位置:http://www.threejs.org 我在Facebook上看到Facebook实现了3D全景图,然后,一直很好奇,最后,我发现threejs里面有一个库竟然可以实现, ...

制作球形状3D全景图

制作球形状3D全景图相关推荐

最新文章

热门文章